NodeJS+React module resolving problem while building project

Hi,
I got this project created by external company and they used nodejs+reactjs implementing it. I got from them instructions how to build the project afterwards if needed but the building process does not go through without errors. What I have done so far:

  1. Installed nodejs and npm
  2. tried to run “npm run build:test” and “npm build:production” command
  3. Getting the following error during npm run build:test and npm run build:production commands:
ERROR in ./src/components/ResultsChart.js
Module not found: Error: Cannot resolve module 'lodash/foreach' in /home/myuser/test/
 @ ./src/components/ResultsChart.js 31:15-40

My package.json is following:

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "Client written with React & Redux",
  "license": "MIT",
  "homepage": "http://testpage.com",
  "scripts": {
    "clean": "rimraf dist",
    "build:webpack:production": "NODE_ENV=production cross-env webpack --config webpack/webpack.config.prod.js",
    "build:webpack:test": "NODE_ENV=production cross-env webpack --config webpack/webpack.config.test.js",
    "build:production": "npm run clean && npm run build:webpack:production",
    "build:test": "npm run clean && npm run build:webpack:test",
    "dev": "NODE_ENV=development npm start",
    "start": "node devServer.js",
    "lint": "eslint src",
    "test": "NODE_PATH=./src:. mocha --compilers js:babel-core/register ./src/test/**/*.test.js",
    "deploy:production": "npm run build:production && ./tools/deploy-production.sh",
    "deploy:test": "npm run build:test && ./tools/deploy-test.sh"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.3",
    "babel-core": "^6.3.15",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.0",
    "chai": "^3.5.0",
    "cross-env": "^2.0.0",
    "css-loader": "^0.23.1",
    "eslint": "^3.3.1",
    "eslint-config-airbnb": "^10.0.0",
    "eslint-import-resolver-webpack": "^0.5.1",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.0.0",
    "eventsource-polyfill": "^0.9.6",
    "exports-loader": "^0.6.3",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "form-data": "^1.0.0-rc4",
    "html-webpack-plugin": "^2.10.0",
    "imports-loader": "^0.6.5",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "mocha": "^2.4.5",
    "node-sass": "^3.4.2",
    "postcss-loader": "^0.9.1",
    "redux-logger": "^2.4.0",
    "rimraf": "^2.4.3",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.12",
    "webpack-dashboard": "0.0.1-alpha.1",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "chart.js": "^2.2.1",
    "classnames": "^2.2.5",
    "font-awesome": "^4.6.3",
    "history": "2.1.2",
    "i18n-react": "^0.3.0",
    "immutable": "^3.7.6",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.13.1",
    "moment": "^2.14.1",
    "react": "^15.0.2",
    "react-autosuggest": "^6.0.3",
    "react-big-calendar": "github:user/react-big-calendar",
    "react-dom": "^15.0.2",
    "react-immutable-proptypes": "^2.1.0",
    "react-redux": "^4.1.1",
    "react-redux-toastr": "^3.6.0",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.0",
    "react-sanfona": "0.0.15",
    "recompose": "^0.20.2",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "svg-inline-loader": "^0.6.1",
    "validator": "^5.4.0",
    "whatwg-fetch": "^1.0.0"
  }
}

Tried to remove node_modules/ directory and after that I ran npm install to install the dependencies again. This didn’t help.

Then I tried to get the latest version of lodash dependency npm install --save lodash@latest, this didn’t help either.

My nodejs version is: v6.9.1 and npm version is: 4.3.0. Also tried to add line "lodash": "^4.13.1" in devDependencies in package.json, this had no effect.

Any ideas what is causing this and how to fix this dependency problem? I haven’t played around with nodejs+reactjs before this.

Cheers,
TeNDoLLA

Hi TeNDoLLA,

Looks like it could possibly be related to your webpack configuration. Could you post your webpack.config.prod.js and webpack.config.test.js files?

Hi,

webpack.config.test.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: [
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.[hash].js',
    publicPath: '/project_test/'
  },
  plugins: [
    new ExtractTextPlugin('styles.[hash].css', {
      allChunks: true
    }),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fi/),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.API_ROOT': JSON.stringify('https://api1.ourserver.com/project_test/index.php'),
      'process.env.BASENAME': JSON.stringify('/project_test')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true
      },
      comments: false,
    }),
    new HtmlWebpackPlugin({
      template: './src/php/index_test.php',
      filename: 'index.php'
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js?/,
        exclude: [/node_modules/, /styles/],
        loaders: ['babel'],
        // include: path.join(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss!sass')
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss!less')
      },
      {
        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff'
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      }, {
        test: /\.(png|jpg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?.*$/,
        loader: 'file'
      }
    ]
  },
  postcss: function() {
    return [autoprefixer({
      browsers:["last 2 version", "IE >= 9"]
    })];
  },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      actions: path.join(__dirname, '../src/actions'),
      components: path.join(__dirname, '../src/components'),
      constants: path.join(__dirname, '../src/constants'),
      containers: path.join(__dirname, '../src/containers'),
      middleware: path.join(__dirname, '../src/middleware'),
      reducers: path.join(__dirname, '../src/reducers'),
      store: path.join(__dirname, '../src/store'),
      styles: path.join(__dirname, '../src/styles'),
      utils: path.join(__dirname, '../src/utils'),
      locale: path.join(__dirname, '../locale'),
      assets: path.join(__dirname, '../src/assets')
    }
  }
};

and webpack.config.prod.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: [
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.[hash].js',
    publicPath: '/project/'
  },
  plugins: [
    new ExtractTextPlugin('styles.[hash].css', {
      allChunks: true
    }),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fi/),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.API_ROOT': JSON.stringify('https://api1.ourserver.com/project_prod/index.php'),
      'process.env.BASENAME': JSON.stringify('/project_prod')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true
      },
      comments: false,
    }),
    new HtmlWebpackPlugin({
      template: './src/php/index_production.php',
      filename: 'index.php'
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js?/,
        exclude: [/node_modules/, /styles/],
        loaders: ['babel'],
        // include: path.join(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss!sass')
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss!less')
      },
      {
        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff'
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      }, {
        test: /\.(png|jpg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?.*$/,
        loader: 'file'
      }
    ]
  },
  postcss: function() {
    return [autoprefixer({
      browsers:["last 2 version", "IE >= 9"]
    })];
  },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      actions: path.join(__dirname, '../src/actions'),
      components: path.join(__dirname, '../src/components'),
      constants: path.join(__dirname, '../src/constants'),
      containers: path.join(__dirname, '../src/containers'),
      middleware: path.join(__dirname, '../src/middleware'),
      reducers: path.join(__dirname, '../src/reducers'),
      store: path.join(__dirname, '../src/store'),
      styles: path.join(__dirname, '../src/styles'),
      utils: path.join(__dirname, '../src/utils'),
      locale: path.join(__dirname, '../locale'),
      assets: path.join(__dirname, '../src/assets')
    }
  }
};

OK, so having run a couple of tests, I think the problem might be the name of the module.
In ./src/components/ResultsChart.js, try changing the name of the import from lodash/foreach to lodash/forEach

1 Like

Thank you so much @fretburner! That was it.

Changed
import foreach from 'lodash/foreach' to import foreach from 'lodash/forEach' and then it built succesfully. There was another problem after the build. When I hit refresh the page would return always 404 not found. And when I clicked the actual buttons the pages worked. I think this had to do something with the ReactJS routing. Got this fixed with .htaccess configuration.

Not sure should it be import forEach from 'lodash/forEach' or import foreach from 'lodash/forEach'? Both seems to work.

I forgot to mention in the first post that I got few warnings during the npm install. The following:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN project_name@1.0.0 No repository field.

The app seems to work but should I be worried about these warnings during npm install? Not so much worried about the optional one but how about the notsup one?

Anyway, thousands of thanks! :slight_smile:

Cheers,
TeNDoLLA

Also I would be interested to hear how did you track down the problem to the module name if you don’t mind explaining :slight_smile:

-TeNDoLLA

Great, I’m glad it’s working now :slight_smile:

The only difference will be how you reference the imported module from your code (i.e. foreach or forEach). In this situation, as it’s for an existing app, you’ll need to make sure the case matches the way it has been referenced in the code that uses the forEach module (as JavaScript variable names are case-sensitive).

Yeah, that particular warning about fsevents is pŕetty common. It’s a MacOS-specific module, so it will always give this warning when you install on Windows or Linux. It’s nothing to worry about though, as it’s an optional dependency.

I used the details you provided to try and replicated your project setup, but with the main JS file simply including the lodash module. Trying to import lodash/foreach gave me the same error as you reported, so I tried importing the whole lodash lib, which worked fine. I googled the forEach method to check how it was supposed to be included and noticed that the name was snake-cased and realized that was why Webpack couldn’t find the module.

1 Like

Allright, thanks again for your time and effort.

-TeNDoLLA

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.