redwood: Cannot find module '@redwoodjs/testing/web' when running Storybook

OK FOUND ISSUE! This solves both issues.

Tried a bunch of theories, but pulling on the thread from this issue, it looks like this happens when storybook for some reason picks webpack 4 accidentally (extrapolating from this thread) - When there are multiple versions of webpack 5 (in our case, redwood is using 5.70.0, but storybook wants 5.71.0) - see this output from yarn why

gitpod /workspace/redwoodblog-tutorial-typescript (main) $ yarn why webpack
├─ @redwoodjs/core@npm:1.0.0
│  └─ webpack@npm:5.70.0 [b5b1e] (via npm:5.70.0 [b5b1e]) 👈
│
├─ @storybook/builder-webpack4@npm:6.4.19
│  └─ webpack@npm:4.46.0 (via npm:4)
.
.

│  └─ webpack@npm:5.71.0 (via npm:^5.9.0)  👈
│
├─ @storybook/manager-webpack5@npm:6.4.19 [7f8c1]
│  └─ webpack@npm:5.71.0 [0dc39] (via npm:^5 [0dc39]) 👈
.
.

The solution for now, is to force the resolution of webpack 5, but we should issue a patch with the updated webpack version so theres no mismatch. Note that its not the updated webpack that solves the problem, its definitely a storybook thing, because even if you set the webpack version to 5.70.0 it still works fine

In your root package.json

  "resolutions": {
    "webpack": "5.71.0"
  },

Walkthrough here: https://s.tape.sh/fMzJpPyA

Confirming that upgrading to the latest canary fixes it in the reproduction Gitpod!

Will be included in v1.0.1

After trying quite a few things to fix this, I have come up with the following workaround.

1. modify the web/jsconfig.json to match the https://github.com/redwoodjs/redwood-tutorial/blob/main/web/jsconfig.json project.
2. rm -r ./redwood
3. yarn rw storybook

I’m not familiar enough with the project to know if all three are neccessary, But I am able to happily continue my tutorial experience now that I have done the above modifications.

Thanks @jtoar, then i am “glad” in the sense that this may actually be helpful.

I ran into another bump when i synced my repo further with the redwood tutorial repo. I thought it was due to me changing the imports back to @redwoodjs/testing (removing /web) in https://github.com/Philzen/redwoodblog-tutorial-typescript/commit/16161a83ff2a7c4a129a06f2d7b07101f90cf632, but it actually happens when i sync the stories in https://github.com/Philzen/redwoodblog-tutorial-typescript/commit/28f4697ba7dd41f3e96654ef307119eecd2c2aa8.

I could bisect it down to the offending line being:

  mockCurrentUser({ id: 42, email: 'rob@redwoodjs.com' })

As soon as this line appears in my story, storybook won’t even startup (or just crash on recompilation if already running) with:

webpack building...
70% sealing finish module graph/home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:165
		return moduleGraph.getParentModule(this).buildMeta.strictHarmonyModule
		                                        ^

TypeError: Cannot read properties of undefined (reading 'buildMeta')
    at HarmonyImportSpecifierDependency._getEffectiveExportPresenceLevel (/home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:165:43)
    at HarmonyImportSpecifierDependency.getWarnings (/home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:176:32)
    at Compilation.reportDependencyErrorsAndWarnings (/home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:3132:24)
    at /home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2729:28
    at eval (eval at create (/home/phil/prog/testing/rwb-tutorial/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:50:1)
    at /home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
    at /home/phil/prog/testing/rwb-tutorial/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/phil/prog/testing/rwb-tutorial/node_modules/neo-async/async.js:2850:39)
    at /home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18
    at /home/phil/prog/testing/rwb-tutorial/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/phil/prog/testing/rwb-tutorial/node_modules/neo-async/async.js:2850:39)
    at /home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16
    at Hook.eval [as callAsync] (eval at create (/home/phil/prog/testing/rwb-tutorial/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/phil/prog/testing/rwb-tutorial/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.finish (/home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2714:28)
    at /home/phil/prog/testing/rwb-tutorial/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1182:19

Not sure if this is related, but i have a hunch it might as that function is declared via web-test-globals.d.ts.

I pulled down your repo (thanks for the reproduction!) and could reproduce this. I tried a few basic things (deleting yarn.lock, etc) to no avail. I’ll keep debugging 🤔