Module 'responselike' cannot be imported using this construct

snowkluster commented 6 months ago

Starting template

❯ npx yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? error-test
? What's the identifier of your extension? error-test
? What's the description of your extension? 
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

When trying to build and run the extension in a new Extension Development Host window. and looking at the error

The two error messages are

Module 'responselike' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported with 'require'. Use an ECMAScript import instead.

Cannot use namespace 'ResponseLike' as a type.

and are found in

node_modules/@types/cacheable-request/index.d.ts

If the Debug Anyway option is clicked, the Extension Development Host window will start, and we are able to run the template hello world command.

This is happening because ResponseLike is being taken as a namespace instead of type.

Method I have tried to remedy this behaviour

Neither of these have helped to fix the issue

aeschli commented 5 months ago

I don't see this package using the latest code generator:

Did you add additional dependencies to your extensuion? Can you make sure you are using the latest generator code? (run npm i -g generator-code)

snowkluster commented 4 months ago

Hi, sorry for the very late response. I don't install packages globally using NPM and so these are the steps I took

❯ npm i yo generator-code

added 882 packages in 48s

146 packages are looking for funding
  run `npm fund` for details
❯ npx yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? test
? What's the identifier of your extension? test
? What's the description of your extension? testing
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

Writing in /home/anon/Desktop/Project/test...
   create test/.vscode/extensions.json
   create test/.vscode/launch.json
   create test/.vscode/settings.json
   create test/.vscode/tasks.json
   create test/package.json
   create test/tsconfig.json
   create test/.vscodeignore
   create test/vsc-extension-quickstart.md
   create test/.gitignore
   create test/README.md
   create test/CHANGELOG.md
   create test/src/extension.ts
   create test/src/test/extension.test.ts
   create test/.vscode-test.mjs
   create test/.eslintrc.json

Changes to package.json were detected.

Running npm install for you to install the required dependencies.

added 252 packages, and audited 253 packages in 7s

56 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Your extension test has been created!

To start editing with Visual Studio Code, use the following commands:

     code test

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

? Do you want to open the new folder with Visual Studio Code? Open with `code`

when I tried compiling the extension, I found the same error

/Project/node_modules/@types/cacheable-request/index.d.ts is still the file that had the error.

The error is due to this import

import ResponseLike = require('responselike');

and VS Code shows this error message on hover

Module 'responselike' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported with 'require'. Use an ECMAScript import instead.

I also seem to be on the right version of both the packages.

       │ File: package.json
   1   │ {
   2   │   "dependencies": {
   3   │     "generator-code": "^1.8.5",
   4   │     "yo": "^5.0.0"
   5   │   }
   6   │ }

aeschli commented 3 months ago

It should be npm i -g yo generator-code (note the -g or --global) You want to install yo and generator-code globally, not in your current folder.

To undo this, remove the node_modules folder from /home/anon/Desktop/Project.

The project that got created is at /home/anon/Desktop/Project/test

microsoft / vscode-generator-code

Module 'responselike' cannot be imported using this construct #451

Method I have tried to remedy this behaviour