Storybook: Lodash modules not found from within velocity-react

[Vinnl]

I finally got around to setting up the community-maintained Storybook (I'd used the Kadira one before), but I'm running into an odd error. start-storybook appears to mostly run fine, except that it outputs several instances of the below error:

ERROR in ./node_modules/velocity-react/velocity-transition-group.js
Module not found: Error: Can't resolve 'lodash/collection/each' in...

It does so for every Lodash module required in velocity-transition-group.js:

var _ = {
  each: require('lodash/collection/each'),
  extend: require('lodash/object/extend'),
  forEach: require('lodash/collection/forEach'),
  isEqual: require('lodash/lang/isEqual'),
  keys: require('lodash/object/keys'),
  omit: require('lodash/object/omit'),
  pluck: require('lodash/collection/pluck')
};

And likewise for Lodash modules required in velocity-helpers.js and velocity-component.js. The odd thing is that I don't get these errors for other modules... I've checked on disk, but all the referenced files (i.e. node_modules/velocity-react/node_modules/lodash/collection/each.js, etc.) do exist and look to be proper Javascript modules.

Probably relevant: I added a custom resolve configuration in full control mode, which looks like this:

storybookBaseConfig.resolve = {
  extensions: ['.js', '.css', '.ts', '.tsx'],
  modules: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../../../node_modules'), path.resolve(__dirname, '../node_modules')]
};

(The full Webpack config I'm using for Storybook can be found here.)

I've logged resolve.modules, and the absolute paths included in there were the proper paths to my node_modules directories, with the last one being the one in which velocity-react is located..

I'm running Storybook through Yarn.

Node version: 6.11.3
Yarn version: 1.3.2
Storybook version: 3.2.16 (@storybook/react)

[hendrikniemann]

So I had the same issue and I quickly came across the resolve field in webpack. The documentation describes that you can define the standard Node.js node_modules behaviour by just passing the string _"node_modules"_. This is what I did and this fixed the issue for me. Here is the diff of my webpack config:

   resolve: {
     extensions: ['.js', '.json'],
-    modules: [path.join(ROOT, 'src'), path.join(ROOT, 'node_modules')],
+    modules: [path.join(ROOT, 'src'), 'node_modules'],
   },

[Vinnl]

@hendrikniemann You're clearly better at reading docs than I am, as I read that exact same passage yet didn't manage to extract that from it. That solved it indeed, thanks!

And I guess that also means this isn't an issue with Storybook but with my Webpack config, so I'm closing this issue.

[natalan]

Thanks for the tip to look at webpack config. I had a similar error and the problem was in resolve.alias

resolve: {
   alias: {
-     lodash: "underscore"
   },
   symlinks: false
}