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

[Negan1911]

Quick checklist

• [X] 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

[jacty]

it seems FileBuilder.build('styles.css') failed..check if you can isolate the styles.css out to debug?

[canozo]

I've ran into this issue with css/scss files before and it usually means the file is empty, adding an empty .root {} class or any line of css inside the file usually fixes it for me.

[Negan1911]

Yeah sorry for hanging into this one, the file is definitively not empty and I've got it working for any version below 3.8.0+. I'll try to debug which file is making this fail and post it here

[Negan1911]

Content of the file is:

#nprogress .bar {
  background: linear-gradient(to right, #4391ff, #5d04d1);
}

#nprogress .peg {
  box-shadow: 0 0 10px var(#5d04d1), 0 0 5px var(#5d04d1);
}

#nprogress .spinner {
  display: none;
}

It fails whenever the content is, it may be because I'm importing it using monorepos? on my JS i use it as import '@mypkg/ui/styles.css'

[jacty]

Content of the file is:

#nprogress .bar {
  background: linear-gradient(to right, #4391ff, #5d04d1);
}

#nprogress .peg {
  box-shadow: 0 0 10px var(#5d04d1), 0 0 5px var(#5d04d1);
}

#nprogress .spinner {
  display: none;
}

It fails whenever the content is, it may be because I'm importing it using monorepos? on my JS i use it as import '@mypkg/ui/styles.css' the logic here is css file will be proxyed(renamed to styles.css.proxy.js), and its contents will be read and attach to an obj { 'type':{ code:{} } } 'type' is the resouce type like '.js', '.css' and so on. 'code' is the content of the file. For this error, usually it is because getProxy() is trying to find the obj with the right 'type' and failed. So probably the 'type' has been processed wrongly. Check if you can reproduce the code base for us to help, please.

[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

[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.

[jeffrson]

Having no experience with snowpack, I simply tried "snowpack build" from a libraries workspace, not workspaces root. Put this into snowpack.config.js:

module.exports = {
  workspaceRoot: false,
}

It's a typescript library, using yarn on Windows, Snowpack 3.8.8. Here's the log

$ C:\mono-rep\node_modules\.bin\snowpack build
[14:43:39] [snowpack] ! building files...
[14:43:41] [snowpack] ✔ files built. [1.91s]
[14:43:41] [snowpack] ! building dependencies...
[14:43:52] [esinstall] C:\mono-rep\node_modules\telejson\dist\esm\index.js:314:15 Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
[14:43:52] [esinstall] C:\mono-rep\node_modules\telejson\dist\esm\index.js:320:16 Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
[14:43:54] [snowpack] ✔ dependencies built. [12.93s]
[14:43:54] [snowpack] ! writing to disk...
[14:43:55] [snowpack] Build Result Error: There was a problem with a file build result.
[14:43:55] [snowpack] Cannot read properties of undefined (reading 'code')
[14:43:55] [snowpack] TypeError: Cannot read properties of undefined (reading 'code')
    at FileBuilder.getProxy (C:\mono-rep\node_modules\snowpack\lib\cjs\build\file-builder.js:267:48)
    at Object.loadUrl (C:\mono-rep\node_modules\snowpack\lib\cjs\commands\dev.js:629:55)
    at flushFileQueue (C:\mono-rep\node_modules\snowpack\lib\cjs\build\process.js:191:40)
    at async Object.writeToDisk (C:\mono-rep\node_modules\snowpack\lib\cjs\build\process.js:253:5)
    at async build (C:\mono-rep\node_modules\snowpack\lib\cjs\commands\build.js:13:5)
    at async Object.command (C:\mono-rep\node_modules\snowpack\lib\cjs\commands\build.js:35:9)
    at async cli (C:\mono-rep\node_modules\snowpack\lib\cjs\index.js:174:9)