Imported SCSS files seem to cause "Cannot read properties of undefined (reading 'paths')" issue

[flayks]

Describe the bug

Since the latest versions of SvelteKit (or SASS, maybe Vite?), imported SCSS stylesheets like so are causing an issue:

<!-- ./src/components/atoms/Button.svelte -->
<script>
    export let text
</script>

<button>
    {text}
</button>

<style lang="scss">
    @import "../../style/atoms/button";
</style>

[vite-plugin-svelte-kit] Cannot read properties of undefined (reading 'paths')
error during build:
TypeError: Cannot read properties of undefined (reading 'paths')

Commenting the @import line doesn't cause the problem anymore.

Reproduction

Tried it on a fresh repo with a single <Button> component importing a .scss file (to keep the scoping and avoid bloating the single-file component of potentially hundreds of lines of SCSS)

https://github.com/flayks/sveltekit-bug-reading-paths-sass/blob/main/src/components/atoms/Button.svelte

Tried to downgrade a few version of SK and Vite but cannot really find the origin of issue so far

Logs

> Using @sveltejs/adapter-auto
[vite-plugin-svelte-kit] Cannot read properties of undefined (reading 'paths')
error during build:
TypeError: Cannot read properties of undefined (reading 'paths')
    at create_builder (file:///Users/flayks/Desktop/test/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/chunks/index2.js:52:48)
    at adapt (file:///Users/flayks/Desktop/test/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/chunks/index2.js:204:18)
    at Object.closeBundle (file:///Users/flayks/Desktop/test/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/vite.js:3104:11)
    at async Promise.all (index 0)
    at async /Users/flayks/Desktop/test/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23693:13
    at async catchUnfinishedHookActions (/Users/flayks/Desktop/test/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23174:20)
    at async rollupInternal (/Users/flayks/Desktop/test/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23682:5)
    at async doBuild (/Users/flayks/Desktop/test/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:41710:24)
    at async build (/Users/flayks/Desktop/test/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:41552:16)
    at async CAC.<anonymous> (/Users/flayks/Desktop/test/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/cli.js:738:9)
 ELIFECYCLE  Command failed with exit code 1.

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 133.59 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 103.1.40.113
    Firefox: 102.0
    Safari: 15.5
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.55 
    @sveltejs/adapter-vercel: 1.0.0-next.60 => 1.0.0-next.60 
    @sveltejs/kit: next => 1.0.0-next.370 
    svelte: ^3.49.0 => 3.49.0 
    vite: ^2.9.14 => 2.9.14

Severity

blocking an upgrade

Additional Information

No response

[flayks]

Maybe a clue: adding the extension file to the import seems to fix the issue?

<style lang="scss">
    @import "../../style/atoms/button.scss";
</style>

It is strange as it used to work before without it though.

[flayks]

Digging deeper here, it feels that I also had an issue with one of my SCSS files, using BEM with a global (my bad 🤦)

// Explore Page
:global(.explore) {
    overflow: hidden;

    &__locations {
        @include bp (sm, max) {
            margin-top: 72px;
        }
    }
}

Instead of

// Explore Page
:global(.explore) {
    overflow: hidden;
}
:global(.explore__locations) {
    @include bp (sm, max) {
        margin-top: 72px;
    }
}

The error remains the same though, which in this case doesn't make much sense so I think there is still an issue here

[vite-plugin-svelte-kit] Cannot read properties of undefined (reading 'paths')
error during build:
TypeError: Cannot read properties of undefined (reading 'paths')
[...]

[coryvirok]

I ran into something similar the other day after upgrading to next.78 and the fix was to move the vite config into vite.config.js (vs. where it used to be in svelte.config.js.) Example here - https://github.com/sveltejs/kit/blob/master/packages/create-svelte/templates/skeleton/vite.config.js

[stolinski]

I'm seeing this same error, but have already moved our Vite config to vite.config.js so I don't that's the fix. To make this more confusing I'm not importing scss in a style tag, but am using an import of scss at the top of the script tag.

@flayks what versions of Sass are you working with? Our package.json has "sass": "^1.51.0", and "svelte-preprocess": "^4.10.1",

Also in case it helps debug here is my error

[vite-plugin-svelte-kit] Cannot read properties of undefined (reading 'paths')
error during build:
TypeError: Cannot read properties of undefined (reading 'paths')
    at create_builder (file:///Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/chunks/index2.js:52:48)
    at adapt (file:///Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/chunks/index2.js:204:18)
    at Object.closeBundle (file:///Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.370_svelte@3.49.0+vite@2.9.14/node_modules/@sveltejs/kit/dist/vite.js:3104:11)
    at async Promise.all (index 0)
    at async /Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23693:13
    at async catchUnfinishedHookActions (/Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23174:20)
    at async rollupInternal (/Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/rollup@2.76.0/node_modules/rollup/dist/shared/rollup.js:23682:5)
    at async doBuild (/Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:41710:24)
    at async build (/Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:41552:16)
    at async CAC.<anonymous> (/Users/scotttolinski/Sites/Level-Up-Tutorials/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/cli.js:738:9)

[justingolden21]

Getting this error as well, but removing every single css import still doesn't fix it. Originally thought it was due to duplicate file names, but somehow it seems like that wasn't it. I have a vite.config.js that's the same as the one you shared and haven't upgraded any packages vs a branch that has everything working, but can't figure out which changes are breaking it. I removed a duplicate file and it fixed it, added it back and broke it, and repeated twice, but then it continued to stay broken, even after a fresh start. That file has nothing to do with anything that would cause an error here, and I've kept the file deleted and am still getting the error. Weird that it was temporarily fixed though.

[justingolden21]

My dev dependencies:

"@sveltejs/adapter-netlify": "1.0.0-next.67",
		"@sveltejs/kit": "1.0.0-next.369",
		"@types/lodash": "4.14.182",
		"autoprefixer": "10.4.7",
		"eslint": "8.19.0",
		"eslint-config-prettier": "8.5.0",
		"eslint-plugin-svelte3": "4.0.0",
		"mdsvex": "0.10.6",
		"postcss": "8.4.14",
		"postcss-load-config": "4.0.1",
		"prettier": "2.7.1",
		"prettier-plugin-svelte": "2.7.0",
		"svelte": "3.49.0",
		"svelte-check": "2.8.0",
		"svelte-preprocess": "4.10.7",
		"tailwindcss": "3.1.6",
		"vite": "2.9.14"

[legowhales]

There seem to be a common problem due to the fact that the prerender is undefined in the builder. So this error is thrown instead of the source error. Before this fix #5439, there seem to be no error, but nothing is prerendered. What about you?

[stolinski]

@legowhales we aren't using prerender in our build.

[justingolden21]

I read on the discord that someone solved it by installing a missing module. I've got everything installed and removed node_modules and the package lock and reinstalled, same problem. Didn't have this yesterday. My friend just got this problem a few mins ago, worked and refreshed and didn't work, no changes at all.

[brittneypostma]

I'm getting the same error in a project with sass as well. Only when building to production, it builds and previews fine locally.

[Rich-Harris]

The original error was fixed by #5536. I've no idea what's going on with the .scss file extension but I would guess that it's a change in Vite's resolution logic with v3 (maybe @bluwy knows?) so I think we should probably close this issue

[flayks]

The original error was fixed by #5536. I've no idea what's going on with the .scss file extension but I would guess that it's a change in Vite's resolution logic with v3 (maybe @bluwy knows?) so I think we should probably close this issue

Indeed it seems to be fixed since then. I now get the actual errors instead of this generic path one.
For instance with the bit I used originally I get that error now:

[plugin:vite-plugin-svelte] Error while preprocessing /Users/flayks/sites/housesof/site/src/routes/locations.svelte - Invalid parent selector ":global(.explore)"