Vite Storybook builld command outputting thousands of messages, running out of memory

Get Help and Help Others
1

After upgrading to Redwood v8 I’ve noticed that the new Storybook vite build process is emitting thousands of the follow messages on build:

[plugin mock-@redwoodjs/auth] Sourcemap is likely to be incorrect: a plugin (mock-@redwoodjs/auth) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
[plugin mock-@redwoodjs/router] Sourcemap is likely to be incorrect: a plugin (mock-@redwoodjs/router) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

I’ve also had to start running yarn rw sb --build with my node max memory increased to 4GB in order to get the build to finish.

I’m not able to reproduce this with a brand new project, so it seems to be somehow related to something we are doing. I just haven’t been able to figure out what. I tried just setting stories: [] in the .storybook/main.js config, but get the same result (thousands of messages, memory exhaustion). Based on the messages, I’m wondering if there is some sort of recursive issue with our routes and auth config.

Any ideas for how to troubleshoot further would be appreciated!

2

There is lots of discussion around this issue general with Vite and Storybook. Based on [Bug] JavaScript heap out of memory (Vite build works, Storybook w/WebPack 4 works) · Issue #409 · storybookjs/builder-vite · GitHub, I tried turning off sourcemaps all together and that works around the issue. I’d rather still have souremaps, but this could be a solution for folks where increasing max node memory is not possible or effective.

I added this viteFinal config to the (otherwise default) web/.storybook/main.ts:

import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'

import { getPaths, importStatementPath } from '@redwoodjs/project-config'

const redwoodProjectPaths = getPaths()

const config: StorybookConfig = {
  framework: 'storybook-framework-redwoodjs-vite',

  stories: [
    `${importStatementPath(
      redwoodProjectPaths.web.src
    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
  ],

  viteFinal: (config) => {
    return {
      ...config,
      build: {
        ...config.build,
        sourcemap: false,
      },
    }
  },

  addons: ['@storybook/addon-essentials'],
}

export default config

The next thing I’d like to look at is if I can fiddle with the mock-@redwoodjs/router and mock-@redwoodjs/auth to see if that has any effect (or if this is just some general Vite thing).

1 Like
3

Hey @cdubz! @arimendelow Do you have any ideas around this one?

1 Like
4

This seems to be a Vite issue. The bug @cdubz posted links to this: vite build error: out of memory · Issue #2433 · vitejs/vite · GitHub — it has nearly 500 upvotes :money_mouth_face:

On investigating the mocks, @cdubz let us know if you need help! To get you started, these plugins are here:

Both of these are then applied here: redwood/packages/storybook/src/preset.ts at 9de6959bb7c0c654f3302a0b2a3081a7095f3293 · redwoodjs/redwood · GitHub

It’s interesting that it’s emitting those errors for your project, but not otherwise. Let us know if you’re able to put together a repro or if there’s anything we can do to help with your investigation!

1 Like
5

Update: I haven’t looked at the mocks yet, but after upgrading to v8.3.0 the build completes without changing the memory limit. There is a still the same crazy amount of messages about sourcemaps, so maybe that is unrelated and harmless :thinking:

1 Like
6

Oh yay, good to hear it’s at least working!! :slight_smile: