qwik: [🐞] Uncaught (in promise) TypeError: Failed to resolve module specifier "X". Relative references must start with either "/", "./", or "../".

Which component is affected?

Qwik Runtime

Describe the bug

I’m creating a page using Qwik, and when I add client interaction to it using useSignal and onClick$ functions, I get this error in my client in the production code:

Uncaught (in promise) TypeError: Failed to resolve module specifier “BrandsParts”. Relative references must start with either “/”, “./”, or “…/”.

The problem is that the BrandsParts is not part of this page. It’s not related to this page at all.

Based on this answer and this answer, it seems that Qwik is trying to load one of our imports on the client-side, inside the browser:

import { Layout as RunnableLayout } from 'BrandsParts'

This code works just fine in the development environment, and I have no clue why it breaks and behaves such when it’s built for production.

Reproduction

I can give you access to our private repo.

Steps to reproduce

No response

System Info

## Production server
  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz
    Memory: 84.48 MB / 9.73 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm

## Development machine
  System:
    OS: Linux 6.2 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 9.69 GB / 15.49 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.1.0 - /usr/local/bin/npm
  Browsers:
    Chromium: 117.0.5938.132
  npmPackages:
    @builder.io/partytown: ^0.8.1 => 0.8.1 
    @builder.io/qwik: ^1.2.13 => 1.2.12 
    @builder.io/qwik-auth: ~0.1.3 => 0.1.3 
    @builder.io/qwik-city: ^1.2.13 => 1.2.12 
    undici: ^5.25.4 => 5.25.2 
    vite: ^4.4.11 => 4.4.9

Additional Information

No response

About this issue

Original URL
State: open
Created 9 months ago
Comments: 34 (14 by maintainers)

Most upvoted comments

Solved it! It’s this:

rollupOptions: {
        // externalize deps that shouldn't be bundled into the library
        external: [
          /^node:.*/,
          ...excludeAll(dependencies),
          ...excludeAll(peerDependencies),
        ],
      },
    },

If I remove that, the Qwik City stuff all loads without trouble. I need it for the component library, but at least I know that removing that bit about externals will sort out the docs site I’m trying to build.

I guess I need to split the library and the docs site into separate packages. Putting them side by side and sharing a build just isn’t going to work.

I’d love to know what the Qwik team would do for a component library starter that has a docs site with it. The current starter just has a SPA preview, right?

brandonpittman on Oct 26, 2023

@wmertens

    define: {
      "process.env.NODE_ENV": `'${process.env.NODE_ENV}'`,
    },

This works in vite.config.ts.

Also added a conditional based on Vite’s mode which seems to fix the initial problem.

Thanks for all of your help! 🙇🏻

Learned a lot about Qwik, Qwik City, and Vite today.

brandonpittman on Oct 26, 2023

If I don’t put qwikCity() before qwikVite(), I get an error about Missing Qwik City ENV data.

Oh right, but VE should be first in any case

wmertens on Oct 26, 2023

You actually need this setting for libraries, but if you’re building for local testing then you don’t. So this setting should be adjusted to be only in lib mode

I’ll look into how to do that tomorrow. Thanks.

Unrelated: sprinkles checks for process.env.NODE_ENV and throws an error now. 🤣

brandonpittman on Oct 26, 2023

@wmertens that’s a very good idea. Thank you for suggesting it. Yep, I’ll do it. It might take a while because it’s completely heuristical. Yet I’ll come back with an MRE.

Nefcanto on Oct 23, 2023