Error on newly-created project

[elegos]

Hello!

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 rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser

npm: npm
npm:  WARN deprecated sourcemap-codec@1.4.8: 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.

> un-copy-art@0.0.0 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

> un-copy-art@0.0.0 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 :)

[svoisen]

I am running into the same issue on 0.38.67.

The previous version, 0.38.66 works fine, however. Current workaround is to use the last release:

npm init @open-wc@0.38.66

[moose-iconstorm]

Got the same problem. I run the latest today 31/01/2023.

[mwinters-stuff]

I was having the same problem, The issue appears to be a change in commit #f061e2058501a2e4dc5c8719ea68e69ee71a65cf which changes the file tsconfig.json , changing property "moduleResolution": "node", to "moduleResolution": "NodeNext",

I am no expert on this, its just what i found comparing the version that worked and the current.

[Westbrook]

@thepassle it looks like the commit above when straight into master, so I'm not quite sure to logic behind the move to nodenext. That does seem to be the source of the downstream breaks here, and if it's an optional update, removing it here would be less work that addressing this change in seemingly all of the @open-wc/* packages. However, if that's just needed for "the future", that clarifies what needs to be done here.

[thepassle]

My bad, I thought it was safe to upgrade. Weird that its not 🤔 I wont be at my laptop in the next few days, but if someone can create a PR im happy to merge