Closed
Description
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)- remove the React import in
src/App.tsx(everything should still work) - add in a random
<>(e.g.,src/App.tsxshould look like the following)
import logo from './logo.svg';
import './App.css';
function App() {
return (
<>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
physics test was bad
</>
);
}
export default App;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 | <div className="App">
8 | <header className="App-header">
9 | <img src={logo} className="App-logo" alt="logo" />
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.