web-dev-qa-db-fra.com

Babel 7 - La transformation des décorateurs ne fonctionne pas avec le chargeur de babel

J'ai un problème avec les décorateurs dans l'application React avec mobX. Et cela fonctionne bien avec .babelrc, mais j'ai aussi babel-loader avec webpack. Je copie la configuration de babel dans webpack config, mais cela ne fonctionne pas. J'ai vérifié toutes les solutions que je peux trouver dans google, mais elles font toutes référence à bebelrc, pas à webpack config. Ma 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()
  ]
};

Erreur:

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.

Semble babel-loader ne fonctionne pas avec plugin-proposal-decorators

Toute 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"
}

Il a cessé de fonctionner après avoir supprimé stage-2 à partir de la version bêta 54

Mise à jour:

J'ai trouvé que je peux utiliser babel config dans webpack comme:

    loader: 'babel-loader',
    options: {
      babelrc: true,
      cacheDirectory: true
    }

Mais cela n'a pas aidé, j'ai la même erreur.

Mise à jour 2:

Trouvé problème similaire dans le dépôt babel-loader , mais cela n'a pas aidé non plus.

webpackbabelbabel-loader
9
zishe

J'ai déplacé le plugin des décorateurs au début d'un bloc et ça marche!

{
  "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"]
    }
  }
}
10
zishe