[pnpm] missing dependencies in app-template-react-typescript (--use-pnpm)

[David Velasco]

Description

Using CSA with the --template @snowpack/app-template-react-typescript and --use-pnpm option together, the resulting bootstrapped app will fail to start or build.

mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
mount:public............[DONE] mount public --to /
mount:src...............[DONE] mount src --to /_dist_
run:tsc.................[WATCH] tsc --noEmit
build:js,jsx,ts,tsx.....[ERROR] (plugin) @snowpack/plugin-babel

Reproduce

pnpx create-snowpack-app react-snowpack --template @snowpack/app-template-react-typescript --use-pnpm
pnpm run start
# or
pnpm run build

Cause

By default, pnpm creates a non-flat node_modules folder. Phantom dependencies will raise missing module errors. For example, running pnpm run build leads to the following error:

Cannot find module '@babel/plugin-syntax-import-meta' from '<project_folder>/node_modules/@snowpack/app-scripts-react'

Missing Plugins

For snowpack build and development, the missing plugins are:

@babel/plugin-syntax-import-meta
@babel/preset-react
@babel/preset-typescript
babel-preset-react-app

Once a bundler is connected, more missing dependency errors arise. For example, using @snowpack/plugin-webpack:

babel-loader
@babel/preset-env
file-loader
core-js
css-loader

There are potentially many more, but that'd depend on the specific webpack config passed to the bundler.

Workaround / Fix

My current workaround is to add the missing dependencies once they are found. Another workaround would be to set the shamefully-hoist option to true in the .npmrc file. This is indeed what Vue CLI did (don't know currently).

Perhaps a more permanent solution would be to implement something similar to eject for pnpm installs so that all required dependencies are hoisted.

Edit: I haven't tested other templates, but I suspect this issue is not exclusive to the react template. Any framework that relies on dependency hoisting to bootstrap should run into the same problem.

[Deleted user]

Workaround one-liner for folks in a hurry:

pnpm add -D @babel/plugin-syntax-import-meta @babel/preset-react @babel/preset-typescript && pnpm start

[David Else]

In most cases it means that one of the dependencies require packages not declared in package.json. It is a common mistake caused by flat node_modules. If this happens, this is an error in the dependency and the dependency should be fixed. That might take time though, so pnpm supports workarounds to make the buggy packages work.
...

https://pnpm.js.org/en/faq#pnpm-does-not-work-with-your-project-here