Webpack unable to find the correct modules - express

Question

I cannot figure out why the paths are so wrong when finding node modules. Here's my /webpack-dev-server.js
const chalk = require('chalk');
const webpack = require('webpack');
const env = require('../server/environment');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.development.js');
const server = new WebpackDevServer(webpack(webpackConfig), {
publicPath: '/client',
contentBase: '/client',
inline: true,
hot: true,
compress: true,
stats: false,
quiet: true,
noInfo: true,
lazy: false,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
},
proxy: {
"*": 'http://localhost:3000'
}
});
server.listen(env.WEBPACK_PORT, 'localhost', (err) => {
if (err) {
console.log(chalk.red(err));
}
console.log(chalk.yellow(`Webpack server listening on http://localhost:${env.WEBPACK_PORT}`));
});
which includes the basic webpack development setup. When I start up the webpack-dev-server above, I get the following error in the console:
AppContainer.scss?048e:4Uncaught Error: Cannot find module "!!./../../../node_modules/css-loader/index.js?modules!./../../../node_modules/autoprefixer-loader/index.js!./../../../node_modules/sass-loader/index.js!./AppContainer.scss"
I see the paths to the node_modules are incorrect. What's strange is that if I run an Express server and simply require the webpack-dev-server it works...
Here's my webpack config:
import path from 'path';
import webpack from 'webpack';
import env from '../server/environment';
export default {
target: 'web',
devtool: 'cheap-module-eval-source-map',
entry: [
`webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
'webpack/hot/dev-server',
'babel-polyfill',
'./client/index'
],
output: {
path: path.join(__dirname, '../client'),
pathInfo: true,
publicPath: `http://localhost:${env.WEBPACK_PORT}/client/`,
filename: 'index.js'
},
resolve: {
root: path.join(__dirname, '..'),
modulesDirectories: [
'node_modules',
'client'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.DefinePlugin({
__DEV__: env.isDev,
__PRODUCTION__: env.isProd,
__TOKEN_KEY__: JSON.stringify(env.TOKEN_KEY),
__ENV__: JSON.stringify(env.ENV)
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
noParse: /\.min\.js/,
loaders: [
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=image/svg+xml'
},
{ test: /\.(jpe?g|png|gif)$/i, loaders: ['file'] },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.scss$/, loader: 'style!css?modules!autoprefixer!sass' },
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}
]
}
};

Answer 1

I needed to correctly extend the base config class.