Nondescript "Cannot read property '___component' of undefined error: Needs better error handling

[pcanella]

Marko Version: 5.0.0-next.65

Details

Not sure what is exactly happening here; I had a component that was to be rendered when conditions are met, but when the component is about to appear, I get this error and everything breaks. @DylanPiercey and I chatted about this and he mentioned this (for historical context:

This error looks like something you’d see if the Marko runtime being used is different that what the code was bundled with. It looks like the code was bundled in dev mode, but used in production mode.
Try making it so that (in staging) you set NODE_ENV=staging or NODE_ENV=production and see if that fixes the issue.

I'm using Webpack and is the first time I ever encountered this issue myself. On my local environment I do not see this error, but after bundling/deploying I am getting this.

Expected Behavior

The component should render, or at least throw a more helpful error if something is breaking it.

Actual Behavior

see Details above

Possible Fix

I have yet to fix this issue :(

Additional Info

Your Environment

• Environment name and version (e.g. Chrome 39, node.js 5.4): Chrome 87.0.4280.141, Node 12.18.2, Webpack 4.44.1, @marko/webpack@^6.2.9
• Operating System and version (desktop or mobile): OS X Catalina (only seeing this issue in CLI though), Desktop
• Link to your project: Please ask for repo (ebay internal)

Steps to Reproduce

Please ask for steps :)

Stack Trace

  | e.exports | @ | 3.7f3c1a52.js:formatted:8036
-- | -- | -- | --
  | t.exports | @ | 0.a963e038.js:1
  | renderBody | @ | 3.7f3c1a52.js:formatted:1017
  | t.exports | @ | 0.a963e038.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | t.exports | @ | 0.a963e038.js:1
  | (anonymous) | @ | 3.7f3c1a52.js:formatted:1000
  | (anonymous) | @ | 0.a963e038.js:1
  | t.exports | @ | 0.a963e038.js:1
  | (anonymous) | @ | 1.3d284418.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | t.exports | @ | 0.a963e038.js:1
  | (anonymous) | @ | 1.3d284418.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | t.exports | @ | 0.a963e038.js:1
  | renderBody | @ | 1.3d284418.js:1
  | (anonymous) | @ | 1.3d284418.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | t.exports | @ | 0.a963e038.js:1
  | (anonymous) | @ | 1.3d284418.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | _p_ | @ | 0.a963e038.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | n._o_ | @ | 0.a963e038.js:1
  | _m_ | @ | 0.a963e038.js:1
  | update | @ | 0.a963e038.js:1
  | s | @ | 0.a963e038.js:1
  | n._o_ | @ | 0.a963e038.js:1
  | _m_ | @ | 0.a963e038.js:1
  | update | @ | 0.a963e038.js:1
  | s | @ | 0.a963e038.js:1
  | u | @ | 0.a963e038.js:1
  | (anonymous) | @ | 0.a963e038.js:1
  | postMessage (async) |   |  
  | (anonymous) | @ | 0.a963e038.js:1
  | n._i_ | @ | 0.a963e038.js:1
  | _e_ | @ | 0.a963e038.js:1
  | _f_ | @ | 0.a963e038.js:1
  | setStateDirty | @ | 0.a963e038.js:1
  | handleSingleCheckboxChange | @ | 1.3d284418.js:1
  | w | @ | 0.a963e038.js:1
  | emit | @ | 0.a963e038.js:1
  | w | @ | 0.a963e038.js:1
  | emit | @ | 0.a963e038.js:1
  | w | @ | 0.a963e038.js:1
  | emit | @ | 0.a963e038.js:1
  | (anonymous) | @ | 3.7f3c1a52.js:formatted:3456
  | c | @ | 0.a963e038.js:1
  | Object.keys.forEach.r.<computed>.e.addEventListener.r.<computed> | @ | 0.a963e038.js:1

[DylanPiercey]

This should be fixed in 5.0.0-next.73