facebook
Bug: react.dev tutorial-tic-tac-toe sample project errors out in modern node versions
Following the step by step instructions for tutorial-tic-tac-toe on react.dev results in errors that make the tutorial impossible to continue.
React version: "react": "^18.0.0", (as specified in package.json)
Node version: 20.5.1
Steps To Reproduce
Follow the instructions for using your local development environment at https://react.dev/learn/tutorial-tic-tac-toe#setup-for-the-tutorial and proceed through the five steps:
- Install Node.js
- In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose File > Export to ZIP in that menu to download an archive of the files locally
- Unzip the archive, then open a terminal and cd to the directory you unzipped
- Install the dependencies with npm install
- Run npm start to start a local server and follow the prompts to view the code running in a browser
When running npm start, see errors in the console, and in the browser:
The process works as intended when using node versions 15 or lower, but fails in the way described above in 16 and above, including the latest, v20
If the intention is that the tutorial files should be run in an outdated version of node, that should be specified up front in the tutorial docs, and enforced in the source code files provided, e.g.
"engines" : {
"node" : "<=15"
}
The current behavior
The application errors out instead of running properly, with no useful error message for the user indicating that this is a problem with the node version.
The expected behavior
The application should not error out, it should run properly, or else should properly notify the user that their node version is incorrect for this codebase.
@mattlohkamp Adding an import statement to import React in App.js fixes this issue for newer versions of node. my current node version is 18.17.0.
@tusharrana786 - confirmed, updating App.js to
import React from "react";
export default function Square() {
return <button className="square">X</button>;
}
does fix the problem, works fine in latest version of node (v20.5.1)
so it seems like it should be easy enough to address this issue by updating the source code provided in the tutorial?
I can open a different ticket for it, but this is not the only node version related problem with the tutorial code - very nearly the next step instructs you to add a fragment like so:
import React from "react";
export default function Square() {
return (
<>
<button className="square">X</button>
<button className="square">X</button>
</>
);
}
which results in an error in node v20 -
Syntax error: Unexpected token (24:5)
but works fine in node v15.
I'll go ahead and keep walking through the tutorial steps, but this does seem like it's going to require a bit of work to dig out version incompatibilities. This is the first tutorial that users are directed to after landing on the site, so it's a bit worrisome how easy it is to run into these roadblocks, without much in the way of warning as to what's causing the issues.
@mattlohkamp i believe this error is caused by babel not by node, the app currently uses babel 6.26.3 which does not support the shorthand syntax for react fragments as mentioned in the article below https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax possible solution might be updating the babel version used in the application.
well it might be a coincidence, but node v20 fails on the shorthand fragment syntax, while node v15 works just fine - maybe the node version has implications for how babel functions, or which version of babel is installed as a dependency somehow?
It might be the case, can't find any conclusive evidence to support the statement but i have verified the fact that it's working fine for nodev15 and under.
I am brand new to react and js and it is funny that all I hear about is how react projects are a dependency nightmare and that projects break all the time. The first tutorial I try and it is broken due to changes in how to approach react development.
I concur that adding the import statement is a quick fix - but it is the same problem that I see over and over: a quick fix.
It is my understanding that the latest versions of react do not require the import statement. In an attempt to follow what I could online, I followed https://kinsta.com/knowledgebase/react-must-be-in-scope-when-using-jsx/ which suggested the following additions to the package.json file:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
},
This however did not work. After deleting node_modules and trying again, which failed the same way, so I attempted to npm install react-scripts@latest which then caused the following:
113 vulnerabilities (11 low, 64 moderate, 28 high, 10 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues, run:
npm audit fix --force
And running that did not work:
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 5.0.1,which is a SemVer major change.
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /home/qwert/code/react/tictactoe/node_modules/babel-loader
npm ERR! dest /home/qwert/code/react/tictactoe/node_modules/.babel-loader-hpLZW4ai
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/home/qwert/code/react/tictactoe/node_modules/babel-loader' -> '/home/qwert/code/react/tictactoe/node_modules/.babel-loader-hpLZW4ai'
Then subsequent commands would error out with:
npm install react@latest react-dom@latest
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=14' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=14' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
...
I was only able to remedy the situation by nuking the changes I had made and then following the suggestion here of adding the import React from "react"; line to App.js.
I can see why the quick fix is tempting, after all, you simply just add the one line and the project works again. However, there is something deeper that is broken in this tutorial as it requires a hack to allow "modern" react development.
not sure if it is the same bug or a different one since it is about versions. Following the tutorial, I am unable to use the more modern fragment syntax:
Failed to compile.
./src/App.js
Syntax error: Unexpected token (5:5)
3 | export default function Square() {
4 | return (
> 5 | <>
| ^
6 | <div className="board-row">
7 | <button className="square">X</button>
8 | <button className="square">X</button>
My workaround is to not use <></> but to use <div></div>
Yep, I ran into that issue with fragments as well. I think the more proper workaround would be to use the full template tag rather than the abbreviated one - <React.Fragment></React.Fragment> - if your goal is still to use fragments.
Update package.json.
Remove dev-dependency.react-scripts
// `dependencies.react-scripts` specifies version `5.0.0` which has the updates needed to not used the import
- "devDependencies": {
- "react-scripts": "1.0.0"
- },
Add browserlist configuration
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
Optionally update react, react-dom and react-scripts to latest.
// package.json
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
},
"main": "/index.js",
"name": "vy6j3f",
"description": null,
"version": "0.0.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Source (old docs): https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html Also, this seems to be part of https://github.com/reactjs/react.dev repository (not sure where the actual zip lives though)
👍 - the new project appears to be misconfigured and breaks when you follow the directions in the tutorial. I would advocate for this to be fixed ASAP; it's relatively trivial and it's blocking new engineers from adopting React (not to mention leaving a very bad impression).
@tusharrana786 - if you're intending to fix this, offering quick fixes is well and good, but the real fix has to be updating the docs or sample project to work as expected 🙂
Interesting the above comment @sahiltalwar88. I have just started to learn React and already quite dismayed by it (first tutorial after spending more than an hour trying to get this to work). If the maintainers (which I hope is still present) think this little of the basic onboarding (which I really hope is just a coincidence - although considering it seems to be the case for several versions of Node by now), I wonder how bad the rest of the documentation is maintained. Maybe best to look at another framework?
I updated the package.json as described by @victor-duarte and this fixed the first two issues with the missing import and invalid <> element.
FWIW that hasn't been my experience so far @dietervdwes; most of the docs are quite good and this is an outlier. Don't be deterred 😄
This appears to be a bug in CodeSandbox, which we'll report to them.
For future reference, please report React website bugs to the React website repository: https://github.com/reactjs/react.dev/
This repository is for React bugs, and so unfortunately unrelated things can get missed here.
If the maintainers (which I hope is still present) think this little of the basic onboarding (which I really hope is just a coincidence - although considering it seems to be the case for several versions of Node by now), I wonder how bad the rest of the documentation is maintained. Maybe best to look at another framework?
The issue here is that the service we use for hosting sandboxes has made a change that makes "download to ZIP" insert an incorrect version of the dependency. It is not a bug in React, it is not a bug in the React website, and it is not due to incorrect instructions or Node versions. It is a mistake in a third-party service, which — thanks to the report — we have now reported to them. I'm sorry we didn't see it earlier. As you might have guessed, at the time this tutorial was written, this bug in the "download to ZIP" feature of CodeSandbox did not exist yet.
@gaearon Have you received any updates from CodeSandbox? Can we close this issue because all the required action is done on React's end? Or are you waiting for CodeSandbox to fix their bug before closing this issue so other React users aren't confused?
Thanks!
Thanks for this post! It was really frustrating to spend hours to find out what am I doing wrong. It's not how a very beginner tutorial should look like I guess. 😁
I've tested this and it is working for both the current Codesandbox editor download and the Beta editor. If you're still seeing issues with this, please file an issue in the docs repo with information about your environment and the specific steps you're doing and we can re-open to investigate.
