[🐞] Invalid module "@qwik-city-plan" is not a valid package name imported from

[frixaco]

Which component is affected?

Qwik Runtime

Describe the bug

Same/Related: #3641

Full error: TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module "@qwik-city-plan" is not a valid package name imported from /Users/frixaco/dev/my/test-qwik-city-plan/node_modules/.pnpm/@builder.io+qwik-city@1.5.1_@types+node@20.11.28/node_modules/@builder.io/qwik-city/index.qwik.mjs

Let me know if you need more info.

Reproduction

https://github.com/frixaco/repro-qwik-city-plan-error

Steps to reproduce

(Same as the mentioned issue above)

1. pnpm create qwik
2. pnpm add @modular-forms/qwik
3. routes/index.tsx:

import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import { useForm } from "@modular-forms/qwik";

export const useFormLoader = routeLoader$<any>(() => ({
  email: "",
  password: "",
}));

export default component$(() => {
  useForm<any>({
    loader: useFormLoader(),
  });

  return <></>;
});

4. pnpm preview

System Info

System:
OS: MacOS Sonoma 14.2.1
CPU: Apple M2 Pro
Memory: 16 GB
Binaries:
Node: 20.11.0
NPM: 10.2.4
PNPM: 8.15.3

Additional Information

No response

[wmertens]

Can you try downgrading vite to 4.0, and if that fixes it, try to find which version breaks it

[frixaco]

@wmertens Thanks for quick response. Sure, lemme try

[frixaco]

@wmertens downgrading Vite to 4.x, 4.0 and 3.x versions didn't help, unfortunately. I'll play around with other packages

[wmertens]

Ok then it's probably a bug in the Qwik City plugin

[FelineJTD]

Is there a fix yet? I'm having the same problem.

[PatrickJS]

you have to move your deps to devDeps
https://github.com/frixaco/repro-qwik-city-plan-error/blob/7a9c27ecdaf3ae2fde5da84d4723618fe06665db/package.json#L45

[PatrickJS]

@wmertens this is a problem because of how we setup the vite.config https://github.com/frixaco/repro-qwik-city-plan-error/blob/7a9c27ecdaf3ae2fde5da84d4723618fe06665db/vite.config.ts#L34 and it's not clear. by default packages are installed in deps rather than devDeps so it's confusing because the error also doesn't provide any info

[frixaco]

Thank you @PatrickJS! Moving @modular-forms/qwik from deps to devDeps fixed the problem.
As you said, it would be great if there was a more clear way to let people know about this. Maybe deps check + warning during pnpm dev or something.

[wmertens]

Yes good point. Perhaps we should just comment that code and explain that for optimal packaging you need to use that

[wmertens]

Checking the deps is possible too but kinda hard. For sure anything that depends on qwik should be bundled and we could do that automatically

[wmertens]

Actually I think that already happens and we're overriding it

[PatrickJS]

if we have a better error that should be good enough