使用 webpack 时意外的令牌'export'

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-配置webpack.server.js-模式开发

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

这是输出错误：

/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/。。。但我不知道该怎么解决。我尝试了很多事情都没有成功。。。我正在尝试在节点中渲染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
},
],

您可以在预设文档中找到有关此设置的文档。