Qwik-React Build & Preview Crashes

[n8sabes]

trafficstars

Qwik Version

0.9.0

Operating System (or Browser)

MacOS 12.6

Node Version (if applicable)

18.9.0

Which component is affected?

Qwik React

Expected Behaviour

qwik-react example should work with dev and preview scripts, but crashes. See four (4) steps below.

1. WORKS WITHOUT QWIK-REACT

pnpm create qwik@latest cd app_name pnpm install pnpm preview WORKS

2. CRASHES WITH QWIK-REACT

pnpm run qwik add qwik-react pnpm preview CRASHES

Server Log:

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'PATH/node_modules-qwik-app5/node_modules/.pnpm/@[email protected]_q2ba77t7fehczq64hssjczahte/node_modules/@emotion/react/jsx-runtime' is not supported resolving ES modules imported from PATH/node_modules-qwik-app5/node_modules/.pnpm/@[email protected]_q2ba77t7fehczq64hssjczahte/node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js
Did you mean to import @[email protected]_luyos4mouogwq6z3wafb3re4ce/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js?

3. TRY DEV SCRIPT

pnpm dev WARNING, but renders in browser

Server Log:

11:35:34 PM [vite] warning: The JSX import source cannot be set without also enabling React's "automatic" JSX transform
1  |  /** @jsxImportSource react */ import { qrl } from "@builder.io/qwik";
   |                       ^
2  |  import { qwikifyQrl } from "@builder.io/qwik-react";
3  |  // qwikify$() takes a react component and returns```

4. TRY UPDATING EVERYTHING

pnpm up --latest pnpm add -D @babel/core pnpm preview CRASHES

Server Log:

file://PATH/node_modules-qwik-app5/node_modules/.pnpm/@[email protected]_avls542krl2awufdndguriqgl4/node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js:9
const cache = createCache({
              ^

TypeError: createCache is not a function
    at file://PATH/node_modules-qwik-app5/node_modules/.pnpm/@[email protected]_avls542krl2awufdndguriqgl4/node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js:9:15

Actual Behaviour

Crashes when running pnpm preview

Or, am I missing something in configuration, or how preview should be used with qwik-react?

Additional Information

No response

[n8sabes]

Running pnpm run qwik add and adding Static Generator (SSG) has helped, but now running preview results in an triggerUncaughtException trying to load emotion-react-jsx-runtime.

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'PATH/node_modules-vipscheduler/node_modules/.pnpm/@[email protected]_q2ba77t7fehczq64hssjczahte/node_modules/@emotion/react/jsx-runtime' is not supported resolving ES modules imported from PATH/node_modules-vipscheduler/node_modules/.pnpm/@[email protected]_q2ba77t7fehczq64hssjczahte/node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js
Did you mean to import @[email protected]_ihakah5cf6y53suoc2giy6uyfe/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js?

Any help on getting a qwik-react to build / preview is appreciated.

The emotion version and modules I am using are:

    "@emotion/cache": "^11.10.3",
    "@emotion/css": "^11.10.0",
    "@emotion/react": "11.9.3",
    "@emotion/serialize": "^1.1.0",
    "@emotion/server": "11.4.0",
    "@emotion/styled": "11.9.3",

[jweb89]

@manucorporat not sure how helpful this is, but I was able to get qwik-react working in prod mode by adjusting this file

Using this repo: https://github.com/manucorporat/qwik-conference-app

node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js

and also using this to run the server node --experimental-specifier-resolution=node server/entry.express

[MarkLyck]

Im running into the same problem.

Can be reproduced by just running:

npm create qwik@latest

and

npm run qwik add qwik-react

then run preview with:

npm run preview

There also seems to be an error with the Mui component at /react when running npm run dev

I tried editing the node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js file @jweb89 recommended, but that did not solve it for me 🤷‍♂️ I also don't see the server/entry.express file mentioned in that comment, so that's likely why.

[jweb89]

Im running into the same problem.

Can be reproduced by just running:

npm create qwik@latest

and

npm run qwik add qwik-react

then run preview with:

npm run preview

There also seems to be an error with the Mui component at /react when running npm run dev

I tried editing the node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js file @jweb89 recommended, but that did not solve it for me 🤷‍♂️ I also don't see the server/entry.express file mentioned in that comment, so that's likely why.

Sorry about that. Forgot to mention I was using this repo to reproduce the error and get it working. https://github.com/manucorporat/qwik-conference-app

[MarkLyck]

@jweb89 did you get it working?

[jweb89]

@jweb89 did you get it working?

Yes, I can get it working using the this repo(https://github.com/manucorporat/qwik-conference-app), making the changes to node_modules/@builder.io/qwik-react/lib/server.f07a53ac.js from my comment earlier and running with node --experimental-specifier-resolution=node server/entry.express but that's just a workaround that I used to get it working for testing a prod build with react. I haven't tried using preview

[jweb89]

With the updates to qwik-react and from what I understand making qwik-react work with the standard qwik renderToStream I think this issue can probably be closed. I'm able to use qwik's renderToStream in production mode with qwik-react using the following versions: qwik : 0.12.0-dev20221021220048 qwik-react: 0.1.1

[hoaidev]

Still error when run preview.

Oops! Something went wrong! :(

ESLint: 8.25.0

No files matching the pattern ""src/**/.ts"" were found. Please check for typing mistakes in the pattern.

[robisim74]

@hoaidev I don't think your error is related to this issue. Check if in your npm lint command you have escaped quotes:

"lint": "eslint \"src/**/*.ts*\""

If yes, remove them:

"lint": "eslint src/**/*.ts*"

[manucorporat]

We will fix the issue with the lint too in the next release! sorry for the inconvenience, however this react + qwik issue should be fixed in the latest release!

[AllStackDev1]

I don't think the latest release fixed this tho, or it wasn't part of v0.13.1 as I still get this error.

:x: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/daianscuarissi/repos/work/starter.dev-github-showcases/qwik-graphql-tailwind/node_modules/prism-react-renderer/themes/nightOwlLight' is not supported resolving ES modules imported from /Users/daianscuarissi/repos/work/starter.dev-github-showcases/qwik-graphql-tailwind/server/entry.preview.mjs
Did you mean to import prism-react-renderer/themes/nightOwlLight/index.cjs.js?

I had to import /index.cjs.js as the index was having export, which the compiler doesn't understand