使用 webpack 时出现意外的令牌“导出”

Question

My babel config in webpack:

module.exports = {
  // Tell webpack to run babel on every file it runs through
  module: {
  rules: [
    {
      test: /\.(js|ts|tsx)?$/,
      loader: 'babel-loader',
      include: [
        path.join(__dirname, 'src'),
        path.join(
          __dirname,
          '..',
          'node_modules/@platformbuilders/react-ui/dist/index',
        ),
      ],
      options: {
        babelrc: false,
        presets: [
          '@babel/react',
          '@babel/preset-typescript',
          [
            '@babel/preset-env',
            {
              loose: true,
              modules: false,
            },
          ],
        ],
        plugins: [
          '@babel/proposal-object-rest-spread',
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }],
          'dynamic-import-node',
          '@babel/plugin-syntax-dynamic-import',
          '@babel/plugin-transform-runtime',
        ],
      },
    },
    {
      test: /\.html$/,
      use: 'html-loader',
    },
  ],
  },
};

1- webpack --config webpack.server.cjs --mode development

2- nodemon --watch build --exec node./build/dist/assets/app.js

This is the output error:

/mnt/f/Apps/Github/services-portal-landing/node_modules/@platformbuilders/react-ui/dist/index.js:1
export * from './components';
^^^^^^

SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1116:16)
at Module._compile (internal/modules/cjs/loader.js:1164:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
at Module.load (internal/modules/cjs/loader.js:1049:32)
at Function.Module._load (internal/modules/cjs/loader.js:937:14)
at Module.require (internal/modules/cjs/loader.js:1089:19)
at require (internal/modules/cjs/helpers.js:73:18)
at Object.@platformbuilders/react-ui (/mnt/f/Apps/Github/services-portal-landing/build/dist/assets/app.js:9240:18)
at __webpack_require__ (/mnt/f/Apps/Github/services-portal-landing/build/dist/assets/app.js:9660:41)
at Object../src/components/index.ts (/mnt/f/Apps/Github/services-portal-landing/build/dist/assets/app.js:5927:84)

Seem to be a problem on this module @platformbuilders/react-ui/... but i dont know how can I solve this. I have tryed alot of things without success... I'm trying to render the react project in node.

EDIT: This is the tsconfig in @platformbuilders/react-ui/dist

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",
    "module": "es6",
    "lib": ["es6", "DOM"],
    "types": ["react"],
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "importHelpers": true,
    "resolveJsonModule": true,
    "jsx": "react",
    "baseUrl": ".",
    "skipLibCheck": true,
    /* Strict Type-Checking Options */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "suppressImplicitAnyIndexErrors": true,
    /* Additional Checks */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    /* Module Resolution Options */
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "compileOnSave": true,
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Answer 1

You need to enable compilation of ES6 modules:

[
  '@babel/preset-env',
  {
    loose: true,
    modules: true, // <= here
  },
],

You can find documentation on this setting in the preset documentation .