NodeJS+React module resolving problem while building project

TeNDoLLA · February 10, 2017, 1:06pm

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:

Installed nodejs and npm
tried to run “npm run build:test” and “npm build:production” command
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

fretburner · February 10, 2017, 5:03pm

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?

TeNDoLLA · February 13, 2017, 10:16am

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')
    }
  }
};

fretburner · February 13, 2017, 6:16pm

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

TeNDoLLA · February 14, 2017, 8:09am

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!

Cheers,
TeNDoLLA

TeNDoLLA · February 14, 2017, 8:16am

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

-TeNDoLLA

fretburner · February 14, 2017, 10:03am

Great, I’m glad it’s working now

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.

TeNDoLLA · February 14, 2017, 10:11am

Allright, thanks again for your time and effort.

-TeNDoLLA

system · May 16, 2017, 5:11pm

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

Topic		Replies	Views
Webpack/Polyfill Issues with Nodemailer JavaScript	10	5301	March 27, 2023
Npm ERR! errno -4058 - This is related to npm not being able to find a file JavaScript nodejs	5	25796	February 3, 2024
I can't get my React app to work due to script errors JavaScript	5	1320	December 6, 2017
Can't find build.js. I have NO IDEA what I'm doing JavaScript	18	4902	July 14, 2016
I don't really understand this error in React JavaScript	4	672	March 29, 2020

NodeJS+React module resolving problem while building project

Related topics