storybook
storybook copied to clipboard
storybookjs
'React' refers to a UMD global
Describe the bug
Storybook files in tsx format show the following error: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead..
The same error does not come to other tsx files.
Clearly, It is an eslint error but we can find the correct way of solving it.
To Reproduce
❯ npx sb@next repro
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ 🤗 Welcome to sb repro! 🤗 │
│ │
│ Create a new project to minimally reproduce Storybook issues. │
│ │
│ 1. select an environment that most closely matches your project setup. │
│ 2. select a location for the reproduction, outside of your project. │
│ │
│ After the reproduction is ready, we'll guide you through the next steps. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
✖ 🌈 Select the repro framework › angular
Error: 🚨 Repro: please select a framework!
at repro (/Users/luisalaguna/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/cjs/repro.js:101:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
❯ cd ../
❯ npx sb@next repro
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ 🤗 Welcome to sb repro! 🤗 │
│ │
│ Create a new project to minimally reproduce Storybook issues. │
│ │
│ 1. select an environment that most closely matches your project setup. │
│ 2. select a location for the reproduction, outside of your project. │
│ │
│ After the reproduction is ready, we'll guide you through the next steps. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
✔ 🌈 Select the repro framework › react
✔ 📝 Select the repro base template › cra
✔ Enter the output directory … cra_reproducible
🏃 Running cra into /Users/luisalaguna/Projects/finbyte/mis/cra_reproducible
🏃 Starting for cra latest
🏗 Bootstrapping cra project (this might take a few minutes)
npm_config_user_agent=npm npx -p create-react-app@latest create-react-app cra_reproducible && cd cra_reproducible && echo "FAST_REFRESH=true" > .env && echo "SKIP_PREFLIGHT_CHECK=true" > .env
npm WARN exec The following package was not found and will be installed: create-react-app@latest
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in /Users/luisalaguna/Projects/finbyte/mis/cra_reproducible.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/eslint-plugin-react: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/luisalaguna/.npm/_logs/2022-08-30T11_19_02_410Z-debug-0.log
Aborting installation.
npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting cra_reproducible/ from /Users/luisalaguna/Projects/finbyte/mis
Done.
An error occurred while executing: `npm_config_user_agent=npm npx -p create-react-app@latest create-react-app cra_reproducible && cd cra_reproducible && echo "FAST_REFRESH=true" > .env && echo "SKIP_PREFLIGHT_CHECK=true" > .env`
🚨 Bootstrapping cra failed
🚨 Failed to create repro
Error: Error: command exited with code: 1:
at repro (/Users/luisalaguna/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/cjs/repro.js:172:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
System
❯ npx sb@next info
Environment Info:
System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 3.2.1 - ~/.nvm/versions/node/v16.15.1/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox: 103.0.2
Safari: 15.5
npmPackages:
@storybook/addon-actions: 6.5.10 => 6.5.10
@storybook/addon-essentials: 6.5.10 => 6.5.10
@storybook/addon-interactions: 6.5.10 => 6.5.10
@storybook/addon-links: 6.5.10 => 6.5.10
@storybook/builder-webpack5: 6.5.10 => 6.5.10
@storybook/manager-webpack5: 6.5.10 => 6.5.10
@storybook/node-logger: 6.5.10 => 6.5.10
@storybook/preset-create-react-app: 4.1.2 => 4.1.2
@storybook/react: 6.5.10 => 6.5.10
@storybook/testing-library: 0.0.13 => 0.0.13
Additional context Add any other context about the problem here.
I've had this issue for months, and it would be great if there was a solution.
It depends on your typescript configuration, whether files you include or not... complex to understand.
@SalahAdDin were you able to figure out a solution? If so what changes did you make. I have a pretty basic typescript setup and I'm using .stories.tsx for my Storybook files.
@SalahAdDin were you able to figure out a solution? If so what changes did you make. I have a pretty basic
typescriptsetup and I'm using.stories.tsxfor my Storybook files.
Either you remove all type paths so Typescript gets them itself, or you include the storybook path to the types option, I hope I remember it well.
@SalahAdDin do you have an example of what you mean? I tried this but still no luck, https://stackoverflow.com/questions/71677948/how-to-add-typescript-paths-to-storybook
@SalahAdDin do you have an example of what you mean? I tried this but still no luck, https://stackoverflow.com/questions/71677948/how-to-add-typescript-paths-to-storybook
In this option: if you remove all type paths, or you include the storybook path to its types.
@SalahAdDin, I've tried a few things and none of them are working...
- changed my
includeto be an empty array - installed
@storybook/typesand addednode_modules/@storybook/types/dist/index.d.tstoincludes - installed
@types/storybook-addon-jsx
@SalahAdDin do you have an example of what you mean? I tried this but still no luck, https://stackoverflow.com/questions/71677948/how-to-add-typescript-paths-to-storybook
In this option: if you remove all type paths, or you include the
storybookpath to its types.
Did you try removing types compilation option?
I figured out the issue, one of my nested tsconfig files had all of my storybook files in excludes, I removed that and now it's working! Thanks for helping me narrow down the issue.
I believe this is fixed in SB7, so I'm closing this. Please feel free to reopen if that's not the case!
Migration guide: https://storybook.js.org/migration-guides/7.0
I believe this is fixed in SB7, so I'm closing this. Please feel free to reopen if that's not the case!
Migration guide: storybook.js.org/migration-guides/7.0
I found this error in preview.tsx and it also doesn't work with my eslint.
@nekochan0122 I'm not sure if this is the same problem you're having, but in my preview.tsx I was getting this error:
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
Even though I don't have to do this in my stories, it seems to be necessary to explicitly import React in preview.tsx by adding this import statement at the top:
import React from 'react';
Still happening in preview.tsx with SB 7.4.0, all other .tsx files are fine so far…
Like @jbaldassari had to import React just for this.
Not putting more time into this, but it's really weird and I have no idea why this is happening.
Still happening in
preview.tsxwith SB 7.4.0, all other.tsxfiles are fine so far… Like @jbaldassari had to importReactjust for this. Not putting more time into this, but it's really weird and I have no idea why this is happening.
So, it requires to re-open this issue I guess.
I got a notification on this thread that someone posted a tsconfig.json workaround, but I don't see the comment here now. Maybe it was deleted? Anyway, whoever it was, thank you. I think this is a more elegant workaround because it also makes your other tsconfig settings apply to your storybook customizations:
tsconfig.json:
- "include": ["src"]
+ "include": ["src", ".storybook/*.tsx"]
With that change you can delete the react import from preview.tsx. So maybe this isn't a Storybook issue after all.
@jbaldassari Glad it helped you. I ended up removing it as it was a double edged sword in my case. It helped with the error but ended up adding files to my build (in my flow I am bundling and shipping a library to npm).
If make that change AND you have a js bundle that you are building, then I think that will mean that your library will contain likely useless storybook files.
Likely a way to get the benefit without the cons... but that for smarter souls than I.
ended up adding files to my build
Ah, that's interesting @vandercloak . So your storybook files were being included in the build? That's not ideal. I suppose that could also be an issue even if you're just building a UI because it might increase the bundle size. When I compile everything with this change, I'm not seeing any of my storybook files ending up in my build output directory, but maybe we're using different compilers/bundlers.