15

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"
  }
}
Matt
  • 8,195
  • 31
  • 115
  • 225

4 Answers4

4

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.

katranci
  • 2,551
  • 19
  • 24
  • 1
    This is basically what webpack says ... can't find a module/file named server – Gabriel Matusevich Mar 04 '16 at 13:07
  • 3
    One concern. I have the same issue, but when I don't use webpack, just include script by script in the html, it works. When I use webpack this error shows up. In the code it requires a module that webpack can't find just as you said, but my doubt is why when I include scripts in the normal html way it works. I know I have to npm install the module and that will fix the problem but idkk why it does not work. – Carlos Calla Apr 07 '16 at 14:36
3

I got similar error using webpack-dev-server. Althought webpack was installed globally, i had to install it as part of the project to resolve 'webpack/hot/dev-server' depencency

AfDev
  • 1,240
  • 19
  • 21
  • 2
    I tried this for me but this didn't help. Sounds a bit naf to have to install both global and per project. I hope to start seeing some time savers as webpack is just looking like a time drain to me... – landed May 09 '16 at 21:02
3

Got similar error when, mistakenly, used npm start server instead of npm run server.

If you have server script in your package.json, running npm run server will launch it. If you use npm start server, it will look for a server module in your source and attempt to start it.

Small typo, but may easily occur due to lack of attention.

Maciek Jurczyk
  • 555
  • 3
  • 7
0

My situation is I was using TFS and webpack and getting many module not found errors.

It turned out to be I had a non existant package in my package.json file which I hadn't deleted.

"primeng": "1.0.0-rc.4",
"primeng-ultima": "Unavailable"

As soon as I deleted this package it all worked.

Fortunately the logs led me to this conclusion. What happened was npm had skipped the restoration of the other packages when it was unable to download this package.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689