Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
lockykeaney opened this issue Dec 15, 2022 · 6 comments
Labels
bug Something isn't working

Comments

@lockykeaney
Copy link

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.
@lockykeaney lockykeaney added the bug Something isn't working label Dec 15, 2022
@IanVS
Copy link
Member

IanVS commented Dec 15, 2022

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
Copy link
Author

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

@IanVS
Copy link
Member

IanVS commented Dec 15, 2022

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
Copy link
Author

lockykeaney commented Dec 15, 2022

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
Copy link
Member

IanVS commented Dec 16, 2022

Yep, that's the command.

@unional
Copy link

unional commented Jan 4, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants