Das Webpack kann das Modul nicht finden, wenn die Datei jsx heißt

107

Während ich webpack.config.js so schreibe

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

Und in index.jsximportiere ich ein reactModulApp

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

Ich finde, wenn ich die Modul-App in benannt habe App.jsx, dann sagt Webpack in index.jsxkann das Modul nicht finden App, aber wenn ich die benannte Modul-App in benannt habe App.js, findet es dieses Modul und funktioniert gut.

Also bin ich verwirrt. In meinem habe webpack.config.jsich geschrieben test: /\.jsx?$/, um die Datei zu überprüfen, aber warum *.jsxkann der Name nicht gefunden werden?

Geben Sie hier die Bildbeschreibung ein

Qiuyuntao
quelle

Antworten:

213

Webpack kann .jsxDateien nicht implizit auflösen . Sie können eine Dateierweiterung in Ihrer App angeben ( import App from './containers/App.jsx';). Ihr aktueller Loader-Test besagt, dass Sie den Babel Loader verwenden sollen, wenn Sie eine Datei mit der Erweiterung jsx explizit importieren.

oder Sie können .jsxin die Erweiterungen aufnehmen, die das Webpack ohne explizite Deklaration auflösen soll:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

Lassen Sie für Webpack 2 die leere Erweiterung weg.

resolve: {
  extensions: ['.js', '.jsx']
}
max
quelle
63
Für Webpack 4 fand ich, dass ich dies in eines der rules setzen musste, die unter module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
mr rogers
1
@ Mrrogers Ich habe überall danach gesucht! Ich tippe meinen Hut auf Sie, Sir!
Frederik Petersen
1
Vielen Dank! Ich habe stundenlang danach gesucht!
KevinH
1
@ Mrrogers Erwägen Sie, Ihren Kommentar zu einer Antwort zu fördern :)
Alexander Varwijk
Danke @AlexanderVarwijk. Gute Idee. Ich selbst bin zu diesen Kommentaren zurückgekehrt, um mich daran zu erinnern, was ich tun musste :)
Herr Rogers
24

Hinzufügen zu der obigen Antwort,

Die Entschlossenheit Eigenschaft ist , wo Sie alle Dateitypen hinzufügen müssen Sie in Ihrer Anwendung verwenden.

Angenommen, Sie möchten .jsx- oder .es6- Dateien verwenden. Sie können sie gerne hier einfügen und das Webpack wird sie lösen:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

Wenn Sie die Erweiterungen in der Auflösungseigenschaft hinzufügen , können Sie sie aus der Importanweisung entfernen:

import Hello from './hello'; // Extensions removed
import World from './world';

In anderen Szenarien, z. B. wenn Sie möchten, dass ein Kaffeeskript erkannt wird, sollten Sie Ihre Testeigenschaft wie folgt konfigurieren :

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};
Ignatius Andrew
quelle
7
In WebPack 3.4 können Sie auflösen.extension nicht mit leerem Wert verwenden. Dies führt zu einer Ausnahme bei der Kompilierung: "Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt. - configuration.resolve.extensions [0] sollte nicht leer sein."
Julio Spader
19

Im Interesse der Lesbarkeit und Copy-Paste-Codierung. Hier ist die Webpack 4 Antwort von Herrn Rogers Kommentar in diesem Thread.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}
Richard Vanbergen
quelle
Ab 4.36.1 um genau zu sein. Hier ist das Dokument webpack.js.org/configuration/module/#ruleresolve
Alexey Berezkin
10

Wie in den Kommentaren zur Antwort von @max für Webpack 4 erwähnt, stellte ich fest, dass ich dies in eine der Regeln einfügen musste, die unter Modul aufgeführt sind, wie folgt:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}
Herr Rogers
quelle
1

Ich hatte ein ähnliches Problem und konnte es mithilfe der Auflösungseigenschaft beheben .

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Wie Sie sehen können, habe ich dort .jsx verwendet, das den folgenden Fehler behoben hat

FEHLER in ./src/app.jsx Modul nicht gefunden: Fehler: Kann nicht behoben werden

Als Referenz: https://webpack.js.org/configuration/resolve/#resolve-extensions

Sei einfach komisch
quelle
0

Stellen Sie sicher, dass bundle.js fehlerfrei generiert wird (überprüfen Sie das Task Runner-Protokoll).

Ich habe aufgrund des Syntaxfehlers in HTML in der Komponentenrenderfunktion die Funktion "Modul kann nicht gefunden werden, wenn die Datei jsx heißt" erhalten.

rluks
quelle