Module not found: Error: Cannot resolve module ‘components/app’. webpack + reactjs issue Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Module not found: Error: Cannot resolve module ‘components/app’. webpack + reactjs issue without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m newbie in webpack and react. hope you can help me.

I faced a problem and can’t find any working solution in the internet. When i trying to run webpack-dev-serverI geting “Module not found: Error: Cannot resolve module ‘components/app'” error all the time.

Here my files structure.

root/ webpack.config.js

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

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        moduleDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
         query: {
             presets: ['es2015', 'react']
         }
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

root/ .babelrc

{
    presets: ["react", "es2015"],
    plugins: ["react-hot-loader/babel"]
}

root/src/index.js

import React from 'react';
import { render } from 'react-dom';
import App from 'components/app';

render(<App />, document.getElementById('app'));

root/src/components/app.js

import React from 'react';

export default class App extends React.component {
    render() {
        return (
            <div>
                <h1>Hello There</h1>
            </div>
        );
    }
}

Answer

I agree with Robert Moskal answer, use Relative path to import, at the same time if you really want the absolute path to work you may have to add one more line in your webpack.config.js inside your resolve section of it add this below line

root: path.resolve('./src'),

this will help to resolve the root and you can easily import using absolute path from folders inside the src folder. I would show you my sample webpack.config.js below

'use strict';

const path = require('path');
const loaders = require('./webpack/loaders');
const plugins = require('./webpack/plugins');

const applicationEntries = process.env.NODE_ENV === 'development'
  ? ['webpack-hot-middleware/client?reload=true']
  : [];

const mainEntry = process.env.NODE_ENV === 'development'
  ? './src/sample/index.tsx'
  : './src/lib/index.tsx';

module.exports = {
  entry: [mainEntry].concat(applicationEntries),

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js',
  },

  devtool: process.env.NODE_ENV === 'production' ?
    'source-map' :
    'inline-source-map',

  resolve: {
    root: path.resolve('./src'),
    extensions: [
      '',
      '.webpack.js',
      '.web.js',
      '.tsx',
      '.ts',
      '.js',
      '.json',
    ],
  },

  plugins: plugins,

  devServer: {
    historyApiFallback: { index: '/' },
  },

  module: {
    preLoaders: [
      loaders.tslint,
    ],
    loaders: [
      loaders.tsx,
      loaders.html,
      loaders.css,
      loaders.scss,
      loaders.eot,
      loaders.svg,
      loaders.ttf,
      loaders.woff,
      loaders.json,
      {
        test: /.png$/,
        loader: 'url-loader',
        query: { mimetype: 'image/png' },
      },
    ],
  },

  externals: {
    'react/lib/ReactContext': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/addons': true,
  },

};
We are here to answer your question about Module not found: Error: Cannot resolve module ‘components/app’. webpack + reactjs issue - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji