Anton Artemev Anton Artemev - 1 month ago 38
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: [
'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,
  },

};