auto-externalize peer deps

[kevinbarabash]

I noticed that peerDependencies are included in the bundles that rollup generates. I tried adding the following to my snowpack.config.js:

const autoExternal = require('rollup-plugin-auto-external');

{
    ...
    installOptions: {
    rollup: {
      plugins: [
        autoExternal(),
      ]
    }
  }
}

Unfortunately, it doesn't seem to work as expected:

[snowpack] ! clearing cache...
[snowpack] ! updating dependencies...
[snowpack] ! installing dependencies…
[snowpack] ✔ install complete [1.68s]
[snowpack] 
  ⦿ web_modules/                             size       gzip       brotli   
    ├─ @khanacademy/wonder-blocks-button.js  356.81 KB  84.12 KB   68.24 KB   
    ├─ react-dom.js                          0.37 KB    0.26 KB    0.21 KB    
    └─ react.js                              0.52 KB    0.33 KB    0.25 KB    


[snowpack] Error: Command failed with exit code 1: osascript ../assets/openChrome.applescript "http://localhost:8081"
[snowpack] [404] /react/index.js
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react/index.js
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react/index.mjs
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react/index.jsx
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react/index.ts
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react/index.tsx
[snowpack] [404] /react-dom/index.js
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react-dom/index.js
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react-dom/index.mjs
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react-dom/index.jsx
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react-dom/index.ts
  ✘ /Users/kevinbarabash/khan/snowpack-flow/public/react-dom/index.tsx

The package.json for @khanacademy/wonder-blocks-button has react and react-dom both marked as peerDependencies. It also has a couple of other modules marked as peerDependencies (aphrodite and react-router-dom) which aren't showing up in the output list.

I was hoping snowpack/rollup would generate web modules for all four of these dependencies. As it stands though all of the peer deps are still being included in wonder-blocks-button.js.

[FredKSchott]

Since Snowpack is for building websites, peer dependencies are meant to be included in the dependencies that Snowpack installs so that wonder-blocks-button can use them on the frontend. Otherwise, they wouldn't be accessible on your website.

[kevinbarabash]

The thinking was that snowpack could build web_modules from peer deps and then any import for "react" or "aphrodite" in wonder-blocks-button would become imports for "/web_modules/react" and "/web_modules/aphrodite".

After some more investigation, I see that rollup will extract deps shared between node modules and create common bundles. I added wonder-blocks-link which also has react and aphrodite as deps and the wonder-blocks-link.js and wonder-blocks-button.js bundles got a lot smaller. The interesting thing is that it won't extract react from wonder-blocks-button alone.