Wade Wade - 2 months ago 13
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

resolve
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
index.jsx
and my
webpack.config.js


// 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()

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)


Here's the
webpack.config
:

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

module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/javascripts/index.jsx'
],
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: [
'',
'.webpack.js',
'.web.js',
'.jsx',
'.js',
'.scss'
]
}
}
};


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

Answer

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.

Comments