问题
I have a problem with decorators in React with mobX app. And it works ok with .babelrc, but I also have babel-loader with webpack. I copy babel config to webpack config, but it doesn't work. I checked all solutions that I can found in google, but they all refers to bebelrc, not webpack config. My webpack config:
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
path.join(__dirname, '../../src/web/index')
],
output: {
path: path.join(__dirname, '../public'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react",
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
["@babel/plugin-transform-runtime", {
"helpers": true,
"regenerator": false
}],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"react-hot-loader/babel"
]
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
PLATFORM_ENV: JSON.stringify('web')
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
Error:
ERROR in ./src/web/stores/UIStore.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/alder/Projects/_apps/service_exchange/service-exchange-app/src/web/stores/UIStore.js: Decorators transform is necessary.
Seems babel-loader doesn't work with plugin-proposal-decorators
Any solution?
package.json:
"scripts": {
"web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3002 --inline --hot --colors --mode development"
},
"dependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/plugin-proposal-class-properties": "7.0.0-rc.1",
"@babel/plugin-proposal-decorators": "7.0.0-rc.1",
"@babel/plugin-proposal-export-namespace-from": "7.0.0-rc.1",
"@babel/plugin-proposal-function-sent": "7.0.0-rc.1",
"@babel/plugin-proposal-json-strings": "7.0.0-rc.1",
"@babel/plugin-proposal-numeric-separator": "7.0.0-rc.1",
"@babel/plugin-proposal-optional-chaining": "^7.0.0-rc.1",
"@babel/plugin-proposal-throw-expressions": "7.0.0-rc.1",
"@babel/plugin-syntax-dynamic-import": "7.0.0-rc.1",
"@babel/plugin-syntax-import-meta": "7.0.0-rc.1",
"@babel/plugin-transform-runtime": "^7.0.0-rc.1",
"@babel/polyfill": "7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"@babel/preset-react": "^7.0.0-rc.1",
"@babel/register": "7.0.0-rc.1",
"@babel/runtime": "^7.0.0-rc.1",
"@material-ui/core": "^1.5.0",
"@material-ui/icons": "^2.0.2",
"axios": "^0.18.0",
"babel-loader": "^8.0.0-beta.0",
"final-form": "^4.9.1",
"history": "^4.7.2",
"material-ui-chip-input": "^1.0.0-beta.5",
"material-ui-superselectfield": "^1.9.8",
"material-ui-time-picker": "^1.0.0",
"mobx": "^5.0.3",
"mobx-react": "^5.2.5",
"mobx-state-router": "^3.1.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-event-listener": "^0.5.10",
"react-final-form": "^3.6.5",
"react-hot-loader": "4.3.4",
"react-native": "0.56.0",
"react-router-dom": "^4.3.1",
"react-select": "^2.0.0",
"styled-components": "^3.4.2"
},
"devDependencies": {
"@babel/cli": "7.0.0-rc.1",
"babel-eslint": "^8.2.6",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.11.1",
"jest": "23.5.0",
"json-loader": "^0.5.7",
"mobx-logger": "^0.7.1",
"mobx-react-devtools": "^6.0.2",
"react-native-cli": "^2.0.1",
"react-native-scripts": "^1.14.0",
"react-test-renderer": "16.4.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.6.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5",
"webpack-hot-middleware": "^2.22.3"
}
It stopped working after I have to remove stage-2 from version beta 54
Update:
I found that I can use babel config in webpack like:
loader: 'babel-loader',
options: {
babelrc: true,
cacheDirectory: true
}
But it didn't help, I have the same error.
Updated 2:
Found similar issue in babel-loader repository, but it didn't help too.
回答1:
I moved decorators plugin at the start of a block and it works!
{
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
],
"env": {
"development": {
"plugins": ["react-hot-loader/babel"]
}
}
}
来源：https://stackoverflow.com/questions/51857423/babel-7-decorators-transform-doesnt-work-with-babel-loader