CODEWITHSUNDEEP
javascriptreactjswebpackjsxwebpack-2
Anyname Donotcare
Anyname Donotcare

Reputation: 11423

Can't resolve module in react

According to the following: Webpack 2: cannot resolve module

I have tried to use modules instead of alias to load my component like this :

  resolve: {
    modules: [__dirname, 'node_modules',path.resolve('./app/components')],
    alias:{
      applicationStyles:'app/styles/app.scss'
    },

but i get the following webpack error:

ERROR in ./app/app.jsx Module not found: Error: Can't resolve 'TodoApp' in 'C:....' @ ./app/app.jsx 10:14-32 @ multi babel-polyfill script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js ./app/app.jsx

Every thing goes okay, If i use alias for each component instead like this:

 resolve: {
    modules: [__dirname, 'node_modules'],
    alias:{
      applicationStyles:'app/styles/app.scss',
      TodoApp: 'app/components/TodoApp.jsx'
    },
    extensions: ['*','.js','.jsx;']
  },

Upvotes: 1

Views: 8554

Answers (1)

Dawid Karabin
Dawid Karabin

Reputation: 5293

You have semicolon in resolve.extensions property: '.jsx;'. This semicolon was the root of the problem why resolve.modules didn't work.

When you remove this semicolon and add 'app/components' to resolve.modules, webpack bundles without errors.

webpack.config.js (after changes)

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: [
    'babel-polyfill',
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!foundation-sites/dist/js/foundation.min.js',
    './app/app.jsx',
  ],
  output: {
    path: __dirname,
    filename: './public/bundle.js',
  },
  externals: {
    jquery: 'jQuery',
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    modules: [__dirname, 'app/components', 'node_modules'],
    alias: {
      applicationStyles: 'app/styles/app.scss',
    },
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'es2017', 'stage-0'],
          plugins: ['transform-runtime'],
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
      },

      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules/foundation-sites/scss'],
            },
          },
        ],
      },
    ],
  },

  devtool: 'cheap-module-eval-source-map',
};

Upvotes: 5

Related Questions