createComment is not a function error - lit and lit-html 2.3.0

[aelbore]

Which package(s) are affected?

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

Description

using vite and vitest error with latest version of lit

Reproduction

Please check stackblitz URL

https://stackblitz.com/edit/vitejs-vite-omm8ny

Workaround

downgrade to lit@2.2.8 and lit-html@2.2.7 version

Is this a regression?

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

Affected versions

2.3.0

Browser/OS/Node environment

Chrome 103
MacOSX
Node 16

[aomarks]

https://stackblitz.com/edit/vitejs-vite-omm8ny

Thank you for the report and repro!

I get an error in the console Uncaught ReferenceError: setupCounter is not defined. It looks like that function indeed is not defined. I don't see an error about createComment is not a function. Maybe something accidentally removed when pairing down the repro?

We did recently make a change that could be related to this issue: #3156

[augustjk]

I think the issue here is that vitest is a node test runner and by default uses the node export condition. Here's some relevant comment from a maintainer: vitest-dev/vitest#1588 (comment)

There appears to be an option to potentially override that here https://vitest.dev/config/#transformmode-web

I tried just grabbing all .js files and forcing the transform by inlining all the dependencies in your stackblitz repro and the test command does seem to work.
https://stackblitz.com/edit/vitejs-vite-zwvume?file=vite.config.js

[aelbore]

@augustjk yes thanks indeed it works, is this a work around? or do you think lit team has permanent fix? im not sure also if this is lit or vitest/vite issue.

[aelbore]

@aomarks i create video reproduce this is base on @augustjk stackblitz repo (above)

Screen.Recording.2022-08-16.at.9.56.53.AM.mov

[aelbore]

@aomarks if you think this not lit issue we can close this

[augustjk]

While it's work-aroundable, perhaps we can also add some check here to use an existing document if it exists.

lit/packages/lit-html/src/lit-html.ts

Lines 347 to 353 in ecdb3bc

	const d = NODE_MODE
	? ({
	createTreeWalker() {
	return {};
	},
	} as unknown as Document)
	: document;