Lazy compile with storybook preset causes double build on initialization

[devtreehouse]

I tried to do react lazy with storybook 5.x preset, and use lazy compile webpack plugin. The result is flaky.
Sometime it build once, and works (20% of the time), other times it will finish lazy build, and immediately initiate another build.
Aside from default storybook webpack preset, we are using ts-loader and a bunch of other loaders, we are not using any additional plugins though.

It seems like on the second build, it's trying to build all React.Lazy bundles.

In our story files, we did something like

stories.add('StoryName', () => (<Suspense fallback={</>}><LazyLoadedContent/></Suspense>)

Any idea why this might be happening?

[liximomo]

Could you provide a reproduction-repo?

[devtreehouse]

Sure! Ran into some setup issues when duplicating fresh repo. Reaching out to storybook team first.

[devtreehouse]

There was an issue I ran into trying to repro. But found out it doesn't even work with most recent storybook.
storybookjs/storybook#10156
Still waiting for their response, but thought it might help to post it here as well, as other plugins seem to work fine but not lazy-compile-webpack-plugin

[devtreehouse]

@liximomo I think I have some new information. Reached out to storybook team, and they are using https://www.npmjs.com/package/virtual-module-webpack-plugin
in their latest version.
This means their file is sometimes generated in the cache and not available on the disk. In your code

async _recompile(filename) {
    return new Promise((resolve, reject) => {
      const now = new Date();

      // trigger watcher to recompile
      fs.utimes(filename, now, now, err => {
        if (err) {
          return reject(err);
        }

        resolve();
      });
    });
  }

utime relies on the file system on found modules. And that is causing it to be incompatible with newer storybook version.
This is not super related to the issueI raised. If you prefer I raise it as a separate issue for semantic I could.
For now I'll focus on duplicating this issue with an older version of storybook (if that's possible)

[devtreehouse]

@liximomo I have successfully duplicated the bug in the repository:
https://github.com/devtreehouse/StorybookLazyCompile

To start the app, clone the repo, do yarn, and then yarn storybook. Storybook will spin up.
Sometimes the build only does once, sometimes it does twice or even 3 times.

One time:

Three times:

In our production repo, one build takes 2 minutes, so... rebuilding means waiting for 2 more minutes randomly, that means it defeats the purpose of saving time on lazy compile.

Additional context:
In our main app, I realized that on the second build, it goes and try to do a full build, that means all react suspense (code splitted) code will be built. But it doesn't happen on the first time.
Also I noticed the first build is not success, as some images on our webpage are not being displayed. I think it might be webpack trying to make up for it, but it never happens without this plugin enabled.

Would greatly appreciate it if you can take a look. I really want to use this in our official dev environment

[devtreehouse]

Reopening a new issue as too much irrelevant information is in this thread