I try to use webpack for managing files in my project. I use webpack-dev-server and bower-webpack-plugin. When I run server, I get error in browser console.
Module not found: Error: Cannot resolve module 'server'
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js', //this is the default name, so you can skip it
//at this directory our bundle file will be available
//make sure port 8090 is used when launching webpack-dev-server
publicPath: 'http://localhost:8090/assets'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'jsx', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}
]
},
plugins: [
new BowerWebpackPlugin()
],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: ["./src", "node_modules", "bower_components"]
}
}
Edit: Now I use this webpack config without bower-webpack-plugin
package.json
{
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server --progress --colors --port 8090"
},
"name": "Wonder",
"version": "0.0.0",
"description": "Internal app",
"main": "./src/script/index.jsx",
"author": "and",
"license": "ISC",
"devDependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"bower-webpack-plugin": "^0.1.8",
"css-loader": "^0.16.0",
"extract-text-webpack-plugin": "^0.8.2",
"http-server": "^0.8.0",
"jsx-loader": "^0.13.2",
"node-sass": "^3.2.0",
"path": "^0.11.14",
"react": "^0.13.3",
"react-hot-loader": "^2.0.0-alpha-2",
"reinstall": "^1.1.0",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
}
}
browser console output
Uncaught Error: Cannot find module "server"
webpackMissingModule @ bootstrap 19214e8f07aa8a69f314:39
(anonymous function) @ bootstrap 19214e8f07aa8a69f314:39
__webpack_require__ @ bootstrap 19214e8f07aa8a69f314:19
(anonymous function) @ bootstrap 19214e8f07aa8a69f314:39
(anonymous function) @ bootstrap 19214e8f07aa8a69f314:39
webpack-dev-server.js:1 [WDS] Errors while compiling.
webpack-dev-server.js:1 multi main
Module not found: Error: Cannot resolve module 'server' in /Users/and/devel/webpack_test
resolve module server in /Users/and/devel/webpack_test
looking for modules in /Users/and/devel/webpack_test/src
/Users/and/devel/webpack_test/src/server doesn't exist (module as directory)
resolve 'file' server in /Users/and/devel/webpack_test/src
resolve file
/Users/and/devel/webpack_test/src/server.js doesn't exist
/Users/and/devel/webpack_test/src/server doesn't exist
/Users/and/devel/webpack_test/src/server.jsx doesn't exist
looking for modules in /Users/and/devel/webpack_test/node_modules
/Users/and/devel/webpack_test/node_modules/server doesn't exist (module as directory)
resolve 'file' server in /Users/and/devel/webpack_test/node_modules
resolve file
/Users/and/devel/webpack_test/node_modules/server doesn't exist
/Users/and/devel/webpack_test/node_modules/server.js doesn't exist
/Users/and/devel/webpack_test/node_modules/server.jsx doesn't exist
looking for modules in /Users/and/devel/webpack_test/bower_components
/Users/and/devel/webpack_test/bower_components/server doesn't exist (module as directory)
resolve 'file' server in /Users/and/devel/webpack_test/bower_components
resolve file
/Users/and/devel/webpack_test/bower_components/server doesn't exist
/Users/and/devel/webpack_test/bower_components/server.js doesn't exist
/Users/and/devel/webpack_test/bower_components/server.jsx doesn't exist
resolve 'bower component' server manifest files using [bower.json]
resolve file
/Users/and/devel/webpack_test/bower_components/server/bower.json doesn't exists
/Users/and/devel/webpack_test/src/server/bower.json doesn't exists
/Users/and/devel/webpack_test/node_modules/server/bower.json doesn't exists
/Users/and/devel/bower_components/server/bower.json doesn't exists
/Users/and/devel/src/server/bower.json doesn't exists
/Users/and/devel/node_modules/server/bower.json doesn't exists
/Users/and/bower_components/server/bower.json doesn't exists
/Users/and/src/server/bower.json doesn't exists
/Users/and/node_modules/server/bower.json doesn't exists
/Users/bower_components/server/bower.json doesn't exists
/Users/src/server/bower.json doesn't exists
/Users/node_modules/server/bower.json doesn't exists
/bower_components/server/bower.json doesn't exists
/src/server/bower.json doesn't exists
/node_modules/server/bower.json doesn't exists
[/Users/and/devel/webpack_test/src/server.js]
[/Users/and/devel/webpack_test/src/server]
[/Users/and/devel/webpack_test/src/server]
[/Users/and/devel/webpack_test/src/server.jsx]
[/Users/and/devel/webpack_test/node_modules/server]
[/Users/and/devel/webpack_test/node_modules/server]
[/Users/and/devel/webpack_test/node_modules/server.js]
[/Users/and/devel/webpack_test/node_modules/server.jsx]
[/Users/and/devel/webpack_test/bower_components/server]
[/Users/and/devel/webpack_test/bower_components/server]
[/Users/and/devel/webpack_test/bower_components/server.js]
[/Users/and/devel/webpack_test/bower_components/server.jsx]
@ multi main
(anonymous function) @ webpack-dev-server.js:1
n.emit @ webpack-dev-server.js:1
r.onevent @ webpack-dev-server.js:1
r.onpacket @ webpack-dev-server.js:1
t.exports @ webpack-dev-server.js:1
n.emit @ webpack-dev-server.js:1
r.ondecoded @ webpack-dev-server.js:1
t.exports @ webpack-dev-server.js:1
n.emit @ webpack-dev-server.js:1
s.add @ webpack-dev-server.js:1
r.ondata @ webpack-dev-server.js:1
t.exports @ webpack-dev-server.js:1
n.emit @ webpack-dev-server.js:1
r.onPacket @ webpack-dev-server.js:2
(anonymous function) @ webpack-dev-server.js:1
n.emit @ webpack-dev-server.js:1
r.onPacket @ webpack-dev-server.js:1
r.onData.n @ webpack-dev-server.js:1
(anonymous function) @ webpack-dev-server.js:1
e.decodePayloadAsBinary @ webpack-dev-server.js:1
e.decodePayload @ webpack-dev-server.js:1
r.onData @ webpack-dev-server.js:1
(anonymous function) @ webpack-dev-server.js:2
n.emit @ webpack-dev-server.js:1
i.onData @ webpack-dev-server.js:2
i.onLoad @ webpack-dev-server.js:2
i.create.hasXDR.n.onreadystatechange @ webpack-dev-server.js:2
index.html
<!DOCTYPE html>
<html>
<head>
<title>Basic Property Grid</title>
<!-- include react -->
<script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
</body>
</html>
bower.json
{
"name": "Wonder",
"version": "0.0.0",
"description": "Internal app",
"main": "index.html",
"authors": [
"And"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"jquery": "~2.1.4"
}
}
To solve the "Module not found: Can't resolve" error in React, make sure to install the package from the error message if it's a third-party package, e.g. npm i somePackage . If you got the error when importing local files, correct your import path.
A module not found error can occur for many different reasons: The module you're trying to import is not installed in your dependencies. The module you're trying to import is in a different directory. The module you're trying to import has a different casing.
Somewhere in your source files or third-party libraries there is a reference to a resource named server (without any extension). It could be in the form of require('server'). Webpack is trying its best to locate it. It checks different forms of it (e.g. server as a directory, server.js, server.jsx, etc) in various locations but it fails in the end. Try to find out where this reference is.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With