"Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten" mit Webpack und Babel

106

Ich versuche, Webpack mit Babel zum Kompilieren von ES6-Assets zu verwenden, erhalte jedoch die folgende Fehlermeldung:

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

So sieht meine Webpack-Konfiguration aus:

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

Hier ist der Middleware-Schritt, der Webpack verwendet:

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);
});

Alles, was meine index.js-Datei tut, ist das Importieren von React, aber es scheint, dass der 'Babel-Loader' nicht funktioniert.

Ich benutze 'Babel-Loader' 6.0.0.

egidra
quelle
1
Ich habe das gleiche Problem. babel-preset-es2015 ist installiert und hat dennoch Probleme mit der Verwendung von JSX in einem ReactDOM.render () -Aufruf: s
SomethingOn
Was sind die Erweiterungen Ihrer Datei? Sind es JS-Dateien oder JSX-Dateien? Ihr Loader berücksichtigt nur Dateien mit jsx-Erweiterungen, das könnte das Problem sein
cubbuk
Unter diesem Link wird Ihr Problem zu 100% gelöst [ stackoverflow.com/questions/50149729/…
Mehrdad Masoumi
Unter diesem Link wird Ihr Problem zu 100% gelöst. CSS-Import nach next.js
Mehrdad Masoumi

Antworten:

86

Sie müssen die es2015Voreinstellung installieren :

npm install babel-preset-es2015

und dann konfigurieren babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
loganfsmyth
quelle
37
Ich habe Presets installiert und Babel-Loader auch installiert. Es gibt immer noch den gleichen Fehler
Umang Gupta
@UG_ Du musst eine separate Frage stellen. Wir müssten Ihre gesamte Konfiguration und die vollständige Fehlermeldung sehen.
Loganfsmyth
1
@UG_ hast du die Lösung gefunden?
Sarasranglt
34

Stellen Sie sicher, dass Sie die Babel-Voreinstellung es2015 installiert haben.

Ein Beispiel für package.json devDependencies ist:

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

Konfigurieren Sie nun den Babel-Loader in Ihrer Webpack-Konfiguration:

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

Fügen Sie eine .babelrc- Datei zum Stammverzeichnis Ihres Projekts hinzu, in der sich die Knotenmodule befinden:

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

Mehr Info:

svnm
quelle
1
. babelrc Datei ist was ich vermisst habe, danke! Dies ist das komplette Tutorial, die akzeptierte Antwort bringt Sie nur so weit.
Mike
Nebeninfo: Nicht so sicher über "Stufe 0" in Optionen (kann auch in .babelrc konfiguriert werden): Einige Funktionen schaffen es möglicherweise nicht in die offiziellen ES-Standards, daher verwende ich normalerweise die sicherere "Stufe 3".
Christof Kälin
11

Wenn Sie Webpack> 3 verwenden, müssen Sie nur installieren babel-preset-env, da diese Voreinstellung es2015, es2016 und es2017 berücksichtigt.

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',
            }
        }]
    }
};

Dies übernimmt seine Konfiguration aus meiner .babelrcDatei:

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

Aufgrund von Aktualisierungen und Änderungen im Laufe der Zeit führt die Versionskompatibilität zu Problemen bei der Konfiguration.

Ihre webpack.config.js sollte so sein, dass Sie auch konfigurieren können, wie immer Sie die Passform verringern.

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'
  }
};

Eine weitere Sache, die Sie bemerken sollten, ist die Änderung der Argumente. Lesen Sie die Babel-Dokumentation https://babeljs.io/docs/en/presets

.babelrc

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

NB: Sie müssen sicherstellen, dass die oben genannten @ babel / preset-env & @ babel / preset-react in Ihren package.json-Abhängigkeiten installiert sind

Delino
quelle
1
Das Hinzufügen hat @babel/preset-reactes für mich behoben.
Kyw
1

BABEL TEAM UPDATE:

Wir freuen uns sehr, dass Sie versuchen, die ES2015-Syntax zu verwenden, aber anstatt die jährlichen Voreinstellungen fortzusetzen, empfiehlt das Team die Verwendung von babel-preset-env. Standardmäßig hat es das gleiche Verhalten wie die vorherigen Voreinstellungen zum Kompilieren von ES2015 + auf ES5

Wenn Sie Babel Version 7 verwenden, müssen Sie npm install @ babel / preset-env ausführen und "presets": ["@ babel / preset-env"] in Ihrer .babelrcKonfiguration haben.

Dadurch werden alle neuesten Funktionen zu es5-transpiliertem Code kompiliert:

Voraussetzungen :

  1. Webpack 4+
  2. Babel 7+

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

Schritt 2: Um JSXCode in es5 zu kompilieren , bietet babel ein @babel/preset-reactPaket zum Konvertieren von Reactjsx Erweiterungsdatei in verständlichen Code des nativen Browsers.

Schritt 3: npm install --save-dev @ babel / preset-react

Schritt 4: Erstellen Sie eine .babelrcDatei im Stammpfad Ihres Projekts, sofern webpack.config.jsvorhanden.

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

Schritt 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
quelle
0

Bei Verwendung von Typescript:

In meinem Fall habe ich die neuere Syntax von Webpack v3.11 von der Dokumentationsseite verwendet. Ich habe gerade die CSS- und Style Loader-Konfiguration von ihrer Website kopiert. Der auskommentierte Code (neuere API) verursacht diesen Fehler, siehe unten.

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

Der richtige Weg ist, dies auszudrücken:

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

im Array der Loader-Eigenschaft.

Legenden
quelle
0

Dieser wirft mich für eine Spritztour. Angular 7, Webpack Ich habe diesen Artikel gefunden, daher möchte ich den Artikel https://www.edc4it.com/blog/web/helloworld-angular2.html gutschreiben

Was ist die Lösung: // auf Ihrer Komponentendatei. Vorlage als Webpack verwenden behandelt sie als Textvorlage: require ('./ process.component.html')

damit das Karma es interpretiert, npm install add html-loader --save-dev {test: /.html$/, benutze: "html-loader"},

Hoffe das hilft jemandem

Oliver Champet
quelle