'An importer must have either canonicalize and load methods, or a findFileUrl method' after migrating to 6

[roniemartinez]

We are trying to upgrade from 5.1.0 to 6.0.0 and following the guide from https://github.com/dlmanning/gulp-sass?tab=readme-ov-file#migrating-to-version-6

However, it seems an importer that we are using (node-sass-tilde-importer) is not compatible with this version.

// gulpfile.mjs

import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import tildeImporter from "node-sass-tilde-importer";

const sass = gulpSass(dartSass);

// ...

gulp.task('app_sass', function () {
    return gulp.src(dir.app_scss + '*.scss')
        // ...
        .pipe(sass({importer: tildeImporter, style: 'compressed'}).on('error', sass.logError))
        // ...
});

Error:

Error in plugin "sass"
Message:
    static/app/scss/app.min.scss
An importer must have either canonicalize and load methods, or a findFileUrl method.

Are there any guides for this? Thanks

[xzyfer]

That importer is not updated to the new sass API. You'll need to use legacy ssss API.

On Thu, 28 Nov 2024, 11:10 pm Ronie Martinez, @.***> wrote:

We are trying to upgrade from 5.1.0 to 6.0.0 and following the guide from https://github.com/dlmanning/gulp-sass?tab=readme-ov-file#migrating-to-version-6

However, it seems an importer that we are using (node-sass-tilde-importer) is not compatible with this version.

// gulpfile.mjs import * as dartSass from 'sass';import gulpSass from 'gulp-sass';import tildeImporter from "node-sass-tilde-importer"; const sass = gulpSass(dartSass); // ... gulp.task('app_sass', function () { return gulp.src(dir.app_scss + '*.scss') // ... .pipe(sass({importer: tildeImporter, style: 'compressed'}).on('error', sass.logError)) // ...});

Error:

Error in plugin "sass" Message: static/app/scss/app.min.scss An importer must have either canonicalize and load methods, or a findFileUrl method.

Are there any guides for this? Thanks

— Reply to this email directly, view it on GitHub https://github.com/dlmanning/gulp-sass/issues/873, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAENSWGWQ6H3XJKIIRVG4DD2C4BZVAVCNFSM6AAAAABSU7VZYKVHI2DSMVQWIX3LMV43ASLTON2WKOZSG4YDCOJWGYZTSMY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[nitesh-voya]

I am also getting the same issue after I migrated gulp-sass to 6.0.0 version. I am using node-sass-import-once

[codebymikey]

Solvable with a custom importer such as this:

const path = require('path');
const { pathToFileURL } = require('url');

const nodeModulesDir = path.resolve(__dirname, '..', 'node_modules');

module.exports = {
  // An importer that redirects relative URLs starting with "~" to
  // `node_modules`.
  findFileUrl(url, context) {
    if (!url.startsWith('~')) {
      return null;
    }
    const relativePath = url.slice(1);
    const basePath = path.join(nodeModulesDir, relativePath);
    return pathToFileURL(basePath);
  }
};

https://sass-lang.com/documentation/js-api/interfaces/fileimporter/

Or switch to using the NodePackageImporter ~, however it won't work with sass-embedded version because it doesn't implement the findFileUrl method~.

edit: I later found that the reason it didn't work was because I just hadn't updated my import to use the sass-embedded version.

[stof]

Or switch to using the NodePackageImporter, however it won't work with sass-embedded version because it doesn't implement the findFileUrl method.

sass-embedded also support using NodePackageImporter (if you use the NodePackageImporter exported by sass-embedded)