webpack tidak dapat menemukan modul jika file bernama jsx

107

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?

masukkan deskripsi gambar di sini

qiuyuntao
sumber

Jawaban:

214

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']
}
maks
sumber
63
Untuk webpack 4, saya menemukan bahwa saya perlu meletakkan ini di salah satu rules yang terdaftar di bawah module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
mr rogers
1
@mrrogers Saya telah mencari di mana-mana untuk ini! Saya angkat topi untuk Anda Pak!
Frederik Petersen
1
terima kasih banyak! Saya mencari itu selama berjam-jam!
KevinH
1
@mrrogers Pertimbangkan untuk mempromosikan komentar Anda pada sebuah jawaban :)
Alexander Varwijk
Terima kasih @AlexanderVarwijk. Ide bagus. Saya sendiri telah kembali ke komentar ini untuk mengingat apa yang harus saya lakukan :)
mr rogers
24

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'] 
  }
};
Ignatius Andrew
sumber
7
Di WebPack 3.4, Anda tidak dapat menggunakan Resolve.extension dengan nilai kosong. Ini akan menyebabkan pengecualian dalam kompilasi: "Objek konfigurasi tidak valid. Webpack telah diinisialisasi menggunakan objek konfigurasi yang tidak cocok dengan skema API. - configuration.resolve.extensions [0] tidak boleh kosong."
Julio Spader
19

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"
      }
    },
  ]
}
Richard Vanbergen
sumber
1
Dari 4.36.1 tepatnya. Ini dokumen webpack.js.org/configuration/module/#ruleresolve
Alexey Berezkin
10

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: ...
      }
    ]
  }
}
tuan rogers
sumber
1

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

hanya-menjadi-aneh
sumber
0

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.

rluks
sumber