“Vous aurez besoin d'un chargeur approprié pour traiter ce type de fichier” avec Webpack et Babel

Je suis en train d'utiliser Webpack avec Babel pour compiler ES6 actifs, mais je reçois 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 ce que ma Webpack config ressemble:

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/
      }
    ]
  }
}

Ici est le middleware étape qui rend l'utilisation 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);
});

Tous mes index.js le fichier est en train de faire est de l'importation de réagir, mais il semble que le "babel-loader" n'est pas de travail.

Je suis en utilisant "babel-loader' 6.0.0.

Je vais avoir le même problème. babel-preset-es2015 est installé et pourtant, il a encore des problèmes avec l'utilisation de JSX dans un ReactDOM.render() appel :s
Qu'est-ce que les extensions de vos fichiers? Sont-ils js fichiers ou jsx fichiers? Votre chargeur considère uniquement les fichiers avec jsx extensions, qui pourrait être le problème

InformationsquelleAutor egidra | 2015-11-02

82

Vous devez installer le es2015 préréglage:
```
npm install babel-preset-es2015
```
et ensuite configurer babel-loader:
```
{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
```
- J'ai presets installé et babel-chargeur installé aussi. Il donne toujours la même erreur
- Vous aurez à poser une autre question. Nous aurions besoin de voir l'ensemble de votre config et le message d'erreur complet.
- avez-vous trouvé la solution?
InformationsquelleAutor loganfsmyth
31

Assurez-vous que vous avez la es2015 babel preset installé.

Un exemple paquet.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 configurer babel-chargeur dans votre webpack config:
```
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
```
ajouter un .babelrc fichier à la racine de votre projet où le nœud modules sont:
```
{
  "presets": ["es2015", "stage-0", "react"]
}
```
Plus d'infos:
- cela fonctionne parfaitement.
- . babelrc fichier est ce qui me manquait, merci! C'est le tutoriel complet, de la accepté de répondre ne mène pas loin.
- L'ajout d' .bablerc a fonctionné pour moi. Merci!
- Côté-info: Pas si sûr au sujet de "stade 0" dans les options (peut également être configuré dans .babelrc): Certaines fonctionnalités peuvent ne pas le faire dans officiel ES-Normes, donc j'ai l'habitude d'utiliser la plus sûre "stade 3".
InformationsquelleAutor svnm

Si vous utilisez Webpack > 3, alors vous avez seulement besoin d'installer babel-preset-env, depuis ce preset comptes 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',
            }
        }]
    }
};

Ce ramasse sa configuration de mon .babelrc fichier:

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

InformationsquelleAutor Mr. Doomsbuster

En raison de mises à jour et modifications des heures supplémentaires, la version de compatibilité commencer à causer des problèmes avec la configuration.

Votre webpack.config.js devrait être comme cela, vous pouvez également configurer la façon dont vous le dim fit.

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, c'est le changement de args, vous devriez lire babel documentation https://babeljs.io/docs/en/presets

.babelrc

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

NB: vous devez vous assurer que vous avez ci-dessus @babel/preset-env & @babel/preset-réagir installé dans votre forfait.json dépendances

L'ajout de @babel/preset-react fixe pour moi.

InformationsquelleAutor Delino

Lors de l'utilisation de la Machine:

Dans mon cas, j'ai utilisé la nouvelle syntaxe de webpack v3.11 à partir de leur page de documentation
Je viens de copier le css et le style des chargeurs de configuration du formulaire de leur site web.
Le commentaire sur le code (API plus récente) sont les causes de 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'
        //    ]
        //}]
    }

De la bonne façon est de mettre cette:

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

dans le tableau des chargeurs de propriété.

InformationsquelleAutor Legends

0

Ce un lancer de moi pour un tour.
Angulaire 7, Webpack
J'ai trouvé cet article je tiens donc à donner du crédit à l'Article
https://www.edc4it.com/blog/web/helloworld-angular2.html

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

pour le karma de l'interpréter
npm install ajouter du code html-chargeur --save-dev
{
test: /.html$/,
utilisation: "html-loader"
},

Espère que cela aide quelqu'un

InformationsquelleAutor Oliver Champet

Vous devez vous connecter pour publier un commentaire.