QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.83k stars 1.31k forks source link

[🐞] Qwik imports react into production build when using a key and spread in a loop #3468

Closed DustinJSilk closed 1 year ago

DustinJSilk commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

This one was interesting to find!

When using a key and spreading props on a component, Qwik will import react as a dependency into the production server. The build will fail if react is not install.

For example, this code will cause Qwik to import react into the production entry.mjs file:

import { component$ } from "@builder.io/qwik";

const DATA = [{ name: "a" }, { name: "b" }, { name: "c" }, { name: "d" }];

export const Card = component$((props: any) => {
  return <></>;
});

export default component$(() => {
  return (
    <>
      {DATA.map((post) => (
        <Card {...post} key={post.name} />
      ))}
    </>
  );
});

Reproduction

https://github.com/DustinJSilk/qwik-issue-react-import

Steps to reproduce

Install and build:

Notice the build will fail as it tries to find react. If you install react, it will succeed and the entry.cloud-run.mjs file will include import 'react';

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 187.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 110.0.1
    Safari: 15.1
  npmPackages:
    @builder.io/qwik: 0.23.0 => 0.23.0 
    @builder.io/qwik-city: 0.6.5 => 0.6.5 
    undici: 5.21.0 => 5.21.0 
    vite: 4.2.0 => 4.2.0

Additional Information

It seems to work if you remove either the {...post} or the key={post.name}

The workaround is to simply not use a spread with a key. So its not an issue, although no idea why it would happen

manucorporat commented 1 year ago

It's because this issue: https://github.com/swc-project/swc/issues/6987

manucorporat commented 1 year ago

created a PR in SWC! hope we can get it fixed soon, otherwise considering a fork: https://github.com/swc-project/swc/pull/7125