React 应用程序不支持导出 default

Posted 2023-02-22

【中文标题】React 应用程序不支持导出 default

【英文标题】：Export default not supported in React appReact 应用程序不支持导出 default

【发布时间】：2019-09-05 12:26:11

【问题描述】：

在将 @atalaskit/form 从版本 2.1.2 更新到最新版本 (5.2.7) 后，我遇到了问题。

这个新更新使用了我认为我的 babel 和/或 webpack 不支持的 export default from './File'。

到目前为止，我发现 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
        )
    ]
;

包.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"
    
  

【问题讨论】：

看起来你使用了 export 而不是 import default from './Form';

明明是SyntaxError: Unexpected token export为什么要修改babel？ exportfrom 是什么意思？

Atlassian 以这种方式定义了导出。我不确定，但我认为这是 ES6 的一个新功能，.babelrc 可以将该语法转换为常见的 JS。

我尝试使用 Create-react-app 2.1.8 运行同一个库，一切正常。所以我猜这不是@atlaskit/form/index.js 语法的问题。

babeljs.io/docs/en/v7-migration-api#export-changes。您是否尝试添加回 add-module-exports 插件以查看是否可以解决问题？

【参考方案1】：

您的.babelrc 以与official documentation 不匹配的方式加载了 babel 预设。

应该是这样的：

  "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-stage-2"
  ]

试一试，告诉我进展如何，因为没有太多信息可以参考，它看起来确实是失败点。

【讨论】：

我在这里使用的是 babel-core 6.26.3，所以我相信 .babelrc 在这种情况下是有效的。我已经通过 npx babel-upgrade --write 升级到 babel-core 7.0.0 并且 .babelrc 文件自动更新为该语法。错误与 babel-core 7.0.0 有关。

【参考方案2】：

default 是 javascript 中保留的关键字，您不能将其用作导出命名空间或变量。

【讨论】：

我相信是这样，但为什么它适用于 create-react-app 2.18 webpack 配置？它也适用于这个 webpack.config.js: module : rules: [ test: /\.js?$/, exclude : /node_modules/, loader: "babel-loader", query: presets:["@ babel/preset-env", "@babel/preset-react"] ]

【参考方案3】：

由于.babelrc 文件中的预设结构，我假设您使用的是 babel 6。

我相信您正在寻找的插件是 babel-plugin-transform-export-extensions，它是 stage-1 预设的一部分，不包含在您的项目中。

如果你使用的是 babel 7，对应的插件应该是@babel/plugin-proposal-export-default-from

【讨论】：

无论是使用 babel 6 还是 7，我都已经尝试过该插件。感谢 iMoses 的帮助。 P.S：我用 package.json 编辑了最初的帖子。

【参考方案4】：

已解决

我解决了这个问题。这是我如何做到的：

我注意到我已经在 @atlaskit/flag 包中使用了这种语法，并且一切正常。正如您在屏幕截图中看到的那样，这个包虽然使用了不同的文件夹结构：

之前的包在 esm 文件夹中有 index.js。我不知道 esm 的用途，所以我搜索了它，发现这篇很棒的文章解释了它。

https://dev.to/bennypowers/you-should-be-using-esm-kn3?fbclid=IwAR3iUen7KXISkgXi_GcfIhHHbmBWrDyD-LG3t7wh6RMbJ9BNjDEJK5zxbK8#esm-a-better-solution

解决方案（目前只有一个）：

npm install esm

node -r esm server.js

问题

1) Atlassian 不应该编写他们的包来防止这种情况吗？

2) 是否有其他解决方案可以在 webpack 或 babel 文件中设置 esm 包？

我希望这对某人有所帮助。

干杯。

【讨论】：

嗨路易斯，谢谢分享！我在 electron-webpack 和 @atlaskit 依赖项方面遇到了类似的问题。您能否详细说明您对 esm 所做的工作以使其正常工作？这如何集成到 webpack 构建中？有关我的设置的更多详细信息，请参阅***.com/questions/56858139/…。

这很棒。知道如何使用它进行编译以进行生产吗？