Error: Cannot read property 'default' of null about hydrogen-v1

[jplhomer]

FYI I also asked about this yesterday in the Vite Discord (no reply) https://discord.com/channels/804011606160703521/804061937029218334/877278198600183818

But maybe it's due to a Vite cached module. E.g. if you run vite --force (or pass the --force flag to any invocation of the dev server) it will clear out cache, but maybe there are still references to the old version?

[jplhomer]

First off, I'm SO GLAD you're here helping us with this stuff, Fran 🧠 🔥 👏

in the standalone app but not in the dev project

This issue and others stemming from it are the bane of my existence: Shopify/hydrogen-archive#569

This inconsistency causes SO many headaches for us. I think solving that inconsistency would help a ton. Wonder if you have any ideas there (feel free to take the convo to that ticket)

Regardless, about this specific issue...

(for some reason these are not found automatically by Vite... perhaps due to RSC?).

Yeah I think this is exactly right. Vite looks at the entrypoint and crawls the imports to find bundles to optimize. And then when we exclude certain bundles, their respective dependencies (like react-router which import React) are not optimized. This means react isn't loaded in the way it's expecting (and is instead a __react__default_import shim), and we get the Component is not exported error. I've also found adding those to optimizeDeps.include solves the issue.

We're also tracking this specific error here Shopify/hydrogen#429

Uncaught Error: No Shopify Context found

Huh very interesting. I can't imagine why this would be the case, but we should revisit when we get there!

[cathryngriffiths]

Been investigating this bug this morning. Some things I've learned:

• This only happens on the first load after running yarn dev. The error does not happen on subsequent refreshes.

• It seems to be happening because some node built-ins are not being resolved properly:

> node_modules/react-dom/cjs/react-dom-server.node.development.js:18:21: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/stream
    18 │ var stream = require('stream');
       ╵                      ~~~~~~~~

 > node_modules/node-fetch/lib/index.mjs:5:17: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/zlib
    5 │ import zlib from 'zlib';
      ╵                  ~~~~~~

 > node_modules/node-fetch/lib/index.mjs:3:16: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/url
    3 │ import Url from 'url';
      ╵                 ~~~~~

 > node_modules/node-fetch/lib/index.mjs:4:18: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/https
    4 │ import https from 'https';
      ╵                   ~~~~~~~

 > node_modules/node-fetch/lib/index.mjs:2:17: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/http
    2 │ import http from 'http';
      ╵                  ~~~~~~

1:24:56 p.m. [vite] error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/node-fetch/lib/index.mjs:2:17: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/http
node_modules/node-fetch/lib/index.mjs:3:16: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/url
node_modules/node-fetch/lib/index.mjs:4:18: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/https
node_modules/node-fetch/lib/index.mjs:5:17: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/zlib
node_modules/react-dom/cjs/react-dom-server.node.development.js:18:21: error: Could not read from file: /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/stream
    at failureErrorWithLog (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:1449:15)
    at /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:1129:7)
    at /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:1236:14
    at /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:369:20)
    at Socket.emit (node:domain:470:12)
1:24:57 p.m. [vite] Error when evaluating SSR module /Users/cathryngriffiths/src/github.com/jplhomer/site-h2/src/entry-server:
TypeError: Cannot read property 'default' of null
    at eval (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/src/entry-server.jsx:9:84)
    at async instantiateModule (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73866:9)
TypeError: Cannot read property 'default' of null
    at eval (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/src/entry-server.jsx:9:84)
    at async instantiateModule (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73866:9)
1:24:57 p.m. [vite] Internal server error: Cannot read property 'default' of null
      at eval (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/src/entry-server.jsx:9:84)
      at async instantiateModule (/Users/cathryngriffiths/src/github.com/jplhomer/site-h2/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73866:9)

• Thought this could be related to the custom resolve.alias in the vite.config file, since removing that leads to a different error, but that's just a separate error. If I remove the @/ imports and replace them with relative imports, the error caused by removing the resolve.alias disappears, but the Cannot read property default of null error re-appears.

[cathryngriffiths]

Maybe we need some sort of plugin for this?
See vitejs/vite#728

[jplhomer]

Does this seem related at all? vitejs/vite#3024

[frandiox]

@jplhomer @cathryngriffiths I'm checking this issue and might have found something:

Discovery process

For some unknown reason, Vite optimizes @shopify/hydrogen/entry-client and @shopify/hydrogen/client in the standalone app but not in the dev project. This seems to somehow lead to Vite discovering react and react-router-dom dependencies too late and optimizing them after the first load. After optimizing them, it tries to reload the page and this is when the Cannot read properties of null (reading 'default') @ entry-server.jsx is thrown.

This can be solved by adding @shopify/hydrogen/entry-client and @shopify/hydrogen/client to optimizeDeps.exclude. However, doing this introduces a new error, this time in the browser after RSC is loaded: Uncaught SyntaxError: The requested module '/node_modules/react/index.js?v=bbf30e4b' does not provide an export named 'Component'.
Once again, this can be solved by adding react, react-dom, react-router-dom and focus-trap-react to optimizeDeps.include (for some reason these are not found automatically by Vite... perhaps due to RSC?).

With these changes, the resulting node_modules/.vite cache is more similar to the dev project and things work. However, this might just be fixing the symptoms rather than the root cause.
I do not know yet why is Vite recognizing deps in a different way depending on the setup. => Actually, looks related to using Symlinks! If I move node_modules/@shopify/hydrogen in the standalone app and just create a symlink, Vite starts behaving like in the dev project 🤯

TL;DR

To summarize the changes, the following seems to solve the issue:

  optimizeDeps: {
    include: ['react', 'react-dom', 'react-router-dom', 'focus-trap-react'],
    exclude: ['@shopify/hydrogen/entry-client', '@shopify/hydrogen/client'],
  },

So perhaps we can just include these optimizeDeps config in our plugin? Thoughts?

Related issue

This configuration I mentioned works in our current main branch and in the released 0.2.0. However, it does not work in the branch were we fixed the client import shenanigans. It starts complaining the moment Vite optimizes react-dom:

Uncaught Error: No Shopify Context found
    at useShop (hooks.js? [sm]:6)
    at useCartFetch (hooks.js? [sm]:5)
    at CartProvider (CartProvider.client.js:161)
    at renderWithHooks (react-dom.development.js:15472)

Any idea why that could be? 🤔

[frandiox]

Note to self: you need to repeat "Closes" or "Fixes" prefix when closing multiple issues in a PR Shopify/hydrogen-archive#683