webpack ไม่พบโมดูลหากไฟล์ชื่อ jsx

ในขณะที่ฉันเขียน webpack.config.js เช่นนี้

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

และในindex.jsxฉันนำเข้าreactโมดูลApp

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

import App from './containers/App';

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

ฉันพบว่าฉันตั้งชื่อแอพโมดูลApp.jsxแล้ว webpack จะบอกว่าindex.jsxไม่พบโมดูลAppแต่ถ้าฉันตั้งชื่อแอพโมดูลในโมดูลApp.jsจะพบโมดูลนี้และทำงานได้ดี

ฉันสับสนกับมัน ในของwebpack.config.jsฉันฉันได้เขียนtest: /\.jsx?$/เพื่อตรวจสอบไฟล์ แต่ทำไม*.jsxไม่พบชื่อ

Webpack ไม่ทราบวิธีแก้ไข.jsxไฟล์โดยปริยาย คุณสามารถระบุนามสกุลไฟล์ในแอปของคุณ ( import App from './containers/App.jsx';) การทดสอบตัวโหลดปัจจุบันของคุณบอกว่าให้ใช้ babel loader เมื่อคุณนำเข้าไฟล์ที่มีนามสกุล jsx อย่างชัดเจน

หรือคุณสามารถรวม.jsxไว้ในส่วนขยายที่ webpack ควรแก้ไขโดยไม่ต้องประกาศอย่างชัดเจน:

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

สำหรับ Webpack 2 ให้เว้นส่วนขยายว่างไว้

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

การเพิ่มคำตอบข้างต้น

แก้ไขคุณสมบัติเป็นที่ที่คุณต้องเพิ่มทุกชนิดไฟล์ที่คุณใช้ในการประยุกต์ใช้ของคุณ

สมมติว่าคุณต้องการใช้ไฟล์. jsx หรือ. es6 ; คุณสามารถรวมไว้ที่นี่ได้อย่างมีความสุขและ webpack จะแก้ไข:

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

หากคุณเพิ่มส่วนขยายในคุณสมบัติการแก้ไขคุณสามารถลบออกจากคำสั่งนำเข้า:

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

สถานการณ์อื่น ๆ เช่นหากคุณต้องการให้ตรวจพบสคริปต์กาแฟคุณควรกำหนดค่าคุณสมบัติการทดสอบของคุณเช่น:

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

เพื่อประโยชน์ในการอ่านและคัดลอกวางการเข้ารหัส นี่คือคำตอบของ webpack 4 จากความคิดเห็นของmr rogersในหัวข้อนี้

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

ตามที่กล่าวไว้ในความคิดเห็นเกี่ยวกับคำตอบจาก @max สำหรับ webpack 4 ฉันพบว่าฉันจำเป็นต้องใส่สิ่งนี้ไว้ในกฎข้อใดข้อหนึ่งที่ระบุไว้ในโมดูลดังนี้

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

ฉันประสบปัญหาที่คล้ายกันนี้และสามารถแก้ไขได้โดยใช้คุณสมบัติการแก้ไข

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

อย่างที่คุณเห็นฉันใช้. jsx ที่นั่นซึ่งแก้ไขข้อผิดพลาดต่อไปนี้

ข้อผิดพลาดใน. /src/app.jsx ไม่พบโมดูล: ข้อผิดพลาด: ไม่สามารถแก้ไขได้

สำหรับการอ้างอิง: https://webpack.js.org/configuration/resolve/#resolve-extensions

ตรวจสอบว่าบันเดิล js ถูกสร้างขึ้นโดยไม่มีข้อผิดพลาด (ตรวจสอบบันทึกนักวิ่งงาน)

ฉันได้รับ 'ไม่พบโมดูลหากไฟล์ชื่อ jsx' เนื่องจากข้อผิดพลาดทางไวยากรณ์ใน html ในฟังก์ชันการแสดงผลคอมโพเนนต์

ฉันพบว่าการรีสตาร์ทเซิร์ฟเวอร์ของฉันช่วยแก้ไขปัญหานี้ได้ เพียงแค่เรียกใช้

npm start