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

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?

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

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

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

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: ...
      }
    ]
  }
}

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

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.