webpack không thể tìm thấy mô-đun nếu tệp có tên jsx

Khi tôi viết webpack.config.js như thế này

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

Và trong index.jsxtôi nhập một reactmô-đunApp

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

import App from './containers/App';

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

Tôi thấy nếu tôi đặt tên ứng dụng mô-đun trong App.jsx, thì webpack sẽ thông báo trong index.jsxkhông thể tìm thấy mô-đun App, nhưng nếu tôi đặt tên ứng dụng mô-đun đã đặt tên trong App.js, nó sẽ tìm thấy mô-đun này và hoạt động tốt.

Vì vậy, tôi nhầm lẫn về nó. Trong của tôi webpack.config.js, tôi đã viết test: /\.jsx?$/để kiểm tra tệp, nhưng tại sao *.jsxkhông tìm thấy tên?

Webpack không biết giải quyết .jsxcác tệp một cách ngầm định. Bạn có thể chỉ định phần mở rộng tệp trong ứng dụng của mình ( import App from './containers/App.jsx';). Kiểm tra trình tải hiện tại của bạn cho biết sử dụng trình tải babel khi bạn nhập rõ ràng tệp có phần mở rộng jsx.

hoặc, bạn có thể đưa .jsxvào các tiện ích mở rộng mà webpack sẽ giải quyết mà không cần khai báo rõ ràng:

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

Đối với Webpack 2, hãy bỏ đi phần mở rộng trống.

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

Thêm vào câu trả lời ở trên,

Các quyết tài sản là nơi bạn có để thêm tất cả các loại tập tin mà bạn đang sử dụng trong ứng dụng của bạn.

Giả sử bạn muốn sử dụng tệp .jsx hoặc .es6 ; bạn có thể vui vẻ đưa chúng vào đây và webpack sẽ giải quyết chúng:

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

Nếu bạn thêm các tiện ích mở rộng trong thuộc tính giải quyết , bạn có thể xóa chúng khỏi câu lệnh nhập:

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

Các trường hợp khác như nếu bạn muốn phát hiện tập lệnh cà phê, bạn nên định cấu hình thuộc tính thử nghiệm của mình cũng như:

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

Vì lợi ích của khả năng đọc và mã hóa sao chép-dán. Đây là câu trả lời webpack 4 từ bình luận của mr rogers trong chủ đề này.

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

Như đã đề cập trong phần nhận xét về câu trả lời từ @max, đối với webpack 4, tôi thấy rằng tôi cần đặt điều này vào một trong các quy tắc được liệt kê trong mô-đun, như sau:

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

Tôi đã gặp sự cố tương tự và có thể giải quyết bằng cách sử dụng thuộc tính giải quyết .

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

Như Bạn có thể thấy, tôi đã sử dụng .jsx trong đó đã giải quyết được lỗi sau

ERROR trong ./src/app.jsx Mô-đun không tìm thấy: Lỗi: Không thể giải quyết

Để tham khảo: https://webpack.js.org/configuration/resolve/#resolve-extensions

Xác minh rằng pack.js đang được tạo mà không có lỗi (kiểm tra Nhật ký chạy tác vụ).

Tôi nhận được 'không thể tìm thấy mô-đun nếu tệp có tên jsx' do lỗi cú pháp trong html trong chức năng kết xuất thành phần.