The same file is imported both directly and from a chunk

Artur- commented 2 years ago

Describe the bug

In a very specific case when the same file is imported through (at least) two different import chains, the file is in the first case loaded from a chunk node_modules/.vite/deps/chunk-RQANFN22.js?v=0a6e73b8 and then later on loaded from the source file node_modules/@vaadin/vaadin-lumo-styles/version.js?v=0a6e73b. As import has side effects, this crashes the whole application.

The case has worked fine but breaks when when @vaadin/flow-frontend is added to optimizeDeps.exclude.

The imports seem to go like this:

vaadin.ts

import "/VAADIN/generated/index.ts";
import { applyTheme } from "/VAADIN/generated/theme.js";

Chain 1

/VAADIN/generated/theme.js

import {applyTheme as _applyTheme} from '/VAADIN/generated/theme-vite-basics.generated.js';

/VAADIN/generated/theme-vite-basics.generated.js

import { color } from 'node_modules/.vite/deps/@vaadin_vaadin-lumo-styles_color__js.js?v=0a6e73b8

node_modules/.vite/deps/@vaadin_vaadin-lumo-styles_color__js.js?v=0a6e73b8

import "node_modules/.vite/deps/chunk-RQANFN22.js?v=0a6e73b8";

node_modules/.vite/deps/chunk-RQANFN22.js?v=0a6e73b8

// node_modules/@vaadin/vaadin-lumo-styles/version.js
var Lumo = class extends HTMLElement {
 static get version() {
  return "23.3.0-alpha2";
 }
};
customElements.define("vaadin-lumo-styles", Lumo);
/**
 * @license
 * Copyright (c) 2017 - 2022 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
//# sourceMappingURL=chunk-RQANFN22.js.map

Chain 2

target/frontend/generated-flow-imports.js

import 'node_modules/@vaadin/flow-frontend/lumo-includes.ts?v=0a6e73b8';

node_modules/@vaadin/flow-frontend/lumo-includes.ts?v=0a6e73b8

import { color } from "node_modules/@vaadin/vaadin-lumo-styles/all-imports.js?v=0a6e73b8";

node_modules/@vaadin/vaadin-lumo-styles/all-imports.js?v=0a6e73b8

import 'node_modules/@vaadin/vaadin-lumo-styles/font-icons.js?v=0a6e73b8';
export * from 'node_modules/@vaadin/vaadin-lumo-styles/font-icons.js?v=0a6e73b8';

node_modules/@vaadin/vaadin-lumo-styles/font-icons.js?v=0a6e73b8

import 'node_modules/@vaadin/vaadin-lumo-styles/version.js?v=0a6e73b8';

node_modules/@vaadin/vaadin-lumo-styles/version.js?v=0a6e73b8

/**
 * @license
 * Copyright (c) 2017 - 2022 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
class Lumo extends HTMLElement {
 static get version() {
  return '23.3.0-alpha2';
 }
}

customElements.define('vaadin-lumo-styles', Lumo);

export { Lumo };

Reproduction

https://github.com/vaadin/flow

Steps to reproduce

git clone git@github.com:vaadin/flow.git cd flow git checkout a5d27d93df6ebebcd779872cf1076c87a8b174de mvn install -DskipTests cd flow-tests mvn jetty:run -DskipTests -am -pl test-frontend/vite-basics open http://localhost:8888

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 158.13 MB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.9.0 - ~/.nvm/versions/node/v17.9.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v17.9.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v17.9.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Chrome Canary: 108.0.5345.0
    Firefox: 104.0.2
    Firefox Developer Edition: 105.0
    Safari: 16.0

Used Package Manager

pnpm

Logs

https://gist.github.com/Artur-/1cfc2cc29fbe475376d35ab5dd4a6c2c

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

Artur- commented 2 years ago

Reduced test case https://github.com/Artur-/vite-vaadin-problem8

Shows a different error message Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "dom-module" has already been used with this registry but seems to be caused by the same problem. The error is gone when removing the exclude part of optimizeDeps

Artur- commented 2 years ago

Any idea about this @patak-dev or what to even dig for?

Artur- commented 2 years ago

I simplified the test even further to not use external npm packages.

The problem seems to happen when a project source file imports a file from a node_modules package directly (test/multiple.js) and also imports it through an npm package that is exclude from optimization (@vaadin/flow-frontend/importer2.js -> test/intermediate.js -> ./multiple.js)

Artur- commented 2 years ago

the original file in the browser becomes

import '/@fs/.../node_modules/@vaadin/flow-frontend/importer2.js?v=5621ba1f';
import "/@fs/.../node_modules/.vite/deps/test_multiple__js.js?v=ca346643"

where @vaadin/flow-frontend/importer2.js imports the files individually, first intermediate.js and then multiple.js

but .vite/deps/test_multiple__js.js?v=ca346643 does not import multiple.js but instead contains the code from multiple.js

pascalvos commented 1 year ago

@Artur- any update on this?

vitejs / vite