webpack can't find module if file named jsx

• Z时代
• 2024-01-10
• 分类：技术分享

As I write webpack.config.js like this

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

And in index.jsx I import a react module App

import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)

I find if I named module app in App.jsx, then webpack will say in index.jsx can't find module App, but if I named named module app in App.js, it will find this module and work well.

So, I'm confuse about it. In my webpack.config.js, I have writed test: /.jsx?$/ to check file, but why named *.jsx can't be found?

Answer

Webpack doesn't know to resolve .jsx files implicitly. You can specify a file extension in your app (import App from './containers/App.jsx';). Your current loader test says to use the babel loader when you explicitly import a file with the jsx extension.

or, you can include .jsx in the extensions that webpack should resolve without explicit declaration:

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

For Webpack 2, leave off the empty extension.

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

以上是 webpack can't find module if file named jsx 的全部内容， 来源链接： utcz.com/a/24084.html