"Möglicherweise müssen Sie einen entsprechenden loader zum verarbeiten dieser Datei-Typ" mit Webpack und Babel

Ich versuche, mit Webpack mit Babel zu kompilieren ES6 Vermögen, aber ich bin immer folgende Fehlermeldung:

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

Hier ist, was mein Webpack config sieht wie folgt 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 die middleware Schritt, der 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);
});

Alle meine index.js die Datei macht, ist das importieren reagieren, aber wie es scheint, die "babel-loader' nicht funktioniert.

Ich bin mit 'babel-loader' 6.0.0.

Ich bin mit dem gleichen problem. babel-preset-es2015 installiert ist und hat doch immer noch Probleme bei der Verwendung von JSX in einem ReactDOM.render () - Aufruf :s
Was ist die Erweiterungen der Datei? Sind Sie js Dateien oder jsx-Dateien? Ihre loader berücksichtigt nur Dateien mit jsx-Erweiterungen, das könnte das problem sein

InformationsquelleAutor egidra | 2015-11-02

82

Zu installieren, müssen Sie die es2015 Vorgabe:
```
npm install babel-preset-es2015
```
und konfigurieren Sie dann babel-loader:
```
{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
```
Ich habe die presets installiert und babel-loader installiert zu werden. Es ist immer noch die gleichen Fehler
Sie haben Fragen, eine separate Frage. Wir würden sehen müssen, Ihre ganze config und die vollständige Fehlermeldung.
hast du die Lösung finden?

InformationsquelleAutor loganfsmyth
31

Stellen Sie sicher, dass die es2015 babel preset installiert.

Beispiel Paket.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"
},
```
Nun konfigurieren babel-loader in Ihrem webpack config:
```
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
```
hinzufügen .babelrc - Datei in das Stammverzeichnis von Ihrem Projekt, wo der-Knoten-Module sind:
```
{
  "presets": ["es2015", "stage-0", "react"]
}
```
Mehr info:
das klappt perfekt.
. babelrc-Datei ist das, was mir fehlte, vielen Dank! Dies ist die komplette tutorial, die akzeptierten Antworten bekommt man nur so weit.
Hinzufügen .bablerc für mich gearbeitet. Danke!
Side-info: Nicht so sicher "Stufe-0" in den Optionen (kann auch konfiguriert werden .babelrc): Einige Funktionen sind möglicherweise nicht in den offiziellen ES-Normen, so dass ich in der Regel verwenden die mehr sicher "stage-3".

InformationsquelleAutor svnm

Wenn Sie mit Webpack > 3 dann brauchen Sie nur zu installieren babel-preset-env, da diese voreingestellten Konten für es2015, es2016 und 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',
            }
        }]
    }
};

Dieser nimmt seine Konfiguration aus meiner .babelrc Datei:

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

InformationsquelleAutor Mr. Doomsbuster

Bei der Verwendung Typoskript:

In meinem Fall habe ich die neuere syntax von webpack v3.11 aus Ihrer Dokumentation Seite
Ich habe gerade kopiert den css-und style-loader-Konfiguration Ihrer website.
Der auskommentierte code (neuere API) diesen Fehler verursacht, siehe unten.

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

Dem richtigen Weg ist dieses:

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

in der Reihe der Lader Eigenschaft.

InformationsquelleAutor Legends

0

Diese eine werfen, mich für einen spin.
Winkel 7, Webpack
Ich fand diesen Artikel so will ich Kredit zu geben, der Artikel
https://www.edc4it.com/blog/web/helloworld-angular2.html

Was die Lösung ist:
//auf die Komponente Datei. verwenden Sie als Vorlage webpack zu behandeln, wird es als text
Vorlage: require('./process.component.html')

karma zu interpretieren
npm install fügen Sie den html-loader --save-dev
{
test: /.html$/,
Verwendung: "html-loader"
},

Hoffe, das hilft jemandem

InformationsquelleAutor Oliver Champet

Aufgrund von änderungen und Aktualisierungen an den überstunden, version Kompatibilität starten verursacht Probleme mit der Konfiguration.

Ihre webpack.config.js sollte das so sein, können Sie auch konfigurieren, wie immer Sie 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'
  }
};

Andere Sache zu bemerken, ist der Wandel von args, Lesen sollte babel-Dokumentation https://babeljs.io/docs/en/presets

.babelrc

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

NB: Sie haben zu stellen Sie sicher, dass Sie die oben genannten @babel/preset-env & @babel/preset-reagieren, installiert in Ihrem Paket.json Abhängigkeiten

Hinzufügen @babel/preset-react es fest für mich.

InformationsquelleAutor Delino

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.