web-dev-qa-db-fra.com

Erreur: transformation de propriétés de classe manquantes

Error: Missing class properties transform

Test.js:

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json:

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

J'ai parcouru le Web et tous les correctifs concernent: Mise à niveau vers babel6, modification de l'ordre de "stage-0" pour suivre "es2015". Tout ce que j'ai fait.

javascriptwebpackbabeljsecmascript-next
52
speak

OK, finalement compris cela, dans mon webpack.config.js J'avais:

module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: [
          'react-hot',
          'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      }
    ]
  }

'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'

Doit être traité de la même manière que .babelrc, est passé de l'étape 0 à la fin de es2015 et sa compilation est parfaite.

57
speak

Vous devez installer babel-plugin-transform-class-properties, C'est

npm install babel-plugin-transform-class-properties --save-dev

et ajoutez ce qui suit à votre .babelrc fichier

"plugins": ["transform-class-properties"]
25
user2849063

J'ai eu cette erreur parce que j'utilisais stage-3 au lieu de stage-0.

3
Ben

J'ai eu cette même erreur et j'ai commandé mes plugins correctement dans mon fichier .babelrc mais cela persistait toujours. La suppression des paramètres prédéfinis que j'ai définis dans mon chargeur de packs Web l'a corrigé.

Ancienne config de webpack:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

Webpack de travail config:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/
    }
  ]
}
2
Vanessa Ejikeme

Je rencontre aussi cette erreur à cause de l'utilisation des préréglages env: "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], et après avoir supprimé les préréglages env, cela fonctionne bien

1
Creem

@speak a raison, mais vous devez modifier l'ordre.

loaders: [
  'react-hot',
  'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]
0
Montage

Enfin découvert, Pour supprimer cette erreur dans le projet Laravel-Mix, ajoutez le code ci-dessous dans webpack.mix.js

mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules|bower_components)/,
                    loaders: [
                        'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
                    ]
                }
            ],
        }
});
0
Muhammad Sulman

Le correctif dans mon cas définissait 'transform-class-properties' plugin dans l'attribut options de my webpack.config.js, j'utilise babel V6

 rules:[
    .....,
    {
       test: /\.(js|jsx)$/,
       exclude: /(node_modules|bower_components)/,
       loader: 'babel-loader',
       options: { plugins: ['transform-class-properties']}
    }
 ]
0
JimmyFlash

J'ai rencontré le même problème en utilisant koa-react-view . Inspirez-vous de ces réponses et corrigez-le finalement avec le code suivant dans le koa server.js:

const register = require('babel-register');

register({
    presets: ['es2015', 'react', 'stage-0'],
    extensions: ['.jsx']
});
0
Jeff Tian