Build fails with could not find @babel/plugin-syntax-import-meta

[agneym]

Been using 2.0 beta from the day it dropped, it's working out really great on development so far 👏 Thank you for the library.

Issue:
Running snowpack build --bundle fails with the message:

Error: Cannot find module '@babel/plugin-syntax-import-meta'
  Require stack:
  - /Users/agney/code/run-throughs/reco/node_modules/snowpack/dist-node/index.js
  - /Users/agney/code/run-throughs/reco/node_modules/snowpack/dist-node/index.bin.js
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)

Reproduction:
I have been working on a repo at https://github.com/agneym/reco, it's not a minimal reproduction(sorry), but I believe it's not doing anything complex at the moment

Expected:
Build succeeds.

[FredKSchott]

Thanks! We removed a bunch of old babel deps to make Snowpack lighter, looks like this one got removed incorrectly.

Fixed in c00ce85

[haikyuu]

I still get this error using snowpack 2.4.0 with pnpm.

And even when i installed the missing package, it throws with the next Cannot find module '@babel/preset-react' from.

I think Snowpack resolution algorithm doesn't understand the node_modules structure of pnpm.

When i used shamefully-hoist option, it worked properly. That's the workaround to use for the moment.

But i really hope Snowpack works well with pnpm. Because they are both great tools that make web coding lightning fast. ⚡ ❤️

[FredKSchott]

I don't think we're doing anything wrong here, our app-scripts-react is where "@babel/preset-react" is used, and where it's defined as a dependency. It seems like pnpm (or maybe Babel) is incorrectly loading it as a bad/known dependency.

I'd love to support pnpm without the shamefully-hoist option, but not sure how to fix this.

[dworthen]

One way to be compatible with pnpm would be to flatten the templates generated by CSA. For example, the babel.config.js in app-template-react-typescript extends the one in app-script-react.

To flatten...

1. Add the babel.config.js code directly to the app-template-react-typescript template instead of extending.
2. Add all the babel plugins to the package.json of app-template-react-typescript.

Technically only step 2 is required but since the dependencies will be listed in the root template I personally think it makes sense to flatten out the config too. Step 2 is enough to hoist the babel plugins for babel's resolution strategy to work.

This flattening would be necessary for any plugin or tool that has a resolution strategy not compatible with node. So far I've only run into the issue with babel but have not tested all the templates or other plugins such as the webpack bundling plugin.

I would be happy to test other templates/plugins, update the templates, test compatibility with pnpm, npm, and yarn, and then make a PR if this flattening out strategy seems like a sensible direction to take.

Thanks for the incredible tooling!

[FredKSchott]

Thanks for the feedback! I agree, the "extends" property was great early on for automatically updating users to the latest config behind the scenes. But, now that that config has baked and settled a bit, that benefit is no longer as important.

[vadimyen]

I have the same error with pnpm by now

[FredKSchott]

#1137

This PR should solve the error by removing the "extends" usage in our Create Snowpack App templates