code example: (see code block above)
## The current behavior
with the shorthand syntax, I get this error:
Failed to compile.
/tmp/my-app/src/App.tsx
TypeScript error in /tmp/my-app/src/App.tsx(6,5):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. TS2686
4 | function App() {
5 | return (
6 | <>
| ^
7 |
8 |
9 |
If I change the <> to React.Fragment, I get this error:
Failed to compile.
/tmp/my-app/src/App.tsx
Line 13:3: Prefer fragment shorthand over React.Fragment react/jsx-fragments
Search for the keywords to learn more about each error.
If I change the <> to React.Fragment and add an eslint disable rule:
Failed to compile.
/tmp/my-app/src/App.tsx
TypeScript error in /tmp/my-app/src/App.tsx(6,5):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. TS2686
4 | function App() {
5 | return (
> 6 | <Fragment>
| ^
7 | <div className="App">
8 | <header className="App-header">
9 | <img src={logo} className="App-logo" alt="logo" />
The expected behavior
react should display the spinning logo, and under the "Learn React" header, there should be text. In other words, no errors should occur when upgrading from react 16 to react 17.
strange: I get the error about React being a UMD global even in files where I don't use fragments. e.g.:
I added import React from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars to the top of my files that use fragments
I get no errors or warnings from the files with fragments in them
I get an error like this:
Failed to compile.
.../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx
TypeScript error in .../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx(2,4):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. TS2686
@sumanthratna I am in the same boat. It is definitely not isolated to Fragment. I've update my tsconfig to use the version from a new cra project bootstrapped with the new jsx compiler setup but getting this issue still
linking #9901 and https://github.com/microsoft/TypeScript/pull/39199. strangely enough, in my current project that uses TypeScript 4.0, I'm getting this error. I can't update to the TS 4.1 beta because CRA 4 complains when I do.
I've seen this with:
typescript projects
non-TS projects with react fragment
but I haven't seen this with NextJS 10, which uses React 17.
Yeah I totally believe it’s a bug. I’m currently swamped by the React work so I can’t look it into it soon but I’m hoping that the maintainers or the open source users like you can dig into it.
Yeah I totally believe it’s a bug. I’m currently swamped by the React work so I can’t look it into it soon but I’m hoping that the maintainers or the open source users like you can dig into it.
Yeah I totally believe it’s a bug. I’m currently swamped by the React work so I can’t look it into it soon but I’m hoping that the maintainers or the open source users like you can dig into it.
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.
I just tested using the same reproduction steps in the original post and it looks like this was fixed in 4.0.1. Closing; will reopen if anyone else still has this issue in 4.0.1
React version: 17.0.1
Steps To Reproduce
yarn create react-app my-app
(make sure react-scripts is 4.0.0 and react and react-dom are 17.0.1)src/App.tsx
(everything should still work)<>
(e.g.,src/App.tsx
should look like the following)function App() { return ( <>
Edit
Learn Reactsrc/App.tsx
and save to reload.); }
export default App;
Failed to compile.
/tmp/my-app/src/App.tsx TypeScript error in /tmp/my-app/src/App.tsx(6,5): 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. TS2686
It is a beta. You need to report it in CRA repo, not here. Moving.
Thanks for the reply @gaearon!
I think I'm misunderstanding something: Hasn't CRA v4.0.0 been officially released? (I believe the last CRA beta was 4.0.0-next.117)
Hmm. I assumed not but I haven’t checked. :D Let’s wait to hear from the maintainers.
strange: I get the error about React being a UMD global even in files where I don't use fragments. e.g.:
import React from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars
to the top of my files that use fragments.../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx TypeScript error in .../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx(2,4): 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. TS2686
@sumanthratna I am in the same boat. It is definitely not isolated to
Fragment
. I've update my tsconfig to use the version from a newcra
project bootstrapped with the new jsx compiler setup but getting this issue stilllinking #9901 and https://github.com/microsoft/TypeScript/pull/39199. strangely enough, in my current project that uses TypeScript 4.0, I'm getting this error. I can't update to the TS 4.1 beta because CRA 4 complains when I do.
I've seen this with:
but I haven't seen this with NextJS 10, which uses React 17.
It seems also reproducible with CRA only without TS that the React Fragment short form does not work. We experience that issue on the react-bootstrap repo: https://github.com/react-bootstrap/code-sandbox-examples/issues/135
Sounds for me like a bug, @gaearon
Yeah I totally believe it’s a bug. I’m currently swamped by the React work so I can’t look it into it soon but I’m hoping that the maintainers or the open source users like you can dig into it.
Will try to take a look later and dig into it.
Small update, it seems like the issue which we experienced is a different one, which is caused by CodeSandbox: https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic
Would be great if someone with more deeper knowledge could take a look too, feel myself not experienced enough with that topic.
I don't quite understand. The original report appeared to be about CRA. How can it be specific to CodeSandbox?
I think its a different error (at least mine) to the error which was reported, since if I run npm run / npm build locally it works.
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.
I just tested using the same reproduction steps in the original post and it looks like this was fixed in 4.0.1. Closing; will reopen if anyone else still has this issue in 4.0.1