Webpack - sub modules not resolved correctly

Question

I have a project, which uses the current version of lodash library 4.17.5.

This project has as its dependency another module, which is basically a lite version of codemirror.
The codemirrormodule uses JSHINT as it's dependency, and JSHINT relies on the lodash version 3.x.

Now, as I have a lodash 4.x version in my project, whenever a require is called in JSHINT it requires a 4.x version instead of 3.x version and complains about lack of methods, which are no longer supported by lodash 4.x.

This is part of my npm ls command output. In my node_modules/lodash I have a lodash 4.x version while in my node_modules/jshint/node_modules/lodah is version 3.x

I use a webpack 3.11.0

My webpack configuration:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  publicPath: process.env.NODE_ENV === 'production' ? "." + 
  config.build.assetsPublicPath : config.dev.assetsPublicPath,
  filename: '[name].js'
},
 resolve: {
extensions: ['.js', '.vue'],
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  'scss': path.resolve(__dirname, '../src/scss'),
  'services': path.resolve(__dirname, '../src/services'),
  'ui': path.resolve(__dirname, '../src/components/UI'),
  'utility': path.resolve(__dirname, '../src/util.js'),
   // This is a hack which solves the issue, but still a hack.
  'lodash4': path.resolve(__dirname, '../node_modules/lodash'),
  'lodash': path.resolve(__dirname, '../node_modules/jshint/node_modules/lodash'),
},
modules: [
  path.join(__dirname, '../node_modules')
]
},
resolveLoader: {
modules: [
  path.join(__dirname, '../node_modules')
],
},
module: {
 rules: [
  {
    test: /\.vue$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },
  {
    test: /\.(js|js.flow)$/,
    loader: 'babel-loader',
    include: projectRoot,
    exclude: /node_modules/,
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]
},
plugins: [
 new webpack.LoaderOptionsPlugin({
  options: {
    eslint: {
      formatter: require('eslint-friendly-formatter')
    },
    vue: {
      loaders: utils.cssLoaders(),
      postcss: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    }
  }
})
]
}

Is there some way to specify which library version shall be used in the main project, and which in submodules which have lower version as it's dependency? Shouldn't it happen by default?

I found that it can be done with using an alias for a newer lodash version but this does not sound as a proper solution.

Answer 1

I got help on webpack github page #6505.

Basically I configured node_modules resolver wrongly:
This forces all modules to resolve from the root node_modules ONLY.

modules: [
  path.join(__dirname, '../node_modules')
]

Correct:
This is the default hierarchical node_modules resolution. You can just omit this.

modules: [
  'node_modules'
]