[reactive-element] "Multiple versions of Lit loaded." warning in dev mode

johnhunter commented 1 year ago

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

Upon upgrading to lit@3 and running a dev build I get the following console warning

Multiple versions of Lit loaded. Loading multiple versions is not recommended.

The warning is triggered in reactive-element.ts

// IMPORTANT: do not change the property name or the assignment expression.
// This line will be used in regexes to search for ReactiveElement usage.
(global.reactiveElementVersions ??= []).push('2.0.0');
if (DEV_MODE && global.reactiveElementVersions.length > 1) {
  issueWarning!(
    'multiple-versions',
    `Multiple versions of Lit loaded. Loading multiple versions ` +
      `is not recommended.`
  );
}

And inspecting the reactiveElementVersions value I find ['2.0.0', '2.0.0'] suggesting that reactive-element might be getting loaded twice. This might be explained by the dependencies tree which has been mentioned in issue #4305.

└─┬ lit@3.0.0
  ├── @lit/reactive-element@2.0.0
  └─┬ lit-element@4.0.0
    └── @lit/reactive-element@2.0.0

Reproduction

Steps to reproduce

Clone https://github.com/johnhunter/wc-brewery-app
run npm install
run npm start
Open http://localhost:8000/ in browser with devtools console enabled
In the browser console run globalThis.reactiveElementVersions

Expected

No "Multiple versions of Lit loaded." warnings
reactiveElementVersions array is ['2.0.0']

Actual

"Multiple versions of Lit loaded." warning is shown
reactiveElementVersions array is ['2.0.0', '2.0.0']

Workaround

None. This does not appear to cause issues other than the dev mode warnings

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

Failing in lit@3.0.0, working in lit@2.8.0

Browser/OS/Node environment

Browser: Chrome / Brave 118.0.5993.88 OS: MacOS 14.0 Node: 18.17.1 NPM: 9.6.7

justinfagnani commented 1 year ago

Is this:

└─┬ lit@3.0.0
  ├── @lit/reactive-element@2.0.0
  └─┬ lit-element@4.0.0
    └── @lit/reactive-element@2.0.0

Generated from npm ls? I would expect to see (deduped) next to the nested @lit/reactive-element@2.0.0.

npm can sometimes get into a situation from updates where it duplicates packages. npm dedupe or in extreme cases removing the node_modules/ folder should fix it.

johnhunter commented 1 year ago

Thanks. I'll give that a try

augustjk commented 1 year ago

I tried npm dedupe after cloning the provided repo and it did not fix it. The problem is npm doesn't let you really choose which version gets hoisted and deduped. The full output of npm ls @lit/reactive-element looked like this.

wc-brewery-app@0.0.0 /Users/augustinekim/testing/wc-brewery-app
├─┬ @open-wc/testing@3.2.0
│ └─┬ @open-wc/testing-helpers@2.3.0
│   ├─┬ @open-wc/scoped-elements@2.2.1
│   │ └── @lit/reactive-element@1.6.3
│   └─┬ lit@2.8.0
│     ├── @lit/reactive-element@1.6.3 deduped
│     └─┬ lit-element@3.3.3
│       └── @lit/reactive-element@1.6.3 deduped
├─┬ @web/dev-server-storybook@1.0.7
│ └─┬ storybook-addon-markdown-docs@2.0.0
│   └─┬ @mdjs/core@0.9.5
│     ├─┬ @mdjs/mdjs-preview@0.5.9
│     │ ├─┬ @lion/accordion@0.9.0
│     │ │ └─┬ @lion/core@0.22.0
│     │ │   └─┬ lit@2.8.0
│     │ │     ├── @lit/reactive-element@1.6.3 deduped
│     │ │     └─┬ lit-element@3.3.3
│     │ │       └── @lit/reactive-element@1.6.3 deduped
│     │ └─┬ lit@2.8.0
│     │   ├── @lit/reactive-element@1.6.3 deduped
│     │   └─┬ lit-element@3.3.3
│     │     └── @lit/reactive-element@1.6.3 deduped
│     └─┬ @mdjs/mdjs-story@0.3.2
│       └─┬ lit@2.8.0
│         ├── @lit/reactive-element@1.6.3 deduped
│         └─┬ lit-element@3.3.3
│           └── @lit/reactive-element@1.6.3 deduped
└─┬ lit@3.0.0
  ├── @lit/reactive-element@2.0.0
  └─┬ lit-element@4.0.0
    └── @lit/reactive-element@2.0.0

npm chose to dedupe @lit/reactive-element@1.6.3 and put that in the root

node_modules/@lit/reactive-element # 1.6.3

as a result you then get duplicates like

node_modules/lit/node_modules/@lit/reactive-element # 2.0.0
node_modules/lit-element/@lit/reactive-element # 2.0.0

You can nudge npm to hoist the 2.0.0 version by adding it as a direct dependency of your project which adds it to the root node_modules and immediately removing it.

npm i @lit/reactive-element && npm rm @lit/reactive-element

Note: I had to do this with lit-html as well to make sure the latest is hoisted and doesn't get duplicates for the app.

johnhunter commented 1 year ago

Thanks @augustjk I can confirm the hoisting fix worked for me.

Forcing npm to hoist reactive-element and lit-html fixed the duplications and the "Multiple versions of Lit loaded." warning is no longer displayed.

npm i @lit/reactive-element && npm rm @lit/reactive-element
npm i lit-html && npm rm lit-html

lit / lit