juwiley juwiley - 10 months ago 68
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: [
plugins: [

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


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