Compiling Error: Cannot read properties of null (reading 'useState')

bud
,
1

I’ve had this compiling error for several days. Even in projects without React. So I tried reproduce this error on original sage template and this was easier than I think, just copy and paste bud modules from project to sage template.

  ERROR  Cannot read properties of null (reading 'useState')

 node_modules/@roots/bud-support/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();

 - useState (node_modules/@roots/bud-support/node_modules/react/cjs/react.development.js:1622:21)
 - Compilation (file:///Users/marcinlis/Downloads/sage-main%202/node_modules/@roots/bud-dashboard/lib/views/compilation.js:12:35)
 - renderWithHooks (node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18)
 - mountIndeterminateComponent (node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13)
 - beginWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
 - beginWork$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14)
 - performUnitOfWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:18742:12)
 - workLoopSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18648:5)
 - renderRootSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18616:7)
 - performSyncWorkOnRoot (node_modules/react-reconciler/cjs/react-reconciler.development.js:18232:20)

Steps to reproduce:

  1. Use sage template from repo
  2. Remove yarn.lock
  3. Change dev dependcies to:
"devDependencies": {
    "@roots/bud": "6.21.0",
    "@roots/bud-eslint": "6.21.0",
    "@roots/bud-imagemin": "6.21.0",
    "@roots/bud-postcss": "6.21.0",
    "@roots/bud-prettier": "6.21.0",
    "@roots/bud-sass": "6.21.0",
    "@roots/bud-stylelint": "6.21.0",
    "@roots/bud-swc": "6.21.0",
    "@roots/bud-tailwindcss": "6.21.0",
    "@roots/eslint-config": "6.21.0",
    "@roots/sage": "6.21.0"
  }
  1. Just run npm install and npm run build
  2. Got the error

The problem also occurs on version 6.20.0, with which I had no problems for a long time.

I will be grateful if you fix the problem.

2

You’re removing yarn.lock but then running npm commands instead of yarn?

FYI this has been reported at [bug] Cannot read properties of null (reading 'useState') · Issue #2581 · roots/bud · GitHub

It seems like this bug might be specifically related to either npm and/or a specific Node version. If you stick with Sage’s defaults, using Yarn and Node v20, then you will not run into this bug.

3

A year ago, we had issues with Yarn and CI/CD in the company, and these problems did not occur with npm, so we switched to npm because everything worked fine with CI/CD as well as in the local environment.

Now, I have checked whether this problem occurs with Yarn and indeed, it does not show. However, with npm, I tested several versions and also updated the Node version to a newer one, but the problem still occurs across different versions.

At this point, we will be forced to switch back to Yarn.

Thank you for your help :star_struck:

4

After updating bud to version 6.23, out of curiosity I checked whether everything would work with a clean installation with package.json via npm and to my surprise, at quick check everything now works on npm as well.

If I notice any problems, I will let you know in this thread and eventually return to yarn.

5

It looks like this has been fixed in 6.22: 🩹 fix(patch): dashboard react error (useState) by kellymears · Pull Request #2595 · roots/bud · GitHub

If you don’t want to upgrade, you can run bud dev --no-dashboard.