Babel 7 - Decorators transform doesn't work with babel-loader

Question

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.

Answer 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"]
    }
  }
}