React 应用程序不支持导出 { default }
Export { default } not supported in React app
我在从版本 2.1.2 更新 @atalaskit/form 到最新版本 (5.2.7) 后遇到问题。
这个新更新使用了 export { default } from './File'，我认为我的 babel and/or webpack 不支持它。
到目前为止，我发现 create-react-app 2.1.8 可以很好地运行这种语法。
此外，我在这里发现了这种语法：https://github.com/tc39/proposal-export-default-from
我试图将此提案包含在我的 .babelrc 文件中，但错误仍然存在。
@atlaskit/form/index.js（哪里出错了）
export { default } from './Form';
export { default as FormHeader } from './FormHeader';
export { default as FormFooter } from './FormFooter';
export { default as FormSection } from './FormSection';
export { default as Field } from './Field';
export { default as CheckboxField } from './CheckboxField';
export { HelperMessage, ErrorMessage, ValidMessage } from
'./Messages';
export { default as Fieldset } from './Fieldset';
错误：
(function (exports, require, module, __filename, __dirname) { export
{ default } from './Form';
^^^^^^
SyntaxError: Unexpected token export
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:670:28)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Function._load ```(/home/userX/appX/node_modules/@sentry/node/src/integrations/console.ts
:37:43)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.@atlaskit/form (/home/userX/appX/webpack:/external
"@atlaskit/form":1:1)
at __webpack_require__
(/home/userX/appX/webpack:/webpack/bootstrap:19:1)
.babelrc:
{
"presets": [
"env",
"react",
"stage-2"
]
}
webpack.dev.js
const merge = require('webpack-merge');
const css = require('./webpack.css.js');
const server = require('./webpack.server.js');
const client = require('./webpack.client.js');
const devConfigs = {
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
};
module.exports =
[ css, merge(client, devConfigs), merge(server, devConfigs) ];
webpack.client.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
file1: ['babel-polyfill', './src/containers/file1/index.js'],
file2: ['babel-polyfill', './src/containers/file2/index.js'],
file3: ['babel-polyfill', './src/containers/file3/index.js'],
},
output: {
path: path.resolve(__dirname, 'public/js/react'),
filename: '[name].js',
publicPath: '/'
}
};
webpack.server.js
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
module.exports = {
entry: {
server: ['babel-polyfill', './app.js']
},
target: 'node',
node: {
__dirname: false,
__filename: false
},
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
externals: nodeExternals(),
plugins: [
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false
})
]
};
Package.json
{
...
"private": true,
"scripts": {
"start": "node server.js",
"build:watch": "webpack --config webpack.dev.js --watch",
"build:prod": "webpack --config webpack.prod.js && rm public/js/react/*.map",
"lint": "./node_modules/.bin/eslint routes/api/ routes/services/"
},
"dependencies": {
"@atlaskit/badge": "^8.1.0",
"@atlaskit/breadcrumbs": "^6.0.5",
"@atlaskit/button": "^8.2.1",
"@atlaskit/checkbox": "^3.0.3",
"@atlaskit/dynamic-table": "^9.2.6",
"@atlaskit/field-base": "^10.2.0",
"@atlaskit/field-text": "^6.0.1",
"@atlaskit/field-text-area": "^3.2.1",
"@atlaskit/flag": "^8.1.1",
"@atlaskit/form": "^2.1.2",
"@atlaskit/icon": "^12.8.0",
"@atlaskit/inline-dialog": "^7.1.3",
"@atlaskit/inline-message": "^5.1.2",
"@atlaskit/lozenge": "^6.2.2",
"@atlaskit/modal-dialog": "^7.2.3",
"@atlaskit/page": "^7.2.0",
"@atlaskit/page-header": "^5.1.4",
"@atlaskit/quick-search": "^3.0.2",
"@atlaskit/section-message": "^1.0.7",
"@atlaskit/select": "^4.0.1",
"@atlaskit/spinner": "^7.1.1",
"@atlaskit/table-tree": "^3.1.3",
"@atlaskit/tag": "^6.0.3",
"@atlaskit/tag-group": "^6.0.6",
"@atlaskit/theme": "^4.0.4",
"@atlaskit/toggle": "^4.0.1",
"@atlaskit/tooltip": "^10.3.1",
"@sentry/node": "^4.4.1",
"async": "^2.6.1",
"atlassian-connect-express": "~3.3.0",
"atlassian-jwt": "^0.1.5",
"aws-sdk": "^2.429.0",
"axios": "^0.18.0",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"busboy": "^0.2.14",
"compression": "^1.7.1",
"cookie-parser": "^1.4.3",
"dateformat": "^3.0.3",
"errorhandler": "^1.5.0",
"express": "^4.16.2",
"express-hbs": "^1.0.4",
"express-state": "^1.4.0",
"feedme": "^1.1.1",
"form-data": "^2.3.2",
"ftp": "^0.3.10",
"glob": "^7.1.2",
"handlebars": "^4.0.11",
"i18n": "^0.8.3",
"is-base64": "^0.1.0",
"is-image": "^2.0.0",
"js-base64": "^2.5.1",
"lodash": "^4.17.5",
"mime": "^2.2.0",
"mkdirp": "^0.5.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"mongodb": "^3.0.1",
"mongoose": "^5.0.1",
"morgan": "^1.9.0",
"nodemailer": "^5.1.1",
"nodemailer-ses-transport": "^1.5.1",
"pretty-bytes": "^4.0.2",
"react": "^16.4.0",
"react-ckeditor-component": "^1.1.0",
"react-dom": "^16.4.0",
"react-dropzone": "^4.2.12",
"react-image-gallery": "^0.8.12",
"react-infinite-scroller": "^1.2.2",
"react-intl": "^2.4.0",
"react-throttle": "^0.3.0",
"request": "^2.83.0",
"request-promise": "^4.2.4",
"sanitize-filename": "^1.6.1",
"source-map-support": "^0.5.9",
"sqs-consumer": "^5.2.0",
"ssh2-sftp-client": "^2.0.1",
"static-expiry": "^0.0.11",
"styled-components": "^3.3.2",
"uglifyjs-webpack-plugin": "^2.1.1",
"uuid": "^3.2.1",
"winston": "^2.4.0",
"winston-aws-cloudwatch": "^2.0.0"
},
"devDependencies": {
"@sentry/webpack-plugin": "^1.6.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"debug": "^3.1.0",
"eslint": "^5.7.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-sonarjs": "^0.2.0",
"eslint-plugin-standard": "^4.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"husky": "^1.1.2",
"style-loader": "^0.21.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.2.1",
"webpack-merge": "^4.1.4",
"webpack-node-externals": "^1.7.2"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}
}
您的 .babelrc 以不匹配的方式从 official documentation 加载了 babel 预设。
应该是这样的：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-stage-2"
]
}
试一试，让我知道进展如何，因为没有太多信息，看来确实是失败点。
default 是 javascript 中的保留关键字，您不能将其用作导出命名空间或变量。
由于 .babelrc 文件中的预设结构，我假设您使用的是 babel 6。
我相信您正在寻找的插件是 babel-plugin-transform-export-extensions，它是 stage-1 预设的一部分，不包含在您的项目中。
如果你使用的是 babel 7，相应的插件应该是 @babel/plugin-proposal-export-default-from
已解决
我解决了这个问题。这是我设法做到的：
我注意到我已经在@atlaskit/flag 包中使用了这个语法并且一切正常。这个包虽然使用了不同的文件夹结构，但您可以在屏幕截图中看到：
之前的包在 esm 文件夹中有 index.js。我不知道 esm 的用途，所以我搜索了它并找到了这篇解释它的好文章。
解法（目前只有一个）：
npm install esm
node -r esm server.js
问题
1) Atlassian 不应该写他们的包来防止这种情况吗？
2) 是否有任何其他解决方案可以在 webpack 或 babel 文件中设置 esm 包？
我希望这对某人有所帮助。
干杯。
我在从版本 2.1.2 更新 @atalaskit/form 到最新版本 (5.2.7) 后遇到问题。
这个新更新使用了 export { default } from './File'，我认为我的 babel and/or webpack 不支持它。
到目前为止，我发现 create-react-app 2.1.8 可以很好地运行这种语法。
此外，我在这里发现了这种语法：https://github.com/tc39/proposal-export-default-from
我试图将此提案包含在我的 .babelrc 文件中，但错误仍然存在。
@atlaskit/form/index.js（哪里出错了）
export { default } from './Form';
export { default as FormHeader } from './FormHeader';
export { default as FormFooter } from './FormFooter';
export { default as FormSection } from './FormSection';
export { default as Field } from './Field';
export { default as CheckboxField } from './CheckboxField';
export { HelperMessage, ErrorMessage, ValidMessage } from
'./Messages';
export { default as Fieldset } from './Fieldset';
错误：
(function (exports, require, module, __filename, __dirname) { export
{ default } from './Form';
^^^^^^
SyntaxError: Unexpected token export
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:670:28)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Function._load ```(/home/userX/appX/node_modules/@sentry/node/src/integrations/console.ts
:37:43)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.@atlaskit/form (/home/userX/appX/webpack:/external
"@atlaskit/form":1:1)
at __webpack_require__
(/home/userX/appX/webpack:/webpack/bootstrap:19:1)
.babelrc:
{
"presets": [
"env",
"react",
"stage-2"
]
}
webpack.dev.js
const merge = require('webpack-merge');
const css = require('./webpack.css.js');
const server = require('./webpack.server.js');
const client = require('./webpack.client.js');
const devConfigs = {
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
};
module.exports =
[ css, merge(client, devConfigs), merge(server, devConfigs) ];
webpack.client.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
file1: ['babel-polyfill', './src/containers/file1/index.js'],
file2: ['babel-polyfill', './src/containers/file2/index.js'],
file3: ['babel-polyfill', './src/containers/file3/index.js'],
},
output: {
path: path.resolve(__dirname, 'public/js/react'),
filename: '[name].js',
publicPath: '/'
}
};
webpack.server.js
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
module.exports = {
entry: {
server: ['babel-polyfill', './app.js']
},
target: 'node',
node: {
__dirname: false,
__filename: false
},
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
externals: nodeExternals(),
plugins: [
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false
})
]
};
Package.json
{
...
"private": true,
"scripts": {
"start": "node server.js",
"build:watch": "webpack --config webpack.dev.js --watch",
"build:prod": "webpack --config webpack.prod.js && rm public/js/react/*.map",
"lint": "./node_modules/.bin/eslint routes/api/ routes/services/"
},
"dependencies": {
"@atlaskit/badge": "^8.1.0",
"@atlaskit/breadcrumbs": "^6.0.5",
"@atlaskit/button": "^8.2.1",
"@atlaskit/checkbox": "^3.0.3",
"@atlaskit/dynamic-table": "^9.2.6",
"@atlaskit/field-base": "^10.2.0",
"@atlaskit/field-text": "^6.0.1",
"@atlaskit/field-text-area": "^3.2.1",
"@atlaskit/flag": "^8.1.1",
"@atlaskit/form": "^2.1.2",
"@atlaskit/icon": "^12.8.0",
"@atlaskit/inline-dialog": "^7.1.3",
"@atlaskit/inline-message": "^5.1.2",
"@atlaskit/lozenge": "^6.2.2",
"@atlaskit/modal-dialog": "^7.2.3",
"@atlaskit/page": "^7.2.0",
"@atlaskit/page-header": "^5.1.4",
"@atlaskit/quick-search": "^3.0.2",
"@atlaskit/section-message": "^1.0.7",
"@atlaskit/select": "^4.0.1",
"@atlaskit/spinner": "^7.1.1",
"@atlaskit/table-tree": "^3.1.3",
"@atlaskit/tag": "^6.0.3",
"@atlaskit/tag-group": "^6.0.6",
"@atlaskit/theme": "^4.0.4",
"@atlaskit/toggle": "^4.0.1",
"@atlaskit/tooltip": "^10.3.1",
"@sentry/node": "^4.4.1",
"async": "^2.6.1",
"atlassian-connect-express": "~3.3.0",
"atlassian-jwt": "^0.1.5",
"aws-sdk": "^2.429.0",
"axios": "^0.18.0",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"busboy": "^0.2.14",
"compression": "^1.7.1",
"cookie-parser": "^1.4.3",
"dateformat": "^3.0.3",
"errorhandler": "^1.5.0",
"express": "^4.16.2",
"express-hbs": "^1.0.4",
"express-state": "^1.4.0",
"feedme": "^1.1.1",
"form-data": "^2.3.2",
"ftp": "^0.3.10",
"glob": "^7.1.2",
"handlebars": "^4.0.11",
"i18n": "^0.8.3",
"is-base64": "^0.1.0",
"is-image": "^2.0.0",
"js-base64": "^2.5.1",
"lodash": "^4.17.5",
"mime": "^2.2.0",
"mkdirp": "^0.5.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"mongodb": "^3.0.1",
"mongoose": "^5.0.1",
"morgan": "^1.9.0",
"nodemailer": "^5.1.1",
"nodemailer-ses-transport": "^1.5.1",
"pretty-bytes": "^4.0.2",
"react": "^16.4.0",
"react-ckeditor-component": "^1.1.0",
"react-dom": "^16.4.0",
"react-dropzone": "^4.2.12",
"react-image-gallery": "^0.8.12",
"react-infinite-scroller": "^1.2.2",
"react-intl": "^2.4.0",
"react-throttle": "^0.3.0",
"request": "^2.83.0",
"request-promise": "^4.2.4",
"sanitize-filename": "^1.6.1",
"source-map-support": "^0.5.9",
"sqs-consumer": "^5.2.0",
"ssh2-sftp-client": "^2.0.1",
"static-expiry": "^0.0.11",
"styled-components": "^3.3.2",
"uglifyjs-webpack-plugin": "^2.1.1",
"uuid": "^3.2.1",
"winston": "^2.4.0",
"winston-aws-cloudwatch": "^2.0.0"
},
"devDependencies": {
"@sentry/webpack-plugin": "^1.6.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"debug": "^3.1.0",
"eslint": "^5.7.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-sonarjs": "^0.2.0",
"eslint-plugin-standard": "^4.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"husky": "^1.1.2",
"style-loader": "^0.21.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.2.1",
"webpack-merge": "^4.1.4",
"webpack-node-externals": "^1.7.2"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}
}
您的 .babelrc 以不匹配的方式从 official documentation 加载了 babel 预设。
应该是这样的：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-stage-2"
]
}
试一试，让我知道进展如何，因为没有太多信息，看来确实是失败点。
default 是 javascript 中的保留关键字，您不能将其用作导出命名空间或变量。
由于 .babelrc 文件中的预设结构，我假设您使用的是 babel 6。
我相信您正在寻找的插件是 babel-plugin-transform-export-extensions，它是 stage-1 预设的一部分，不包含在您的项目中。
如果你使用的是 babel 7，相应的插件应该是 @babel/plugin-proposal-export-default-from
已解决
我解决了这个问题。这是我设法做到的：
我注意到我已经在@atlaskit/flag 包中使用了这个语法并且一切正常。这个包虽然使用了不同的文件夹结构，但您可以在屏幕截图中看到：
之前的包在 esm 文件夹中有 index.js。我不知道 esm 的用途，所以我搜索了它并找到了这篇解释它的好文章。
解法（目前只有一个）：
npm install esm
node -r esm server.js
问题
1) Atlassian 不应该写他们的包来防止这种情况吗？
2) 是否有任何其他解决方案可以在 webpack 或 babel 文件中设置 esm 包？
我希望这对某人有所帮助。
干杯。