Wade Wade - 1 year ago 182
Javascript Question

Webpack resolve extension "Module not found"

Warning: I'm pretty new to webpack, please be gentle

Okay so I'm trying to set up webpack, and I got everything working fine with es2015 and imports with webpack. I'm running into an issue where now I'm trying to add the extensions to

so that I don't have to declare the file extension, but it always says that it can't find the file or module. Any idea why this could be? Here's my
and my

// index.jsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import App from './components/App'
import configureStore from './store/configureStore.js'

const store = configureStore()

<Provider store={store}>
<App />

Here's the

// webpack.config
var path = require('path')
var webpack = require('webpack')

module.exports = {
devtool: 'eval',
entry: [
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/public/'

plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== 'production'

module: {
loaders: [
test: /\.jsx?$/,
loaders: [ 'react-hot', 'babel-loader' ],
include: path.join(__dirname, '/src')
test: /\.scss$/,
loader: [ 'style', 'css', 'sass' ]
test: /\.json$/,
loader: 'json'

preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }

resolve: {
root: [
path.resolve(path.join(__dirname, 'src', 'stylesheets')),
path.resolve(path.join(__dirname, 'src', 'javascripts'))
alias: {
'@style': path.resolve(path.join(__dirname, 'src', 'stylesheets')),
'@script': path.resolve(path.join(__dirname, 'src', 'javascripts'))
extensions: [

As I said, if I change line 5 in
import App from './components/App'
import App from './components/App.jsx'
, it works and I have no idea why. Any thoughts?

Answer Source

Your module is wrapping around your resolve, which is ruining the config file. If the resolve isn't there then Webpack can't resolve your extension, forcing you to add the extension. You should always indent uniformly to keep track of and prevent these types of errors.

When you import it without an extension, Webpack doesn't know how to resolve the extension so it can't correctly load it. You have to specify .jsx so then Babel comes in and imports it as a .jsx explicitly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download