SB 7 - Failed to build the preview

[neat vapor]

Hey everyone and thank you in advance for anyone who can help!

I'm working on a component library built with Vanilla Extract and I'm able to get SB to run locally, but fails to build.

I get a bunch of Unsupported source map comment warnings and then the "Failed to build the preview" error hits...

I talked with an engineer at Chromatic and he took a look at the repo and was able to run storybook locally just fine and also saw the errors I'm getting when trying to build.

I shared my tsconfig.json, package.json, main.js and preview.js., along with the error I'm seeing.

I'm not sure what else to do at this point so any ideas are greatly welcomed!

[pulsar meadow]

Not sure if this is causing the issue but I see that you have some storybook packages at 6.5 still. You should remove those from your package.json and re-install.

[neat vapor]

Just unistalled @storybook/manager-webpack5 and then installed to be at the current 7.0.0-alpha.10 but I'm still getting the same errors

[pulsar meadow]

That's a very old alpha version, have you tried updating to the latest beta? npx sb@next upgrade --prerelease

Wait most of your packages are using the beta. You shouldn't have @storybook/manager-webpack5 at all, fwiw

[neat vapor]

Hmmm 🤔 I’ll try removing that and giving it a whirl

[pulsar meadow]

ok, there could still be something else going on, I haven't used webpack in a while, and that error is coming from terser. But it seems like maybe a babel config isn't correct, maybe? It's trying to transform ... into __spreadProps maybe? You might try looking at where __spreadProps is coming from, and why it's not defined.

[neat vapor]

Everything I'm searching for __spreadProps is telling me to install yet another package. Which I tried and it did nothing.

[neat vapor]

Unfortunately, pretty much all the resources I can find for using Storybook with Vanilla-Extract are using webpack. I just can't seem to find anything that isn't using webpack, otherwise I'd absolutely try it

[pulsar meadow]

Are you able to share a link or create a reproduction, maybe?

[neat vapor]

I can send you an invite to the repo from GitHub

[pulsar meadow]

I can try taking a quick look, but I don't have a ton of time, unfortunately.

[neat vapor]

I understand. I thoroughly appreciate your help on this! I sent you in an invite so you should be able to see the repo now

I’ve been trying to pull my company toward using vite and moving away from webpack and cra

[pulsar meadow]

The unsupported source map comment seems to come from an old version of esbuild from @vanilla-extract/integration perhaps.

I'll try a resolution override to see if that helps...

ok, no more messages in dev at least. Will try building now.

[neat vapor]

🤯

[pulsar meadow]

(https://github.com/egoist/esbuild-register/issues/11 is what clued me in)

yep builds and loads fine now.

diff --git a/package.json b/package.json
index 0c371d4..3e17a0e 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,9 @@
     "typescript": "^4.8.4",
     "webpack": "^5.75.0"
   },
+  "overrides": {
+    "esbuild": "0.14.54"
+  },
   "browserslist": [
     "defaults"
   ],

sent a pr

[neat vapor]

YOU’RE THE MAN!!!!!

[pulsar meadow]

haha, happy I could help

[neat vapor]

I wanna buy you a coffee or a beer haha I’ve been at this for the past 9 hours and 6 hours on this particular error

[pulsar meadow]

😬 sorry I couldn't help sooner and save you that time. I do have sponsorships set up on my GitHub if you're feeling overly generous. 😉

[neat vapor]

Done!

Thank you again!