react: Bug: react.dev tutorial-tic-tac-toe sample project errors out in modern node versions

👍 - 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 🙂

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)

@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’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.

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.

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.

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: 'cssstyle@3.0.0',
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: 'data-urls@4.0.0',
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.

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.

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 😄

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>