Open lockykeaney opened 1 year ago
Hm, is it possible that something has been updated since the last time it was working? What version is @vitejs/plugin-react
in your project?
The react vite plugin uses babel for fast-refresh, and in vite 3 (vitejs/plugin-react 2) it also transforms jsx.
When I hit strange errors like this, sometimes re-generating my lockfile resolves conflicts between different versions, which is kind of what this seems like to me.
the other option you could try is to upgrade to storybook 7, which is now in beta. It automatically uses your vite.config.js, which can make it easier to keep your application and storybook in-sync.
yarn list @vitejs/plugin-react
shows @vitejs/plugin-react@2.2.0
which would be a sub-dependency because it's not actually in the package.json
. Do you think if I added a different version and then did a resolution it would work?
I'm always hesitant to regenerate the lockfile, as there are a few other products in the repo using it, which I don't really interact with so don't know what's going on there.
I was thinking I might just move to Storybook 7, as I won't be needed to deploy it to a production instance for at least 5 months. Then I can share the vite config between SB and another web app that I'll use vite for as well
Yes if you can try out an upgrade to 7.0 I would suggest giving that a try. Let me know if it's still broken afterwards. You could also try regenerating the lockfile to see if it fixes it, and just not check it in. Could help as a troubleshooting step at least.
Tried regenerating the lockfile and it wasn't that.
@IanVS could you suggest the best command to upgrade to a good version of SB7? npx storybook@next upgrade --prerelease
?
Yep, that's the command.
Does somewhere in builder-vite
force setting allowSyntheticDefaultImports
or esModuleInterop
to true regardless of the tsconfig?
That is probably the problem if the project is using Node16
or NodeNext
. Those setting must be off on those cases. I'm hitting a similar issue.
In my code, I am using react-use-websocket
and since I'm doing ESM, I have to turn those off and write my code as:
import ruw from 'react-use-websocket`
function Foo() {
ruw.default(...)
}
But then in Storybook it fails with ruw.default is not a function
btw, I'm using storybook@next
already.
What version of
vite
are you using?3.2.4
System info and storybook versions
"react": "17.0.2", "react-dom": "17.0.2", "@storybook/addon-actions": "^6.5.14", "@storybook/addon-essentials": "^6.5.14", "@storybook/addon-interactions": "^6.5.14", "@storybook/addon-links": "^6.5.14", "@storybook/addon-react-native-web": "^0.0.19", "@storybook/builder-vite": "^0.2.5", "@storybook/react": "^6.5.14",
Describe the Bug
Using Storybook for a UI-Component library as part of a mono-repo, using react-native and react-native-web for cross compatibility: main.js
Was working fine a few weeks ago when I finished off the config, but now I'm trying to launch storybook just in dev mode, and get an error from every stories file in project:
which from what I can discover is a function that is needed in the generation of the source maps
(0 , _genMapping.maybeAddMapping) is not a function
, and bubbles up from a long way down.There isn't type errors or anything in that story file, it's actually quite simple:
I tried adding
plugins: [react()]
because I thought it needed it based on thevite:react-babel
part, but that just threw the error that I'd doubled it up. Do I need to add settings for babel somehow? I thought the point of vite was to get rid of some of that overhead?We are using react-native for the components, and they transpiling them with react-native-web for browsers and for storybook, which has caused errors in the past but any errors relating to them have been fixed and this remains.
As I said at the top, it is part of a mono-repo, so maybe a dependency could be the issue, but with the error coming from plugin-react is there a way to track down the issue.
Unfortunately I can't create a minimal example as it's tightly linked to corporate code.
Link to Minimal Reproducible Example
No response
Participation