Vite build error

[jweb89]

Qwik Version

0.10.0 or greater

Operating System (or Browser)

Stackblitz container

Node Version (if applicable)

v16.14.2

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

The build should complete successfully

Actual Behaviour

The build throws [vite:build-import-analysis] parse error. This seems to happen when importing from outside the src directory, but I have also had this error occur from imports inside the src. I'm having trouble consistently reproducing the issue from inside the src but I suspect they are related

Additional Information

https://stackblitz.com/edit/qwik-starter-e1wsbm?file=package.json Run npm run build in the console

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-e1wsbm (Open reproduction)

[utherpally]

related #1045

[gioboa]

From the reproduction repo I debugged the scenario with the command npm run build The error occur in parse$e function

I did 2 tests:

• import the component from inside (it works 😅) source param is 👇

import { componentQrl } from \"@builder.io/qwik\";\nimport { qrl } from \"@builder.io/qwik\";\nexport const Counter = /*#__PURE__*/ componentQrl(qrl(()=>import(\"../entry_Counter.js\"), \"s_MkwVwq8GYcg\"));\n

• import the component from outside source param is 👇

import { component$ } from \"@builder.io/qwik\";\nexport const Counter = component$(() => <div>outside</div>);\n

I hope this info can help the resolution 🤞

[dmitry-stepanenko]

Just some more debugging of this: it looks like components are not being processed by the optimizer when they're out of the src folder

Under src:

 source: 'import { componentQrl } from "@builder.io/qwik";\n' +
    'import { qrl } from "@builder.io/qwik";\n' +
    'export default /* @__PURE__ */ componentQrl(qrl(() => import("../../entry_header.js"), "s_ceU05TscGYE"));\n',
  importer: '/Users/dmitriy/projects/test/qwik-app/src/components/header/header.tsx'
}

elsewhere:

source: 'import { component$, useStylesScoped$ } from "@builder.io/qwik";\n' +
    'import { QwikLogo } from "../icons/qwik";\n' +
    'import styles from "./header.css?inline";\n' +
    'export default component$(() => {\n' +
    '  useStylesScoped$(styles);\n' +
    '  return <header>\n' +
    '    <div class="logo"><a href="https://qwik.builder.io/" target="_blank" title="qwik"><QwikLogo /></a></div>\n' +
    '    <ul>\n' +
    '      <li><a href="https://qwik.builder.io/docs/components/overview/" target="_blank">Docs</a></li>\n' +
    '      <li><a href="https://qwik.builder.io/examples/introduction/hello-world/" target="_blank">Examples</a></li>\n' +
    '      <li><a href="https://qwik.builder.io/tutorial/welcome/overview/" target="_blank">Tutorials</a></li>\n' +
    '    </ul>\n' +
    '  </header>;\n' +
    '});\n',

[shairez]

@jweb89 After talking with @manucorporat about it , the solution is:

1. to update to the latest qwik version
2. to add vendorRoots: [] to the qwikVite plugin options like so:

qwikVite({ 
        vendorRoots: [
          join(__dirname, './counter')
        ] 
    })

To see an example, I forked the original repo and run npm run build.preview here - https://stackblitz.com/edit/qwik-starter-suqajc?file=vite.config.ts,package.json

[jweb89]

@jweb89 After talking with @manucorporat about it , the solution is:

1. to update to the latest qwik version
2. to add vendorRoots: [] to the qwikVite plugin options like so:

qwikVite({ 
        vendorRoots: [
          join(__dirname, './counter')
        ] 
    })

To see an example, I forked the original repo and run npm run build.preview here - https://stackblitz.com/edit/qwik-starter-suqajc?file=vite.config.ts,package.json

That works! Thanks for getting back to me about this @shairez. This would be something really useful in a guide in the docs of how to use qwik in a monorepo. We're using qwik in our monorepo and we were copying over the entire directory prior to build to avoid this error