CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackbabeljs
Anthony
Anthony

Reputation: 1940

Module not found: Error: Cannot resolve module 'components/app'. webpack + reactjs issue

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>
        );
    }
}

Upvotes: 2

Views: 11620

Answers (3)

vhs
vhs

Reputation: 10061

You're looking for module aliasing. The resolve section of your config should look something like:

const path = require('path');

resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['', '.js'],
    alias: {
      components: path.resolve(__dirname, 'src/components/')
    }
}

This is equivalent to the paths option in TypeScript config files.

Upvotes: 0

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8178

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,
  },

};

Upvotes: 9

Robert Moskal
Robert Moskal

Reputation: 22553

You need to specify a relative path to app in your index.js file. So

import App from './components/app'

Without the relative path notation, the module import system looks in the node_modules directory.

Upvotes: 3

Related Questions