使用 webpack 時出現意外的令牌“導出”

Question

我在 webpack 中的 babel 配置：

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開發

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

這是 output 錯誤：

/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)

似乎是這個模塊上的一個問題@platformbuilders/react-ui/... 但我不知道我該如何解決這個問題。 我嘗試了很多事情都沒有成功......我正在嘗試在 node.js 中渲染 react 項目。

編輯：這是@platformbuilders/react-ui/dist 中的 tsconfig

{
  "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

您需要啟用 ES6 模塊的編譯：

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

您可以在預設文檔中找到有關此設置的文檔。