HubSpot CLI 8.0.0 local theme preview does not work with child themes

[NiklasKuu]

Hey, I recently updated from 7.11.3 to 8.0.0 and it does not seem that local preview via hs cms theme preview works with HTML + HUBL child themes. I haven't tested with React + HUBL themes, those might work.

How to reproduce

Create a child theme from for example the growth theme in @hubspot/growth in the design manager. I named mine test-growth-child.

Fetch the files from design manager with:

hs cms fetch test-growth-child

Preview the theme locally with

hs cms theme preview ./test-growth-child ./test-growth-child

navigate to https://hslocal.net:3000

The dev server crashes for me with the following stack trace after navigating to the link:

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://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useMemo')
    at process.env.NODE_ENV.exports.useMemo (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\react\cjs\react.development.js:1251:33)
    at Provider (file:///C:/ProgramData/nvm/v23.11.0/node_modules/@hubspot/cli/node_modules/@radix-ui/react-context/dist/index.mjs:29:27)
    at renderWithHooks (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5798:15)
    at renderElement (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
    at renderElement (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
TypeError: Cannot read properties of null (reading 'useMemo')
    at process.env.NODE_ENV.exports.useMemo (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\react\cjs\react.development.js:1251:33)
    at Provider (file:///C:/ProgramData/nvm/v23.11.0/node_modules/@hubspot/cli/node_modules/@radix-ui/react-context/dist/index.mjs:29:27)
    at renderWithHooks (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5798:15)
    at renderElement (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
    at renderElement (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (C:\ProgramData\nvm\v23.11.0\node_modules\@hubspot\cli\node_modules\@hubspot\cms-dev-server\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)

[brandenrodgers]

Hi @NiklasKuu 👋 just to clarify, was this previously working for you in version 7.11.3?

[NiklasKuu]

I think in version 7.11.3 there were still issues with displaying modules in the CMS Developer server (some previous version update broke that), but Templates load in fine.

Edit: I think it worked perfectly in something like 7.6.2

so if I run:

npm uninstall -g @hubspot/cli

and reinstall 7.11.3 with:

npm install -g @hubspot/cli:7.11.3

I can then run the local preview with the same command-

hs cms theme preview ./test-growth-child ./test-growth-child

and successfully navigate to the local dev server at:

https://hslocal.net:3000