[Bug] Internal server error:... (0 , _genMapping.maybeAddMapping) is not a function Plugin: vite:react-babel

[lockykeaney]

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

module.exports = {
  core: {
    builder: "@storybook/builder-vite",
  },

  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-react-native-web",
      options: {
        modulesToTranspile: ["react-native-reanimated"],
        babelPlugins: ["react-native-reanimated/plugin"],
      },
    },
    "@storybook/addon-actions",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        extensions: extensions,
        alias: {
          "react-native": "react-native-web",
        },
      },
      optimizeDeps: {
        esbuildOptions: {
          loader: { ".js": "jsx" },
          resolveExtensions: extensions,
        },
      },
    });
  },
};

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:

./packages/ui-components/.storybook/decorators.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Alertbox/AlertBox.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Button/Button.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Checkbox/Checkbox.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Card/Card.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/FieldLabel/FieldLable.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Chip/Chip.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Icon/icon.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/ListTable/ListTable.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/PageHero/PageHero.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
./packages/ui-components/src/components/Timeline/Timeline.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function

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.

16:01:21 [vite] Internal server error: ./packages/ui-components/src/components/Alertbox/AlertBox.stories.tsx: (0 , _genMapping.maybeAddMapping) is not a function
  Plugin: vite:react-babel
  File: ./packages/ui-components/src/components/Alertbox/AlertBox.stories.tsx
      at SourceMap.mark (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/source-map.js:45:37)
      at Buffer._mark (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/buffer.js:185:60)
      at Buffer._append (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/buffer.js:168:12)
      at Buffer.append (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/buffer.js:97:10)
      at Generator._append (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:197:15)
      at Generator.word (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:100:10)
      at Generator.VariableDeclaration (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/generators/statements.js:241:8)
      at Generator.exactSource (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:169:22)
      at Generator.print (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:347:10)
      at Generator.printJoin (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:409:12)
      at Generator.printSequence (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:472:17)
      at Generator.Program (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/generators/base.js:34:8)
      at Generator.exactSource (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:169:22)
      at Generator.print (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:347:10)
      at Generator.File (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/generators/base.js:17:8)
      at Generator.exactSource (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:169:22)
      at Generator.print (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:347:10)
      at Generator.generate (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/printer.js:49:10)
      at Generator.generate (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/index.js:21:18)
      at generate (./node_modules/@vitejs/plugin-react/node_modules/@babel/generator/lib/index.js:84:14)
      at generateCode (./node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transformation/file/generate.js:46:39)
      at run (./node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transformation/index.js:39:33)
      at run.next (<anonymous>)
      at transform (./node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transform.js:22:41)
      at transform.next (<anonymous>)
      at step (./node_modules/gensync/index.js:261:32)
      at ./node_modules/gensync/index.js:273:13
      at async.call.result.err.err (./node_modules/gensync/index.js:223:11)
      at ./node_modules/gensync/index.js:189:28
      at ./node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
      at ./node_modules/gensync/index.js:113:33
      at step (./node_modules/gensync/index.js:287:14)
      at ./node_modules/gensync/index.js:273:13

There isn't type errors or anything in that story file, it's actually quite simple:

import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Text } from "@kolmeo/ui-core";

import AlertBox from "./";

export default {
  title: "Components/AlertBox",
  component: AlertBox,
} as ComponentMeta<typeof AlertBox>;

const Template: ComponentStory<typeof AlertBox> = (args) => <AlertBox {...args} />;
export const Default = Template.bind({});
Default.args = {
  variant: "warning",
  content: <Text>This is an Alert Box</Text>,
};

I tried adding plugins: [react()] because I thought it needed it based on the vite: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

• I am willing to submit a pull request for this issue.

[IanVS]

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.

[lockykeaney]

yarn list @vitejs/plugin-react shows @vitejs/[email protected] 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

[IanVS]

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.

[lockykeaney]

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?

[IanVS]

Yep, that's the command.

[unional]

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.