Webpack resolutions error with lodash and other modules

Question

Using yarn to generate webpack build throws multiple module resolution errors on Mac OSX only. Using npm works fine.

I believe the problem might be within webpack configuration to properly locate and load the modules.

Run 'yarn run build' on Mac OX.

ERROR in ./src/renderer/components/MapFilter.js

Module not found: Error: Can't resolve 'lodash/differenceBy' in '/Users/travis/build/arky/mapeo-desktop/src/renderer/components'

@ ./src/renderer/components/MapFilter.js 21:20-50

@ ./src/renderer/components/Home.js

@ ./src/renderer/app.js

    $ yarn run lint

    yarn run v1.17.3

    $ yarn run build 

    yarn run v1.17.3

$ webpack

Hash: 1da36ada161b468c8bf0

Version: webpack 3.12.0

Time: 3316ms

          Asset     Size  Chunks             Chunk Names

static/build.js  99.5 kB       0  [emitted]  main

   [2] ./src/i18n.js 310 bytes {0} [built]

  [10] ./src/renderer/api.js 3.61 kB {0} [built]

  [14] ./src/renderer/app.js 1.08 kB {0} [built]

  [23] ./src/renderer/sync-manager.js 4.19 kB {0} [built]

  [39] ./package.json 4.15 kB {0} [built]

    + 43 hidden modules

ERROR in ./src/renderer/components/MapFilter.js

Module not found: Error: Can't resolve 'lodash/differenceBy' in '/Users/travis/build/arky/mapeo-desktop/src/renderer/components'

 @ ./src/renderer/components/MapFilter.js 21:20-50

 @ ./src/renderer/components/Home.js

 @ ./src/renderer/app.js

ERROR in ./src/renderer/components/MapEditor.js

Module not found: Error: Can't resolve 'lodash/merge' in '/Users/travis/build/arky/mapeo-desktop/src/renderer/components'

 @ ./src/renderer/components/MapEditor.js 19:13-36

 @ ./src/renderer/components/Home.js

 @ ./src/renderer/app.js

ERROR in ./src/renderer/components/MapFilter.js

Module not found: Error: Can't resolve 'lodash/xor' in '/Users/travis/build/arky/mapeo-desktop/src/renderer/components'

 @ ./src/renderer/components/MapFilter.js 17:11-32

 @ ./src/renderer/components/Home.js

 @ ./src/renderer/app.js

ERROR in ./src/renderer/components/MapFilter.js

Module not found: Error: Can't resolve 'randombytes' in '/Users/travis/build/arky/mapeo-desktop/src/renderer/components'

 @ ./src/renderer/components/MapFilter.js 33:19-41

 @ ./src/renderer/components/Home.js

 @ ./src/renderer/app.js

ERROR in ./src/renderer/app.js

Module not found: Error: Can't resolve 'react-intl' in '/Users/travis/build/arky/mapeo-desktop/src/renderer'

 @ ./src/renderer/app.js 11:17-38

ERROR in ./src/renderer/app.js

Module not found: Error: Can't resolve 'react-intl/locale-data/en' in '/Users/travis/build/arky/mapeo-desktop/src/renderer'

 @ ./src/renderer/app.js 13:10-46

error Command failed with exit code 2.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The command "yarn run build" exited with 2.

Here is the webpack.config.js The complete repo is here https://github.com/digidem/mapeo-desktop/blob/master/webpack.config.js

const nodeExternals = require('webpack-node-externals')

module.exports = {
  entry: './src/renderer/app.js',
  target: 'electron-renderer',
  externals: [nodeExternals()],
  output: {
    filename: 'static/build.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: path.join(__dirname, 'src'),
      loader: 'babel-loader',
      query: {
        presets: ['react', 'env'],
        plugins: [
          'transform-object-rest-spread',
          'transform-class-properties',
          'transform-es2015-classes'
        ]
      }
    }]
  }
}

Answer 1

经过一些调试后，我发现将webpack和模块升级到最新的稳定版本可以解决此问题。