Cannot read properties of undefined (reading 'push')

bud
1

I have an error that I don’t understand in the console. what can it mean?

There are no outdated packages.

Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at self.webpackHotUpdate_roots_bud_sage_sage ((index):1688:46)
    at runtime.504855542ddf15e6.hot-update.js:2:45

    "@roots/bud": "^6.15.2",
    "@roots/bud-eslint": "^6.15.2",
    "@roots/bud-stylelint": "^6.15.2",
    "@roots/bud-tailwindcss": "^6.15.2",
    "@roots/eslint-config": "^6.15.2",
    "@roots/sage": "^6.15.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.5"

This is the line with the error (1688):

if(runtime) currentUpdateRuntime.push(runtime);

1 Like
2

Yeah I get the same error too when trying to use react

2 Likes
3

How can we reproduce this issue?

4

I really don’t know, sorry :pray: It is true that I have tried to implement react in production (unsuccessfully) as suggested by filipac, but now I have completely removed it and the error persists. I also don’t know when it started to appear.

I’m of little help, I’m afraid.

5

For me, I do not have this error while on version 6.13.1, as soon as I update to 6.14.3, I get the error again BUT after I make a first change in React scripts/app. I see the hot reload (changes appear on website), but then if I refresh, I get the reading push error.

From what I see different between versions, from 6.14 onwards I get in entrypoints.json the “hot-update” version of the script. On 16.13.1, no matter how many changes I make, I do not get any “hot-update” versions in the entrypoints.json file.

1 Like
6

@ben what fixes this error for me is editing \Roots\Acorn\Assets\Bundle and in the constructor do

$bundle['js'] = collect($bundle['js'])->reject(fn($el) => str($el)->contains('hot-update'))->toArray();

Basically, hot-update modules should never be included in the browser from Bundle

1 Like
7

@filipac I used your tip and I was able to solve the same issue.

// package.json

"devDependencies": {
    "@roots/bud": "^6.15.2",
    "@roots/bud-tailwindcss": "6.15.2",
    "@roots/bud-vue": "6.15.2",
    "@roots/sage": "6.15.2",
    "critical": "^5.1.1",
    "dotenv": "^16.3.1",
    "puppeteer": "^20.9.0",
    "rimraf": "^5.0.1",
    "svgo": "^3.0.2",
    "swiper": "^10.1.0",
    "tailwindcss-debug-screens": "^2.2.1",
    "vue-loader": "^17.2.2",
    "vue-template-compiler": "^2.7.14"
  },
8

I’m assuming this is not reproducible from a stock Sage 10 installation?

What are the steps that we need to take in order to reproduce this issue?

Editing Acorn’s files directly isn’t a proper solution

9

Stock no, but if you install stock and upgrade to latest Bud version, it reproduces.

  1. Install Sage, stock.
  2. Instead of relying on the fixed Bud version, install latest one.
  3. Do two simple Bud entrypoints: one vanilla JS one React.
  4. Include both entrypoints one the same page.
  5. Start development with HMR.
  6. Notice that it works. Do a change, it does hot reload.
  7. Refresh the page. Code still works but you get that error from hot-update scripts.

Simple steps but I can reproduce everytime.

1 Like
10

To prevent all of the back-and-forth and to speed up getting a proper bug issue created, could you please provide all of the configs and code necessary to reproduce this? These would be helpful:

  • Your Bud config showing both the vanilla JS and React entrypoints
  • package.json modifications, including showing how you’ve brought in React
  • The code responsible for including including the entrypoints on a page
  • The contents of the file from your new JS file

Feel free to drop a repo or code sandbox link if you’d like. The more complete the information, the quicker we can diagnose and fix the issue.

We can attempt to figure this out on our own, but it’d be super helpful if this information could be provided off the bat.

FWIW, it is strongly advised to not enqueue multiple entrypoints per page.

1 Like
11

@ben If it helps, this is the project with which I have the same problem. I have temporarily opened it.

This is the project deployed on staging: https://espaciosutil.e451.net/

In local I have applied the workaround of filipac

// site/vendor/roots/acorn/src/Roots/Acorn/Assets/Bundle.php

public function __construct(string $id, array $bundle, string $path, string $uri = '/')
{
   $bundle['js'] = collect($bundle['js'])->reject(fn ($el) => str($el)->contains('hot-update'))->toArray();
        
   // …
}