Builds working locally but failing on Netlify, recent changes are unrelated to build afaik

Support
1

I recently noticed my builds were failing. The first error was

[vite-plugin-svelte] Error while preprocessing /opt/build/repo/src/routes/(core)/projects/+page.svelte - Preprocessor dependency "sass" failed to load:
9:29:53 PM: Cannot read properties of undefined (reading "indexOf")
9:29:53 PM: file: /opt/build/repo/src/routes/(core)/projects/+page.svelte
9:29:53 PM: error during build:
9:29:53 PM: TypeError: Cannot read properties of undefined (reading "indexOf")
9:29:53 PM:     at /opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:115850:12
9:29:53 PM:     at Object.applyHooksTransformer (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:1863:14)
9:29:53 PM:     at Object.initHooks (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:1843:251)
9:29:53 PM:     at Object.initNativeDispatchContinue (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:1809:9)
9:29:53 PM:     at Object.initNativeDispatch (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:1803:9)
9:29:53 PM:     at Object.getNativeInterceptor (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:29105:13)
9:29:53 PM:     at Object.getInterceptor$x (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:29366:16)
9:29:53 PM:     at Object.set$compile$x (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:29430:16)
9:29:53 PM:     at Object.main (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:24215:9)
9:29:53 PM:     at main2 (/opt/build/repo/node_modules/.pnpm/sass@1.68.0/node_modules/sass/sass.dart.js:26009:9)
9:29:53 PM: Error: Preprocessor dependency "sass" failed to load:
9:29:53 PM: Cannot read properties of undefined (reading "indexOf")
9:29:53 PM:     at loadPreprocessor (file:///opt/build/repo/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.3_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:39272:29)
9:29:53 PM:     at scss (file:///opt/build/repo/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.3_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:39310:20)
9:29:53 PM:     at compileCSSPreprocessors (file:///opt/build/repo/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.3_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:38735:36)
9:29:53 PM:     at compileCSS (file:///opt/build/repo/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.3_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:38785:42)
9:29:53 PM:     at async preprocessCSS (file:///opt/build/repo/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.3_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:38969:12)
9:29:53 PM:     at async style (file:///opt/build/repo/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.6_svelte@4.2.1_vite@4.4.9/node_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:87:31)
9:29:53 PM:     at async process_single_tag (file:///opt/build/repo/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/preprocess/index.js:283:21)
9:29:53 PM:     at async Promise.all (index 0)
9:29:53 PM:     at async replace_in_code (file:///opt/build/repo/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/preprocess/replace_in_code.js:69:23)
9:29:53 PM:     at async process_tag (file:///opt/build/repo/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/preprocess/index.js:300:26)

I also noticed a warning…

[WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
9:29:51 PM:     tsconfig.json:2:12:
9:29:51 PM:       2 │   "extends": "./.svelte-kit/tsconfig.json",
9:29:51 PM:         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I resolved that and from that point onwards I seem to have the same error every time.

The site build locally using vite build. Dev mode works fine as well, the sass is being processed correctly and rendering correctly on the page that the error logs point to.

The most recent thing I tried to see if it would affect anything was to downgrade sass as it was the lib that was being pointed to in the error but that didn’t chance anything. My reason for posting here is that from what I can tell, I didn’t change anything related to the build between the commits where it build correctly on Netlify and where it broke, and that I can build it successfully locally. These both together certainly make me feel like I didn’t seem to be the cause of the issue (I could be totally wrong and it is something I did but I can’t see the evidence of that yet) and so I am ending up here after a lot of reading through posts and various discussions of similar—but not the same—issues on the various GitHub repos for the libraries involved in the building of this site. Below I’ve added some links to some of the builds. Hopefully this is enough info.

Site

Most recent passing build
Changeset for most recent passing build

First failing build
Changeset for first failing build

Most recent failing build

Thank you for your time and any help/direction you can give me

2

I have continued to try and understand this problem since posting and I’m still very lost. The only significant progress I made was commenting out all <style lang="scss"> blocks and then seeing the build complete successfully. This is obviously not a win because I want to use scss on this site but it is pointing to the fact that the scss stuff is not super likely to be masking a bigger underlying issue.

That being said, I did start to try and downgrade the sass package but have been noticing that on a Retry without cache it doesn’t pick up my changes to the package versions which 1) Sucks, because it makes debugging next to impossible if I can’t rely on the fact that a change I make to the packages will take effect 2) Makes me wonder if this build should have been failing since I upgraded a bunch of dependencies back at the end of July but because of some very intense cacheing on Netlify’s end it essentially didn’t show up for 3 months.

The only other things I have tried are creating a new site using the same repo but that failed (I haven’t tried duplicating that repo and renaming it though, maybe the caching is still in effect because of the repo name or some other association and Netlify is trying to be economic with what it builds/rebuilds even across sites given it’s pointed at the same repo, might try that next)

I also tried creating a new Svelte project and adding sass to it and deploying it to Netlify. This worked perfectly. My project is definitely more complicated than that one and is running on slightly more recent package versions, I actually tried to match package versions between my existing broken project and this new blank slate test project I created and it didn’t fix it but now I’m feeling uncertain given my comments above about noticing that when I downgraded sass (went back to 1.62.1 but still shows as 1.68.0 in the logs on Netlify).

Again, any help at all would be appreciated.

Really hoping to get some

3

I got it back working but I’m still pretty confused as to what was the real source of the issue given I didn’t change these particular things between passing and failing deploys but, for others who this might help, what worked for me was.

I downgraded sass to ^1.62.1 which is still pretty odd because in the lockfile it’s saying

  sass:
    specifier: ^1.62.1
    version: 1.69.4

So it seems to be using the latest (I tried deploying with and without this change and it did not work without me downgrading)

The second thing I did was remove a .nvmrc file which just had node as its entire file contents. I don’t remember why I added it but I’m sure it was to resolve a different error I had in the past.

Anyway, the combination of these two changes got a branch build passing finally and when I merged it into main it finally deployed successfully again. I am really confused and that was a pretty garbage experience of debugging this with really very little insight into what I did to cause it (I hope that someone on the Netlify team is able to piece together these clues to unearth that it was infact some weird edgecase and can fix it for others going forward).

I hope this works for the next person who runs into this problem.

4

So just to confirm, you were using sass 1.69.4 and downgrading to 1.62.1 fixed this?