I'm trying to use the tool to init a lit / typescript project, but it fails with different errors. This is the full log:
→ npm init @open-wc
_.,,,,,,,,,._
.d'' ``b. Open Web Components Recommendations
.p' Open `q.
.d' Web Components `b. Start or upgrade your web component project with
.d' `b. ease. All our recommendations at your fingertips.
:: ................. ::
`p. .q'
`p. open-wc.org .q'
`b. @openWc .d'
`q.. ..,' See more details at https://open-wc.org/init/
'',,,,,,,,,,''
Note: you can exit any time with Ctrl+C or Esc
✔ What would you like to do today? › Scaffold a new project
✔ What would you like to scaffold? › Application
✔ What would you like to add? › Linting (eslint & prettier), Testing (web-test-runner), Demoing (storybook), Building (rollup)
✔ Would you like to use typescript? › Yes
✔ What is the tag name of your app shell element? … un-copy-art
./
├── un-copy-art/
│ ├── .storybook/
│ │ ├── main.js
│ │ └── server.mjs
│ ├── .vscode/
│ │ └── extensions.json
│ ├── assets/
│ │ └── open-wc-logo.svg
│ ├── src/
│ │ └── un-copy-art.ts
│ ├── stories/
│ │ └── un-copy-art.stories.ts
│ ├── test/
│ │ └── un-copy-art.test.ts
│ ├── .editorconfig
│ ├── .gitignore
│ ├── custom-elements.json
│ ├── index.html
│ ├── LICENSE
│ ├── package.json
│ ├── README.md
│ ├── rollup.config.js
│ ├── tsconfig.json
│ ├── web-dev-server.config.mjs
│ └── web-test-runner.config.mjs
✔ Do you want to write this file structure to disk? › Yes
Writing..... done
✔ Do you want to install dependencies? › Yes, with npm
Installing dependencies...
This might take some time...
Using npm to install...
npm: npm
npm: WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm: npm
npm: WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
added 1098 packages, and audited 1099 packages in 2m
254 packages are looking for funding
run `npm fund` for details
8 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
> [email protected] analyze
> cem analyze --litelement
[4:18:37 PM] @custom-elements-manifest/analyzer: Created new manifest.
If you want to rerun this exact same generator you can do so by executing:
npm init @open-wc --destinationPath /home/gfurlan/src/un-copy-art --type scaffold --scaffoldType app --features linting testing demoing building --typescript true --tagName un-copy-art --writeToDisk true --installDependencies npm
You are all set up now!
All you need to do is run:
cd un-copy-art
npm run start
# gfurlan at CPX-J9LPJETWYHX in ~/src [16:18:37]
→ cd un-copy-art
# gfurlan at CPX-J9LPJETWYHX in ~/src/un-copy-art [16:33:53]
→ npm run start
> [email protected] start
> tsc && concurrently -k -r "tsc --watch --preserveWatchOutput" "wds"
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:1:53 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@open-wc/dedupe-mixin")' call instead.
1 export type ScopedElementsMixin = <T extends import("@open-wc/dedupe-mixin").Constructor<import("@lit/reactive-element").ReactiveElement>>(superclass: T) => T & import("@open-wc/dedupe-mixin").Constructor<import("./types").ScopedElementsHost> & typeof import("./types").ScopedElementsHost;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:1:97 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@lit/reactive-element")' call instead.
1 export type ScopedElementsMixin = <T extends import("@open-wc/dedupe-mixin").Constructor<import("@lit/reactive-element").ReactiveElement>>(superclass: T) => T & import("@open-wc/dedupe-mixin").Constructor<import("./types").ScopedElementsHost> & typeof import("./types").ScopedElementsHost;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:1:169 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@open-wc/dedupe-mixin")' call instead.
1 export type ScopedElementsMixin = <T extends import("@open-wc/dedupe-mixin").Constructor<import("@lit/reactive-element").ReactiveElement>>(superclass: T) => T & import("@open-wc/dedupe-mixin").Constructor<import("./types").ScopedElementsHost> & typeof import("./types").ScopedElementsHost;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:7:56 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@open-wc/dedupe-mixin")' call instead.
7 export function ScopedElementsMixin<T_1 extends import("@open-wc/dedupe-mixin").Constructor<HTMLElement>>(superclass: T_1): T_1 & import("@open-wc/dedupe-mixin").Constructor<import("./types").ScopedElementsHost>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:7:138 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@open-wc/dedupe-mixin")' call instead.
7 export function ScopedElementsMixin<T_1 extends import("@open-wc/dedupe-mixin").Constructor<HTMLElement>>(superclass: T_1): T_1 & import("@open-wc/dedupe-mixin").Constructor<import("./types").ScopedElementsHost>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:16:40 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@lit/reactive-element")' call instead.
16 export type CSSResultOrNative = import("@lit/reactive-element").CSSResult | CSSStyleSheet;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/types.d.ts:1:29 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@open-wc/dedupe-mixin")' call instead.
1 import { Constructor } from '@open-wc/dedupe-mixin';
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/scoped-elements/types/src/types.d.ts:2:33 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@lit/reactive-element")' call instead.
2 import { ReactiveElement } from '@lit/reactive-element';
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/semantic-dom-diff/chai-dom-diff-plugin.d.ts:3:29 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './get-diffable-html.js'?
3 import { DiffOptions } from "./get-diffable-html";
~~~~~~~~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/index.d.ts:2:22 - error TS2307: Cannot find module 'lit-html/static' or its corresponding type declarations.
2 import { html } from "lit-html/static";
~~~~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/index.d.ts:3:30 - error TS2307: Cannot find module 'lit-html/static' or its corresponding type declarations.
3 import { unsafeStatic } from "lit-html/static";
~~~~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/src/fixture-no-side-effect.d.ts:19:65 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
19 export function fixtureSync<T extends Element>(template: import('./renderable').LitHTMLRenderable, options?: FixtureOptions): T;
~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/src/fixture-no-side-effect.d.ts:41:61 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
41 export function fixture<T extends Element>(template: import('./renderable').LitHTMLRenderable, options?: FixtureOptions): Promise<T>;
~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/src/litFixture.d.ts:10:68 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
10 export function litFixtureSync<T extends Element>(template: import('./renderable').LitHTMLRenderable, options?: import('./fixture-no-side-effect.js').FixtureOptions, getScopedElementsTemplate?: import('./scopedElementsWrapper.js').ScopedElementsTemplateGetter): T;
~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/src/litFixture.d.ts:19:64 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
19 export function litFixture<T extends Element>(template: import('./renderable').LitHTMLRenderable, options?: import('./fixture-no-side-effect.js').FixtureOptions): Promise<T>;
~~~~~~~~~~~~~~
node_modules/@open-wc/testing-helpers/types/src/scopedElementsWrapper.d.ts:8:60 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
8 export function getScopedElementsTemplate(template: import('./renderable').LitHTMLRenderable, scopedElements: ScopedElementsMap): HTMLElement;
~~~~~~~~~~~~~~
test/un-copy-art.test.ts:4:27 - error TS2307: Cannot find module '../src/UnCopyArt.js' or its corresponding type declarations.
4 import { UnCopyArt } from '../src/UnCopyArt.js';
~~~~~~~~~~~~~~~~~~~~~
Found 17 errors in 8 files.
Errors Files
6 node_modules/@open-wc/scoped-elements/types/src/ScopedElementsMixin.d.ts:1
2 node_modules/@open-wc/scoped-elements/types/src/types.d.ts:1
1 node_modules/@open-wc/semantic-dom-diff/chai-dom-diff-plugin.d.ts:3
2 node_modules/@open-wc/testing-helpers/types/index.d.ts:2
2 node_modules/@open-wc/testing-helpers/types/src/fixture-no-side-effect.d.ts:19
2 node_modules/@open-wc/testing-helpers/types/src/litFixture.d.ts:10
1 node_modules/@open-wc/testing-helpers/types/src/scopedElementsWrapper.d.ts:8
1 test/un-copy-art.test.ts:4```
Is it a common problem, or it's my environment? Can you help me please?
Thanks :)
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent