roots / bud

High-performance build system that supports SWC, esbuild, and Babel
https://bud.js.org/
MIT License
318 stars 38 forks source link

[bug] Cannot read properties of null (reading 'useState') #2581

Open JUVOJustin opened 3 weeks ago

JUVOJustin commented 3 weeks ago

Agreement

Describe the issue

Whenever running development or build the function errors with Cannot read properties of null (reading 'useState').

Full console Output

 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 (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)

Expected Behavior

Bundeling assets

Actual Behavior

Errors and does not bundle assets correctly

Steps To Reproduce

It is occurring only with one project. On the exact same vm i have another bud project with the very same setup which works as it is supposed to. Also, it does not matter which other dependencies are added. Once bud is added even if it is the only dependency, the error occurs.

version

any of the later versions tested with 6.21 and 6.20

Logs

[build] › ✔  defined: resolve (object)
[build] › ✔  configuration built
[project] › debug mode disabled. skipping write.
[webpack.cache.PackFileCacheStrategy] restore cache container: 24.76396 ms
[webpack.cache.PackFileCacheStrategy] check build dependencies: 67.966213 ms
[webpack.cache.PackFileCacheStrategy] restore cache content metadata: 0.83375 ms
[webpack.cache.PackFileCacheStrategy] starting to restore cache content 0 (136 KiB) because of request to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|[secure]/resources|request=|/frontend/js/app.js
[webpack.cache.PackFileCacheStrategy] restore cache content 0 (136 KiB): 18.291085 ms
[@roots/bud-extensions/webpack-lifecycle-plugin] › compilation completed: 455cf959f901433a
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: manifest.json => dist/manifest.json
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: js/runtime.js => dist/js/runtime.js
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: css/frontend.css => dist/css/frontend.css
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: entrypoints.json => dist/entrypoints.json
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: css/admin.css => dist/css/admin.css
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: js/frontend.js => dist/js/frontend.js
[@roots/bud-extensions/webpack-lifecycle-plugin] › asset emitted: js/admin.js => dist/js/admin.js
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  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 (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)

[IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 0s.
[module] › resolutions unchanged. skipping write.

Configuration

/**
 * Build configuration for bud.js
 * @param {import('@roots/bud').Bud} bud
 */
export default async bud => {
    /**
     * The bud.js instance
     */
    bud

        /**
         * Set the project source directory
         */
        .setPath(`@src`, `resources`)

        /**
         * Set the application entrypoints
         * These paths are expressed relative to the `@src` directory
         */
        .entry({
            "frontend": [`/frontend/js/app.js`, `/frontend/scss/app.scss`], // [`./sources/app.js`, `./sources/app.css`]
            "admin": [`/admin/js/app.js`, `/admin/scss/app.scss`]
        })

        .provide({
            jquery: ['$', 'jQuery'],
        })

        /**
         * Copy static assets from `sources/static` to `dist/static`
         */
        .assets({
            from: bud.path(`@src/static`),
            to: bud.path(`@dist/static`),
            noErrorOnMissing: true,
        })
        .splitChunks()
        .minimize(bud.isProduction)
        .proxy(false) // Disable since we are using ddev
}

Relevant .budfiles

No response

retlehs commented 3 weeks ago

What are the minimal reproduction steps for this issue? I'm not seeing any actionable instructions provided

JUVOJustin commented 3 weeks ago

@retlehs as i said, this only happens in this specific project. Feel free to clone it here: https://github.com/JUVOJustin/dynamic-forms. You can also see the latest action run tried building the assets, which failed for the same reason. I honestly cannot tell you how to reproduce this in another fresh project.

However, the error is very likely caused by bud since i already removed all other configs and dependencies and the same error keeps occurring as long as bud is installed.

JUVOJustin commented 2 weeks ago

I did some further digging. All of our projects are created using this boilerplate: https://github.com/JUVOJustin/wordpress-plugin-boilerplate/. It uses bud.js 6.20 and comes with a package-lock.json. When using the boilerplate exclusively with npm install bud works.

When upgrading bud.js either via npm update or by changing the version string and running npm install the mentioned error occurs. When downgrading back to 6.20 some packages are still changed when comparing the package-lock.json with the initial one from the boilerplate.

I am not the most familiar with JS, so for further debugging I would appreciate some guidance. To me from a more or less uneducated standpoint this seems to be an issue with any of the dependencies changed in 6.21, which due to some version constraints also gets not downgraded/removed when changing back to an older bud version.

The good thing is, that copying the boilerplates package-lock.json and running npm install does seem to be a workaround for downgrading.

acrobertson commented 2 weeks ago

I'm encountering this same issue in my project, and I was able to reproduce it by simply running npx create-bud-app (See Screenshot 1) and then immediately running the build command in the project. (See Screenshot 2.)

In case it's helpful, here's the full output of npx bud doctor:

View bud doctor output ``` bud-react-error-repro Completed a dry run of your project's build (executed in 0.33 seconds). Node ✔ v20.10.0 Platform ✔ darwin Mode production Version compatibility ✔ @roots/bud-api meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-build meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-cache meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-dashboard meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-extensions meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-framework meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-hooks meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-server meets requirements (required: 6.21.0, installed: 6.21.0) ✔ @roots/bud-support meets requirements (required: 6.21.0, installed: 6.21.0) Project paths project: /Users/alecrobertson/scratchpad/bud-react-error-repro input: @project/src output: @project/dist storage: /Users/alecrobertson/Library/Caches/bud-nodejs/7APd-6vU1tjCCt3eMND8ddVVU24 Configuration files ./.gitignore ./README.md ./bud.config.ts (bud config) ./package.json ./tailwind.config.ts ./tsconfig.json ./types.d.ts Environment variables _=/Users/alecrobertson/scratchpad/bud-react-error-repro/node_modules/.bin/bud __CF_USER_TEXT_ENCODING=0x1F5:0x0:0x0 __CFBundleIdentifier=com.github.wez.wezterm BROWSERSLIST_IGNORE_OLD_DATA=true COLOR=0 COLORTERM=truecolor COMMAND_MODE=unix2003 DDPM_INSTALL_MODE=NULL EDITOR=vi -e HOME=/Users/alecrobertson HOMEBREW_CELLAR=/opt/homebrew/Cellar HOMEBREW_PREFIX=/opt/homebrew HOMEBREW_REPOSITORY=/opt/homebrew INFOPATH=/opt/homebrew/share/info:/opt/homebrew/share/info: INIT_CWD=/Users/alecrobertson/scratchpad/bud-react-error-repro INS_Autostartup=none INS_DESKTOPICON=NULL INS_DisableCA=none INS_InstallFeature=none INS_LOCKUPDATE=none INS_NetworkKVM=none INS_NetworkKVMAutoConnect=none INS_NetworkKVMContentTransfer=none INS_NetworkKVMContentTransferPort=none INS_NetworkKVMIncomingPort=none INS_NetworkKVMOutgoingPort=none INS_NotifyUpdate=none INS_NOUPDATE=none INS_TelemetryConsent=none LANG=en_US.UTF-8 LaunchInstanceID=52638BD4-F6CA-4F1B-920F-31485B88BC4C LESS=-R LOGNAME=alecrobertson LSCOLORS=Gxfxcxdxbxegedabagacad MANPATH=/Users/alecrobertson/.nvm/versions/node/v20.10.0/share/man:/Users/alecrober tson/.nvm/versions/node/v18.19.0/share/man:/Users/alecrobertson/.nvm/versions/node/ v20.10.0/share/man:/opt/homebrew/share/man:/usr/share/man:/usr/local/share/man:/Use rs/alecrobertson/.nvm/versions/node/v20.10.0/share/man:/opt/homebrew/share/man:: NODE=/Users/alecrobertson/.nvm/versions/node/v20.10.0/bin/node NODE_ENV=production npm_command=exec npm_config_cache=/Users/alecrobertson/.npm npm_config_global_prefix=/Users/alecrobertson/.nvm/versions/node/v20.10.0 npm_config_globalconfig=/Users/alecrobertson/.nvm/versions/node/v20.10.0/etc/npmrc npm_config_init_module=/Users/alecrobertson/.npm-init.js npm_config_local_prefix=/Users/alecrobertson/scratchpad/bud-react-error-repro npm_config_node_gyp=/Users/alecrobertson/.nvm/versions/node/v20.10.0/lib/node_modul es/npm/node_modules/node-gyp/bin/node-gyp.js npm_config_noproxy= npm_config_npm_version=10.2.5 npm_config_prefix=/Users/alecrobertson/.nvm/versions/node/v20.10.0 npm_config_user_agent=npm/10.2.5 node/v20.10.0 darwin arm64 workspaces/false npm_config_userconfig=/Users/alecrobertson/.npmrc npm_execpath=/Users/alecrobertson/.nvm/versions/node/v20.10.0/lib/node_modules/npm/ bin/npm-cli.js npm_lifecycle_event=npx npm_lifecycle_script=bud npm_node_execpath=/Users/alecrobertson/.nvm/versions/node/v20.10.0/bin/node npm_package_engines_node=>=16 npm_package_json=/Users/alecrobertson/scratchpad/bud-react-error-repro/package.json npm_package_name=bud-react-error-repro NVM_BIN=/Users/alecrobertson/.nvm/versions/node/v20.10.0/bin NVM_CD_FLAGS=-q NVM_DIR=/Users/alecrobertson/.nvm NVM_INC=/Users/alecrobertson/.nvm/versions/node/v20.10.0/include/node PAGER=less PATH=/Users/alecrobertson/scratchpad/bud-react-error-repro/node_modules/.bin:/Users /alecrobertson/scratchpad/bud-react-error-repro/node_modules/.bin:/Users/alecrobert son/scratchpad/node_modules/.bin:/Users/alecrobertson/node_modules/.bin:/Users/node _modules/.bin:/node_modules/.bin:/Users/alecrobertson/.nvm/versions/node/v20.10.0/l ib/node_modules/npm/node_modules/@npmcli/run-script/lib/node-gyp-bin:/Users/alecrob ertson/.nvm/versions/node/v20.10.0/bin:/Users/alecrobertson/.nvm/versions/node/v18. 19.0/bin:/Users/alecrobertson/.nvm/versions/node/v20.10.0/bin:/Users/alecrobertson/ Library/pnpm:/Users/alecrobertson/.emacs.d/bin:/Users/alecrobertson/.composer/vendo r/bin:/opt/homebrew/opt/mysql@5.7/bin:/Users/alecrobertson/.orbstack/bin:/opt/homeb rew/bin:/opt/homebrew/sbin:/Users/alecrobertson/.volta/bin:/usr/local/bin:/System/C ryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryp texd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/code x.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootst rap/usr/appleinternal/bin:/Library/Apple/usr/bin:/usr/local/go/bin:/Users/alecrober tson/.nvm/versions/node/v20.10.0/bin:/Users/alecrobertson/.cargo/bin:/Users/alecrob ertson/.antigen/bundles/robbyrussell/oh-my-zsh/lib:/Users/alecrobertson/.antigen/bu ndles/robbyrussell/oh-my-zsh/plugins/direnv:/Users/alecrobertson/.antigen/bundles/r obbyrussell/oh-my-zsh/plugins/git:/Users/alecrobertson/.antigen/bundles/robbyrussel l/oh-my-zsh/plugins/macos:/Users/alecrobertson/.antigen/bundles/robbyrussell/oh-my- zsh/plugins/npm:/Users/alecrobertson/.antigen/bundles/robbyrussell/oh-my-zsh/plugin s/rust:/Users/alecrobertson/.antigen/bundles/robbyrussell/oh-my-zsh/plugins/wp-cli: /Users/alecrobertson/.antigen/bundles/robbyrussell/oh-my-zsh/plugins/vscode:/Users/ alecrobertson/.antigen/bundles/djui/alias-tips:/Users/alecrobertson/.antigen/bundle s/ntnyq/omz-plugin-pnpm-main:/Users/alecrobertson/.antigen/bundles/zsh-users/zsh-au tosuggestions:/Users/alecrobertson/.antigen/bundles/zsh-users/zsh-completions:/User s/alecrobertson/.antigen/bundles/zsh-users/zsh-syntax-highlighting:/Users/alecrober tson/.antigen/bundles/robbyrussell/oh-my-zsh/plugins/deno:/opt/homebrew/opt/fzf/bin PNPM_HOME=/Users/alecrobertson/Library/pnpm PWD=/Users/alecrobertson/scratchpad/bud-react-error-repro SECURITYSESSIONID=186ac SHELL=/bin/zsh SHLVL=3 SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.1vTlFgCWhN/Listeners STARSHIP_SESSION_KEY=3543205924669348 STARSHIP_SHELL=zsh TERM=xterm-256color TERM_PROGRAM=tmux TERM_PROGRAM_VERSION=3.4 THEME_DIR=/Users/alecrobertson/.local/share/nvim/lazy/tokyonight.nvim/extras/tmux TMPDIR=/var/folders/k_/07lm9hpn3958hb_s3nwvs_gh0000gn/T/ TMUX=/private/tmp/tmux-501/default,12342,6 TMUX_PANE=%28 TMUX_PLUGIN_MANAGER_PATH=/Users/alecrobertson/.tmux/plugins/ USER=alecrobertson VISUAL=nvim VOLTA_HOME=/Users/alecrobertson/.volta WEZTERM_CONFIG_DIR=/Users/alecrobertson/.config/wezterm WEZTERM_CONFIG_FILE=/Users/alecrobertson/.config/wezterm/wezterm.lua WEZTERM_EXECUTABLE=/Applications/WezTerm.app/Contents/MacOS/wezterm-gui WEZTERM_EXECUTABLE_DIR=/Applications/WezTerm.app/Contents/MacOS WEZTERM_PANE=0 WEZTERM_UNIX_SOCKET=/Users/alecrobertson/.local/share/wezterm/gui-sock-9380 XPC_FLAGS=0x0 XPC_SERVICE_NAME=0 Enabled extensions @roots/bud-extensions/import-map @roots/bud-extensions/mini-css-extract-plugin @roots/bud-extensions/webpack-lifecycle-plugin @roots/bud-extensions/fix-style-only-entrypoints @roots/bud-extensions/clean-webpack-plugin @roots/bud-extensions/webpack-manifest-plugin @roots/bud-minify/minify-css @roots/bud-minify/minify-js @roots/bud-minify @roots/bud-entrypoints @roots/bud-postcss @roots/bud-swc @roots/bud-preset-recommend @roots/bud-react @roots/bud-tailwindcss @roots/bud-typescript @roots/bud-wordpress-dependencies @roots/bud-wordpress-externals @roots/bud-preset-wordpress @roots/bud-tailwindcss-theme-json Disabled extensions @roots/bud-extensions/cdn @roots/bud-extensions/esm @roots/bud-extensions/html-webpack-plugin @roots/bud-extensions/webpack-define-plugin @roots/bud-extensions/webpack-hot-module-replacement-plugin @roots/bud-extensions/webpack-profile-plugin @roots/bud-extensions/tsconfig-values @roots/bud-extensions/webpack-provide-plugin @roots/bud-extensions/interpolate-html-webpack-plugin @roots/bud-extensions/copy-webpack-plugin @roots/bud-wordpress-theme-json @roots/bud-typescript/typecheck @roots/bud-react/react-refresh Development server Not available in `production` mode. Run this command with --mode=development for server information. ✔ webpack validated configuration ```

Screenshot 1 | Output of create-bud-app

Output of create-bud-app

Screenshot 2 | Output of npx bud build

React build error

amustill commented 2 weeks ago

I'm also experiencing this across a few projects and new projects created via create-bud-app.

It appears to be related to the bud-dashboard module, potentially from a breaking change in react-reconciler published a few days ago? Although I haven't dug deeper.

In the meantime I have found adding the --no-dashboard option works around the error.

ligne13 commented 2 weeks ago

Same issue today. @amustill where do you add the option --no-dashboard ?

Thank you

amustill commented 2 weeks ago

On the command line. Your exact command may be slightly different depending on your setup, but something similar to:

npx bud dev --no-dashboard

If you've used npx create-bud-app then you can edit the two script commands package.json, eg:

"scripts": {
  "build": "bud build production --no-dashboard",
  "dev": "bud build development --no-dashboard"
},

You lose some prettiness, but it works and you still get build outputs:

app:
  6 assets
  39 modules
  app (webpack 5.89.0) compiled successfully in 419 ms
hejamartin commented 3 days ago

On the command line. Your exact command may be slightly different depending on your setup, but something similar to:

npx bud dev --no-dashboard

If you've used npx create-bud-app then you can edit the two script commands package.json, eg:

"scripts": {
  "build": "bud build production --no-dashboard",
  "dev": "bud build development --no-dashboard"
},

You lose some prettiness, but it works and you still get build outputs:

app:
  6 assets
  39 modules
  app (webpack 5.89.0) compiled successfully in 419 ms

Thanks. That this has not been resolved yet is crazy. I am subscribing to this Issue, and hope soon to get an email ;)

johanmolen commented 3 days ago

Subscribing too, getting this error too since downgrading back to 6.20.