Anton Artemev Anton Artemev - 1 year ago 200
Javascript Question

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: [
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"]


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

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


import React from 'react';

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

Answer Source

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]',
    chunkFilename: '[id].chunk.js',

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

  resolve: {
    root: path.resolve('./src'),
    extensions: [

  plugins: plugins,

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

  module: {
    preLoaders: [
    loaders: [
        test: /\.png$/,
        loader: 'url-loader',
        query: { mimetype: 'image/png' },

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download