Webpack con babel-loader no reconoce la palabra clave de importación

Tengo esto webpack.config.js: {[15]]} 

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        optional: ['runtime']
      }
    }
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

...sin embargo, todavía recibo este error:

$ webpack -v
Hash: 2a9a40224beb025cb433
Version: webpack 1.10.5
Time: 44ms
   [0] ./src/admin/client/index.jsx 0 bytes [built] [failed]

ERROR in ./src/admin/client/index.jsx
Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import AdminInterface from './components/AdminInterface';

Tengo:

  • Instalado webpack global y localmente
  • Instalado babel-loader, babel-core, y babel-runtime
  • Instalado babel-loader globalmente, por si acaso

¿Por qué diablos webpack aparentemente ignora babel-loader? ¿O babel-loader no funciona con módulos?

Actualización :

Parece que babel maneja el archivo de entrada muy bien. Cuando yo ejecutar:

./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx

Outputs produce ES5 como se esperaba. Por lo tanto, me parece que de alguna manera webpack no está cargando correctamente babel-loader.

Author: Evan Carslake, 2015-08-04
Source

3 answers

Esto parece un caso de error de operador. Mi webpack.config.js estructura no era correcta. Específicamente, necesitaba poner los detalles del cargador dentro de una sección module: 

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          optional: ['runtime']
        }
      }
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};
 33
Author: Jacob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-04 02:52:26

Solucioné el mismo problema al incluir el es2015 y react presets y luego añadirlos al webpack.config.archivo js.

npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react

Como se explica en este post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Mi webpack completo.config.archivo js: 

module.exports = {
  context: __dirname + "/src",
  entry: './main',
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};
 14
Author: Adam Bertrand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-31 14:20:12

¿Cuál es la versión de tu babel?Si la versión de babel es de hasta 6+.Necesitas identificar el preset 'es2015' y 'react' así

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

No olvide instalar estos módulos: 

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
 9
Author: modao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-22 08:41:56