Webpack编译时使用mobx抛出错误

70gysomp  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(175)

我正在使用webpack作为模块捆绑器和babel来传输。我目前的npm版本是3.10.9,节点版本是v6.9.2。
Package.json

"devDependencies": {
    "axios": "^0.17.0",
    "babel-eslint": "^8.0.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-mobx": "^1.0.2",
    "babel-preset-react": "^6.11.1",
    "babel-register": "^6.26.0",
    "babel-core": "^6.9.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-1": "^6.5.0",
    "clean-webpack-plugin": "^0.1.17",
    "compression": "^1.6.1",
    "cors": "^2.8.4",
    "cross-env": "^5.0.5",
    "css-loader": "^0.23.1",
    "csslint": "^1.0.5",
    "csslint-loader": "^1.0.0",
    "eslint": "^4.10.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.4.0",
    "express": "^4.9.8",
    "express-https-redirect": "^1.0.0",
    "express-manifest": "^0.1.1",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.30.1",
    "http2": "^3.3.7",
    "https": "^1.0.0",
    "image-webpack-loader": "^3.4.2",
    "jasmine-core": "^2.8.0",
    "json-loader": "^0.5.4",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.1",
    "karma-webpack": "^2.0.9",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "moment": "^2.19.2",
    "node-sass": "^4.5.3",
    "postcss": "^6.0.13",
    "postcss-css-variables": "^0.8.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-mixins": "^6.1.1",
    "postcss-nested": "^2.1.2",
    "postcss-start-to-end": "^1.0.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-doc-generator": "^1.2.5",
    "react-docgen-plugin": "^0.1.1",
    "react-dom": "^16.2.0",
    "react-lazy-load": "^3.0.13",
    "react-redux": "^5.0.6",
    "react-responsive-carousel": "^3.1.28",
    "redux": "^3.7.2",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-commonjs": "^9.0.0",
    "rollup-plugin-node-resolve": "^3.0.3",
    "rollup-plugin-postcss": "^1.3.3",
    "rollup-plugin-replace": "^2.0.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.19.0",
    "stylelint": "^8.2.0",
    "sw-precache-webpack-plugin": "^0.11.4",
    "url-loader": "^0.6.2",
    "webfonts-loader": "^4.0.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.1",
    "webpack-node-externals": "^1.6.0",
    "workbox-webpack-plugin": "^2.1.2",
    "wrapper-webpack-plugin": "^1.0.0"
  },
  "dependencies": {
    "expres": "0.0.5",
    "express": "^4.14.0",
    "express-minify-html": "^0.11.5",
    "html-minifier": "^3.5.6",
    "jade": "^1.11.0",
    "mobx": "^3.0.0",
    "mobx-react": "^4.1.0",
    "pa11y-ci": "^1.3.1",
    "redux-promise": "^0.5.3",
    "stylelint-webpack-plugin": "^0.10.2"
  },
  "babel": {
    "plugins": [
      "transform-es2015-modules-commonjs"
    ]
  },

当我编译时,我得到了下面问题。

Using default export (`import mobx from 'mobx'`) is deprecated and wont work in mobx@4.0.0
Use `import * as mobx from 'mobx'` instead
D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41
    throw new Constructor(this._buildMessage(msg));
    ^

ReferenceError: [BABEL] D:\mgm\dmp\fe-react\webpack.config.babel.js: Unknown option: base.Reaction. Check out http://babeljs.io/docs/usage/options/ for more information about options.

此错误的常见原因是存在没有相应预设名称的配置选项对象。例如:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
    at Logger.error (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
    at OptionManager.init (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at Object.transformFileSync (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\api\node.js:152:10)
    at compile (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:118:20)
    at loader (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:154:7)

请帮帮忙。

k5ifujac

k5ifujac1#

首先,从您的.babelrc中删除mobx预设。

{
  "presets": ["mobx"]
}

然后是npm i --save-dev babel-plugin-transform-decorators-legacy,并添加到.babelrc配置下面。

{
  "presets": ["react", "env", "stage-2"],
  "plugins": [
    "transform-decorators-legacy", // must on the top of plugins array.
    ... ...
  ]
}

最后,您必须删除GitHub上0开头的babel-preset-mobx,我认为它不稳定。

相关问题