“Você pode precisar de um carregador apropriado para lidar com este tipo de arquivo” com Webpack e Babel

Eu estou tentando usar o Webpack com Babel para compilar ativos do ES6, mas estou recebendo a seguinte mensagem de erro:

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

Aqui está a aparência da minha configuração do 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/ } ] } } 

Aqui está o passo do middleware que faz uso do 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 o meu arquivo index.js está fazendo está importando reagir, mas parece que o ‘babel-loader’ não está funcionando.

Estou usando o ‘babel-loader’ 6.0.0.

Você precisa instalar o preset es2015 :

 npm install babel-preset-es2015 

e então configure o babel-loader :

 { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } } 

Certifique-se de ter a predefinição es2015 babel instalada.

Um exemplo de package.json devDependencies é:

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

Agora configure o babel-loader na configuração do seu webpack:

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

adicione um arquivo .babelrc à raiz do seu projeto onde os módulos do nó são:

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

Mais informações:

  • babeljs.io – usando babel com webpack

  • babeljs.io – docs em .babelrc

  • react-webpack-cookbook – configure reage com o webpack

  • um repository react-webpack-example

Se você estiver usando o Webpack> 3, só precisará instalar o babel-preset-env , já que essa predefinição é responsável pelo es2015, es2016 e 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', } }] } }; 

Isso pega sua configuração do meu arquivo .babelrc :

 { "presets": [ [ "env", { "targets": { "browsers":["last 2 versions"], "node":"current" } } ],["react"] ] } 

Ao usar o Typescript:

No meu caso, usei a syntax mais nova do webpack v3.11 da página de documentação. Acabei de copiar a configuração do CSS e do carregador de estilo do website. O código comentado (API mais recente) causa esse erro, veja abaixo.

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

O caminho certo é colocar isso:

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

na matriz da propriedade loaders.