Failing to load Sass from loadPreprocessor #5815
Comments
Related to vitejs#5815, going through this function I found that the module was being resolved correctly but an error was being thrown during `require`, which the default error message swallowed. If I follow other uses of the debug helpers, this should throw the standard error unless the user's in debug mode, then it should debug the load error and throw the full stack trace.
|
Digging into this a little bit more, it looks like this error is coming from a code path being hit in Sass that tells it it's being loaded in a browser, but it appears to only be triggering in my codebase, not in a new clean codebase, and I'm unsure why |
|
After digging into this and successfully reproducing a minimal case, I believe this is a Sass issue and not a Vite issue, so closing. |
|
Sorry, jumped the gun here, and sorry for the churn, it's not a pure Sass issue, it's an issue with how Vite and Sass interact at this edge case. A basic test to see if it's just a Sass problem (below) still const sass = require('sass');
const {ImagePool} = require('@squoosh/lib')
const file = sass.renderSync({file: './style.scss'});
console.log(file);Same params as original issue |
|
@Snugug Is the repro updated with your findings? I'm also confused why the code is written in CJS. |
|
I see. Thanks for the update! I didn't notice the CJS is for the plugin code, but yes that makes sense for the issue. |
|
I'm getting essentially the same bug when using |
|
I have same error with using @squoosh/lib. When squoosh module imported, fail to load sass. import { ImagePool } from "@squoosh/lib";
export default defineConfig({...}) |
|
You need to install the Sass preprocessor. |
|
After updating vite to latest (v2.9.5), I got a more specified error. Thanks to the error, I found this happens without Vite. const { ImagePool } = require('@squoosh/lib');
const sass = require('sass')
const res = sass.renderSync({ data: '.foo {color: red}' })
console.log(res)This script fails with the same error. If you comment out the first line, it works without error. I guess this is caused by For a workaround add /* eslint-env node */
const { defineConfig } = require('vite');
const path = require('path');
const { ImagePool } = require('@squoosh/lib');
global.navigator = undefined
module.exports = defineConfig({
root: 'src',
});Closing as it is not a bug with Vite. |
|
@Snugug Sorrry I noticed this comment after posting the previous comment. |
installing only sass preprocessor is not enough.. still am getting the dependency error |
|
I got it. const sass = require('sass');
const { ImagePool } = require('@squoosh/lib'); // global.navigator is declared inside#5815 (comment) did not work because sass is loaded after squoosh. const { ImagePool } = require('@squoosh/lib'); // global.navigator is declared inside
const sass = require('sass');Vite loads config before loading preprocessors. So it was happening. @vaasav-kumar Please create a new issue with reproduction if you are still having the error. |
Describe the bug
I have a Sass file I'm including directly from my HTML. I'm getting a an error,
Preprocessor dependency "sass" not found. Did you install it?when it tries to compile my Sass. Digging through Vite's code, I see thatresolvedfromloadPreprocessoris correctly finding the path to my Sass instance (/node_modules/sass/sass.default.dart.js). However, the preprocessor not found error gets thrown when trying torequireit. This is where things get weird:requireit using the same absolute path Vite finds in a top-level file, itrequires fine.distfolder, it stillrequires fine.requireing Sass at that exact line in Vite; (return (loadedPreprocessors[lang] = require(resolved));) makes Sass throw the following error:It only throws this error when it gets required from
loadPreprocessorin Vite. Requiring it on its own elsewhere, everything seems to work!Reproduction
Minimal failure case here. My best guess as to the problem is that Squoosh uses Node workers and simply requiring it throws Sass into thinking it's in a browser.
System Info
System: OS: macOS 12.0.1 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Memory: 390.18 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.18.1 - ~/.volta/tools/image/node/14.18.1/bin/node npm: 6.14.15 - ~/.volta/tools/image/node/14.18.1/bin/npm npmPackages: vite: ^2.7.0-beta.8 => 2.7.0-beta.8Used Package Manager
npm
Logs
Validations
The text was updated successfully, but these errors were encountered: