webpack tidak dapat menemukan modul jika file bernama jsx

Saat saya menulis webpack.config.js seperti ini

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

Dan index.jsxsaya mengimpor reactmodulApp

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

import App from './containers/App';

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

Saya menemukan jika saya menamai aplikasi modul di App.jsx, maka webpack akan mengatakan dalam index.jsxmodul tidak dapat ditemukan App, tetapi jika saya menamai aplikasi modul dalam App.js, itu akan menemukan modul ini dan berfungsi dengan baik.

Jadi, saya bingung tentang itu. Di saya webpack.config.js, saya telah menulis test: /\.jsx?$/untuk memeriksa file, tetapi mengapa nama *.jsxtidak dapat ditemukan?

Webpack tidak tahu untuk menyelesaikan .jsxfile secara implisit. Anda dapat menentukan ekstensi file di aplikasi Anda ( import App from './containers/App.jsx';). Pengujian loader Anda saat ini mengatakan untuk menggunakan babel loader ketika Anda secara eksplisit mengimpor file dengan ekstensi jsx.

atau, Anda dapat menyertakan .jsxekstensi yang harus diselesaikan oleh webpack tanpa deklarasi eksplisit:

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

Untuk Webpack 2, biarkan ekstensi kosong.

resolve: {
  extensions: ['.js', '.jsx']
}

Menambah jawaban di atas,

The tekad properti adalah di mana Anda harus menambahkan semua jenis file yang Anda gunakan dalam aplikasi Anda.

Misalkan Anda ingin menggunakan file .jsx atau .es6 ; Anda dapat dengan senang hati memasukkannya di sini dan webpack akan menyelesaikannya:

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

Jika Anda menambahkan ekstensi di properti selesaikan , Anda dapat menghapusnya dari pernyataan impor:

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

Skenario lain seperti jika Anda ingin skrip kopi terdeteksi, Anda harus mengonfigurasi properti pengujian Anda juga seperti:

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

Untuk kepentingan keterbacaan dan pengkodean salin-tempel. Berikut adalah jawaban webpack 4 dari komentar mr rogers di utas ini.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

Seperti yang disebutkan dalam komentar pada jawaban dari @max, untuk webpack 4, saya menemukan bahwa saya perlu meletakkan ini di salah satu aturan yang tercantum di bawah modul, seperti:

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

Saya menghadapi masalah serupa, dan dapat menyelesaikannya menggunakan penyelesaian properti.

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

Seperti yang Anda lihat, saya telah menggunakan .jsx di sana yang menyelesaikan kesalahan berikut

EROR di ./src/app.jsx Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan

Untuk Referensi: https://webpack.js.org/configuration/resolve/#resolve-extensions

Verifikasi, bahwa bundle.js dibuat tanpa kesalahan (periksa Log Runner Tugas).

Saya mendapatkan 'tidak dapat menemukan modul jika file bernama jsx' karena kesalahan sintaks di html dalam fungsi render komponen.