"Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier" avec Webpack et Babel

106

J'essaie d'utiliser Webpack avec Babel pour compiler des actifs ES6, mais j'obtiens le message d'erreur suivant:

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

Voici à quoi ressemble ma configuration 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/
      }
    ]
  }
}

Voici l'étape middleware qui utilise 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);
});

Tout ce que fait mon fichier index.js est d'importer react, mais il semble que le 'babel-loader' ne fonctionne pas.

J'utilise 'babel-loader' 6.0.0.

Egidra
la source
1
J'ai le même problème. babel-preset-es2015 est installé et pourtant il a toujours des problèmes avec l'utilisation de JSX dans un appel ReactDOM.render (): s
SomethingOn
Quelles sont les extensions de votre fichier? S'agit-il de fichiers js ou jsx? Votre chargeur ne considère que les fichiers avec des extensions jsx, cela pourrait être le problème
cubbuk
À ce lien, votre problème sera résolu à 100% [ stackoverflow.com/questions/50149729/…
Mehrdad Masoumi
À ce lien, votre problème sera résolu à 100% importation css vers next.js
Mehrdad Masoumi

Réponses:

86

Vous devez installer le es2015préréglage:

npm install babel-preset-es2015

puis configurez babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
loganfsmyth
la source
37
J'ai des préréglages installés et babel-loader installé aussi. Il donne toujours la même erreur
Umang Gupta
@UG_ Vous devrez poser une question distincte. Nous aurions besoin de voir votre configuration entière et le message d'erreur complet.
loganfsmyth
1
@UG_ avez-vous trouvé la solution?
Sarasranglt
34

Assurez-vous que le préréglage babel es2015 est installé.

Un exemple de package.json devDependencies est:

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

Maintenant, configurez babel-loader dans votre configuration webpack:

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

ajoutez un fichier .babelrc à la racine de votre projet où se trouvent les modules de nœuds:

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

Plus d'informations:

svnm
la source
1
. Le fichier babelrc est ce qu'il me manquait, merci! Ceci est le tutoriel complet, la réponse acceptée ne vous amène que jusqu'à présent.
Mike
Side-info: Pas si sûr de "stage-0" dans les options (peut également être configuré dans .babelrc): Certaines fonctionnalités peuvent ne pas figurer dans les normes ES officielles, donc j'utilise généralement le "stage-3" plus sûr.
Christof Kälin
11

Si vous utilisez Webpack> 3, il vous suffit d'installer babel-preset-env, car ce préréglage compte pour es2015, es2016 et 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',
            }
        }]
    }
};

Cela récupère sa configuration de mon .babelrcfichier:

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}
M. Doomsbuster
la source
1

En raison des mises à jour et des modifications supplémentaires, la compatibilité des versions commence à causer des problèmes de configuration.

Votre webpack.config.js devrait être comme ça, vous pouvez également configurer la façon dont vous l'avez dim.

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

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

Une autre chose à noter que c'est le changement d'arguments, vous devriez lire la documentation babel https://babeljs.io/docs/en/presets

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

NB: vous devez vous assurer que vous avez installé le @ babel / preset-env & @ babel / preset-react ci-dessus dans vos dépendances package.json

Delino
la source
1
L'ajout l'a @babel/preset-reactcorrigé pour moi.
kyw
1

MISE À JOUR DE L'ÉQUIPE BABEL:

Nous sommes ravis que vous essayiez d'utiliser la syntaxe ES2015, mais au lieu de continuer les préréglages annuels, l'équipe recommande d'utiliser babel-preset-env. Par défaut, il a le même comportement que les préréglages précédents pour compiler ES2015 + vers ES5

Si vous utilisez Babel version 7, vous devrez lancer npm install @ babel / preset-env et avoir des "presets": ["@ babel / preset-env"] dans votre .babelrcconfiguration.

Cela compilera toutes les dernières fonctionnalités en code transpilé es5 :

Prérequis :

  1. Webpack 4+
  2. Babel 7+

Étape 1:: npm install --save-dev @ babel / preset-env

Étape 2: Afin de compiler le JSXcode en es5, babel fournit un @babel/preset-reactpackage pour convertir le jsxfichier d'extension de réaction en code compréhensible par le navigateur natif.

Étape 3: installation de npm --save-dev @ babel / preset-react

Étape 4: créez un .babelrcfichier à l'intérieur du chemin d'accès racine de votre projet, là où il webpack.config.jsexiste.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Étape 5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}
Khizer
la source
0

Lors de l'utilisation de Typescript:

Dans mon cas, j'ai utilisé la nouvelle syntaxe de webpack v3.11 à partir de leur page de documentation, je viens de copier la configuration des chargeurs css et de style de leur site Web. Le code commenté (API plus récente) provoque cette erreur, voir ci-dessous.

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

La bonne façon est de dire ceci:

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

dans le tableau de la propriété loaders.

Légendes
la source
0

Celui-ci me jette pour un tour. Angular 7, Webpack J'ai trouvé cet article donc je veux donner crédit à l'article https://www.edc4it.com/blog/web/helloworld-angular2.html

Quelle est la solution: // sur votre fichier composant. utiliser un modèle comme webpack le traitera comme un modèle de texte: require ('./ process.component.html')

pour que karma l'interprète npm install ajoutez html-loader --save-dev {test: /.html$/, utilisez: "html-loader"},

J'espère que cela aide quelqu'un

Oliver Champet
la source