Mocking Node modules on the web side with Webpack config in Storybook

Hi,

In my app, I’m using the aws-iot-device-sdk on the api side as well as the web side. This module requires the fs and tls modules, thus I’m using the following Webpack config on the web side to mock those modules:

module.exports = {
  node: {
    fs: 'empty',
    tls: 'empty',
  },
}

However, when using Storybook, it seems that the Webpack config from the web side is not loaded as I get these errors:
Module not found: Error: Can't resolve 'fs'
Module not found: Error: Can't resolve 'tls'

Adding the following lines to node_modules/@redwoodjs/core/config/storybook/main.js seems to fix this:

// ** NODE **
sbConfig.node = rwConfig.node

From what I gather, the user Webpack config is only partially merged with the sbConfig object in node_modules/@redwoodjs/core/config/storybook/main.js. This way the node mocking config would be carried over as well.

Thanks!

@jderrough Welcome to the forums! Doing IoT things are you? Interesting :slightly_smiling_face: What are you building, if I may ask?

I’m afraid I can’t help with storybook. But I know someone who might. @peterp wanna help out in here?

Hi @Tobbe,

Thanks!

Actually, I’m using the IoT sdk as a simple means to do pubsub between the web and api sides with AWS. I got pointers from this article: https://www.serverless.com/blog/serverless-notifications-on-aws

1 Like

Clever :brain:

Hi @peterp & @Tobbe,

Did you get a chance to review this issue and the proposed fix?

I’m still not familiar with Storybook enough to know what side effects that change might have. Hopefully @peterp knows :slight_smile:

And next time, definitely don’t wait 13 days to bug us again, we should be faster than this to reply :see_no_evil:

Hey @jderrough, sorry, I haven’t had a chance to look at it yet

From your assessment it looks like you’re 100% correct that we’re only doing partial merging of the configs. I believe I had issues merging those two configs. I would be amazing if you could open a PR that additionally merges the parts that are valuable to you.

Hi @peterp & @Tobbe,

Here is the PR: https://github.com/redwoodjs/redwood/pull/1491

2 Likes