CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
Jay
Jay

Reputation: 1056

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?

Upvotes: 2

Views: 5404

Answers (1)

Andrew Li
Andrew Li

Reputation: 57972

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.

Upvotes: 2

Related Questions