juwiley juwiley - 4 months ago 10
React JSX Question

ES6 import statements that assume .jsx ending in webpack

I'm porting an existing project that was using browserfiy to webpack. Previously import statements like:

import MyClass from './MyClass'


...would work. Now I have to add the .jsx extension

import MyClass from './MyClass.jsx'


Here's my loader definition:

var path = require("path");

module.exports = {
devServer: {
inline: true,
port: 10000 // Defaults to 8080
},
entry: {
app: ['./src/app.jsx']
},
output: {
path: path.resolve(__dirname, "public/scripts"),
publicPath: '/scripts',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
},
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
"es2015",
"stage-0",
"react"
],
plugins: [
"transform-flow-strip-types"
]
}
}
]
}
};


Any idea how to convince webpack to load without the extension?

Answer

Webpack relies on the resolve.extensions configuration to know which extensions to consider when making module resolution. The default is ["", ".webpack.js", ".web.js", ".js"], so the .jsx extension needs to be added manually. Simply include this at the root of your webpack configuration object:

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