"Es posible que necesite un cargador adecuado para manejar este tipo de archivo" con Webpack y Babel

Estoy tratando de usar Webpack con Babel para compilar activos ES6, pero estoy recibiendo el siguiente mensaje de error:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

Así es como se ve mi configuración de Webpack: 

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

Aquí está el paso de middleware que hace uso de Webpack: 

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

Todo mi índice.el archivo js está importando react, pero parece que el 'babel-loader' no está funcionando.

Estoy usando 'babel-loader' 6.0.0.

Author: Damjan Pavlica, 2015-11-02
Source

4 answers

Necesitas instalar el preajuste es2015: 

npm install babel-preset-es2015

Y luego configurar babel-loader: 

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
 80
Author: loganfsmyth,
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-11-02 03:58:10

Asegúrese de tener instalado el es2015 babel preset.

Un ejemplo de paquete .json devDependencies es: 

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

Ahora configure babel-loader en su configuración de webpack: 

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

Añádase .babelrc archivo a la raíz de su proyecto donde están los módulos de nodo: 

{
  "presets": ["es2015", "stage-0", "react"]
}

Más información:

 30
Author: steven iseki,
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-24 11:36:07

Si está utilizando Webpack > 3, solo necesita instalar babel-preset-env, ya que este preset cuenta para es2015, es2016 y es2017.

var path = require('path');
let webpack = require("webpack");

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

Esto recoge su configuración de mi archivo .babelrc: 

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}
 5
Author: Mr. Doomsbuster,
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
2017-10-08 16:57:13

Cuando se usa Typescript:

En mi caso utilicé la sintaxis más reciente de webpack v3.11 desde su página de documentación Acabo de copiar la configuración de css y style loaders de su sitio web. El código comentado (API más reciente) causa este error, consulte a continuación.

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

La manera correcta es poner esto: 

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

En la matriz de la propiedad loaders.

 0
Author: Legends,
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
2018-02-14 22:42:06