Error `TS2307: Cannot find module` after scaffolding with pnpm

[karlhorky]

Thanks so much for Extension! Great developer experience 🙌

A TypeScript error TS2307: Cannot find module is thrown on a fresh app after using pnpm (pnpx alias for pnpm dlx) along with extension@latest create <name> --template=react-typescript to scaffold:

➜  projects $ mkdir chatgpt-summary && cd chatgpt-summary

➜  chatgpt-summary $ pnpx extension@latest create . --template=react-typescript
🐣 - Starting a new browser extension named chatgpt-summary...
🤝 - Ensuring chatgpt-summary folder exists...
🤞 - Checking if destination path is writeable...
🔎 - Scanning for potential conflicting files...
🧰 - Installing chatgpt-summary from react-typescript template...
📝 - Writing package.json metadata...
🛠  - Installing dependencies...
📝 - Writing README.md metadata...
📜 - Writing manifest.json metadata...
🔷 - Writing chatgpt-summary type definitions...
🧩 - Success! Extension chatgpt-summary created.

Now cd  and npm run dev to open a new browser instance
with your extension installed, loaded, and enabled for development.

You are ready. Time to hack on your extension!

➜  chatgpt-summary $ pnpm dev

> chatgpt-summary@0.0.0 dev /Users/k/p/chatgpt-summary
> extension dev

🧩 Extension.js ►►► chatgpt-summary (v1.0) is using TypeScript config file.
🧩 Extension.js ►►► chatgpt-summary (v1.0) extension-env.d.ts already exists.
🧩 Extension.js ►►► chatgpt-summary (v1.0) is using Tailwind config file.
🧩 Extension.js ►►► chatgpt-summary (v1.0) is using React.

🧩 Extension.js ►►► chatgpt-summary (v1.0) (webpack 5.92.1) compiled successfully in 2573 ms
ERROR in ./content/ContentApp.tsx:2:23
TS2307: Cannot find module '../public/react.png' or its corresponding type declarations.
    1 | import React from 'react'
  > 2 | import reactLogo from '../public/react.png'
      |                       ^^^^^^^^^^^^^^^^^^^^^
    3 | import tailwindBg from '../public/tailwind_bg.png'
    4 | import typescriptLogo from '../public/typescript.png'
    5 | import tailwindLogo from '../public/tailwind.png'

ERROR in ./content/ContentApp.tsx:3:24
TS2307: Cannot find module '../public/tailwind_bg.png' or its corresponding type declarations.
    1 | import React from 'react'
    2 | import reactLogo from '../public/react.png'
  > 3 | import tailwindBg from '../public/tailwind_bg.png'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 | import typescriptLogo from '../public/typescript.png'
    5 | import tailwindLogo from '../public/tailwind.png'
    6 | import chromeWindowBg from '../public/chromeWindow.png'

ERROR in ./content/ContentApp.tsx:4:28
TS2307: Cannot find module '../public/typescript.png' or its corresponding type declarations.
    2 | import reactLogo from '../public/react.png'
    3 | import tailwindBg from '../public/tailwind_bg.png'
  > 4 | import typescriptLogo from '../public/typescript.png'
      |                            ^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 | import tailwindLogo from '../public/tailwind.png'
    6 | import chromeWindowBg from '../public/chromeWindow.png'
    7 |

ERROR in ./content/ContentApp.tsx:5:26
TS2307: Cannot find module '../public/tailwind.png' or its corresponding type declarations.
    3 | import tailwindBg from '../public/tailwind_bg.png'
    4 | import typescriptLogo from '../public/typescript.png'
  > 5 | import tailwindLogo from '../public/tailwind.png'
      |                          ^^^^^^^^^^^^^^^^^^^^^^^^
    6 | import chromeWindowBg from '../public/chromeWindow.png'
    7 |
    8 | export default function ContentApp() {

ERROR in ./content/ContentApp.tsx:6:28
TS2307: Cannot find module '../public/chromeWindow.png' or its corresponding type declarations.
    4 | import typescriptLogo from '../public/typescript.png'
    5 | import tailwindLogo from '../public/tailwind.png'
  > 6 | import chromeWindowBg from '../public/chromeWindow.png'
      |                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 |
    8 | export default function ContentApp() {
    9 |   const [isdialogOpen, setIsDialogOpen] = React.useState(true)

• Name: chatgpt-summary
• Description: Open a ChatGPT summary of the current page
• Version: 1.0
• Size: 5.9 MB
• ID: ieodljkphgglabhchfjcjodinpkdnahp (temporary)
• Permissions: scripting (dev only)
• Settings URL: chrome://extensions/?id=ieodljkphgglabhchfjcjodinpkdnahp

 chrome-browser  ►►► Running Chrome in development mode. Browser extension enabled.

This appears to be caused by @extension-create/develop not being a top-level dependency in package.json (so this is not hoisted to node_modules by pnpm):

extension-env.d.ts

pnpm directory structure:

Would you consider adding @extension-create/develop (and any other dependencies that should be in node_modules at the top level) as a direct dependency in the generated package.json?

[cezaraugusto]

hi @karlhorky, thanks for the kind words!

I'm not very familiar with pnpm, but the @extension-create/develop is a top-level dependency of extension and is basically the whole package dev experience, so having it as a project top-level dependency would be redundant at the moment.

From what you said it seems that moving the types to the core package "extension" would fix the issue? Like <refrence types="extension/dist/types/index.d.ts" />. This would be more doable as a fix.

[karlhorky]

From what you said it seems that moving the types to the core package "extension" would fix the issue? Like <refrence types="extension/dist/types/index.d.ts" />. This would be more doable as a fix.

That would be one alternative, yep!

A bit more background: Referencing anything that is not a direct dependency of the user's project will error out as unresolvable with pnpm (and other package managers, if I remember correctly).

So referencing extension (which is a top-level dependency in the user's package.json) should be no problem.