javascript - Error: Transformación de propiedades de clase faltantes

javascript parent class

Question

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",

He explorado la web y todas las soluciones giran en torno a: Actualizar a babel6, cambiar el orden de "etapa-0" a "es2015". Todo lo que he hecho.

Answer 1

@speak tiene razón, pero debes cambiar el orden

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

Answer 2

Encontré el mismo problema usando koa-react-view . koa server.js con estas respuestas y finalmente koa server.js con el siguiente código en koa server.js :

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

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

Answer 3

Finalmente descubierto, para eliminar este error en el proyecto Laravel-Mix, agregue el siguiente código en webpack.mix.js

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

Answer 4

La solución en mi caso fue definir el complemento ''transform-class-properties'' en el atributo de opciones de mi webpack.config.js , estoy usando babel V6

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

Answer 5

Necesita instalar babel-plugin-transform-class-properties , es decir

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

y agregue lo siguiente a su archivo .babelrc

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

Answer 6

OK, finalmente descubrí esto, en mi webpack.config.js tuve:

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''

Tiene que tratarse de la misma manera que .babelrc , cambió stage-0 para que sea posterior a es2015 y se compila perfectamente.

Answer 7

También encuentro este error debido al uso de presets env: "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], y después de que yo eliminar los presets de env, funciona bien

Answer 8

Tuve el mismo error y pedí mis complementos correctamente en mi .babelrc pero aún persiste. La eliminación de los parámetros preestablecidos que definí en mi cargador de paquetes web lo reparó.

Configuración anterior del paquete web:

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

Webpack config de trabajo:

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

Answer 9

Tuve este error porque estaba usando la stage-3 lugar de la stage-0 .