🐛 BUG: Cannot read property 'code' of undefined at Snowpack 3.8.0+

Quick checklist

• I am using the latest version of Snowpack and all plugins.

What package manager are you using?

yarn

What operating system are you using?

macOS

Describe the bug

Upon updating snowpack to any version above 3.8.0, I receive the following error:

TypeError: Cannot read property 'code' of undefined
    at FileBuilder.getProxy (/Users/negan/Projects/Firesquad/firesquad-app/node_modules/snowpack/lib/cjs/build/file-builder.js:267:48)
    at loadUrl (/Users/negan/Projects/Firesquad/firesquad-app/node_modules/snowpack/lib/cjs/commands/dev.js:628:55)
    at async handleRequest (/Users/negan/Projects/Firesquad/firesquad-app/node_modules/snowpack/lib/cjs/commands/dev.js:728:28)

[23:33:13] [snowpack] TypeError: Cannot read property 'code' of undefined
[23:33:13] [snowpack] [500] /_snowpack/link/packages/ui/styles.css.proxy.js

Looks to be caused by proxy style files, this even happens when disabling all plugins.

Steps to reproduce

1. yarn add snowpack@latest
2. snowpack dev
3. Fails

Link to minimal reproducible example (optional)

No response

[Sewdn]

When trying to fix this, it was also necessary to change the responseType to .woff2, not only the resourceType. But now I get a browser error:

Loading module from “http://localhost:8080/_snowpack/link/themes-mui/dist/fonts/Circular/lineto-circular-medium.woff2.proxy.js” was blocked because of a disallowed MIME type (“font/woff2”)

So the root of the problem seems to me, that this asset should not be proxied as a .js anyway. It has more to do with the file-loader being used when importing a relative static file like so:

import CircularMediumRef from './lineto-circular-medium.woff2';

This shouldnt be rewritten as a proxied reference?

But when I run snowpack for production, it has the same problem. When using webpack, this works out-of-the-box.

[Sewdn]

@jacty I have a similar issue in a lerna managed monorepo, where one of my packages is importing a local .woff2 asset. The woff2 asset is in a prebuild step being copied to the /dist folder of that package.

Snowpack is trying to fetch a proxy for this asset (by adding .proxy.js to a static asset?):

[07:58:07] [snowpack] TypeError: Cannot read property 'code' of undefined
[07:58:07] [snowpack] [500] /_snowpack/link/themes-mui/dist/fonts/Circular/lineto-circular-medium.woff2.proxy.js

When I debug the getProxy line 269: const code = this.resolvedOutput[type].code;, because of this.resolvedOutput[type] being undefined, this is because type was set to ‘.js’ and not ‘.woff2’?

The FileBuilder.build didnt fail. resolvedOutput contains a key ‘.woff2’, with an object with a code field with the correct content.

When I change this line to

const code = this.resolvedOutput[type] ? this.resolvedOutput[type].code : this.resolvedOutput[Object.keys(this.resolvedOutput)[0]].code;`

the file is being resolved correctly.

The root of this issue, seems to be that the resourceType of the asset, is wrongly being decided to be .js. I suppose this is because of the extension of the proxy that needs to be stripped of for static assets when deciding on fileType.

https://github.com/snowpackjs/snowpack/blob/main/snowpack/src/commands/dev.ts#L624 the foundType is derived from the reqPath, instead of the resourcePath, where the .proxy.js suffix was already stripped off?

This only is the case for assets inside a symlinked directory (monorepo setup) (https://github.com/snowpackjs/snowpack/blob/main/snowpack/src/commands/dev.ts#L551) because for all others the resourceType is being derived from the resourcePath instead of the req(uest)Path: https://github.com/snowpackjs/snowpack/blob/main/snowpack/src/commands/dev.ts#L645