Based on app-template-react

Example of using Snowpack in conjuction with babel-plugin-import-global. This is useful when you need to need to inject an import statement at the top of every file, such as React:

// "import React from 'react'" no longer needed!
function MyComponent() {
  // …
}

export default MyComponent;

To recreate this setup, follow 2 steps:

1. Create a babel.config.js file in the root of the project. Copy the settings shown.
2. Install @snowpack/plugin-babel and add it to snowpack.config.js

⚠️ Caveat

When you use @snowpack/plugin-babel, you miss out on the faster builds that come from Snowpack‘s default JS builder, esbuild (we don‘t run both together to avoid conflict). However, if you skip Babel, you will have to manually place import statements yourself at the top of every file.

We‘d recommend being explicit and manually managing every import statement yourself. You can simplify your setup, speed up your builds, and you might see benefits from being explicit. In order to do this, simply use our React starter template. No setup required.

But if you‘ve weighed the tradeoffs and decide that a slower build is worth it to get global import functionality, then start from the example here.