nuxt3: resolver.resolveModule is not a function

[Zielgestalt]

Thanks for this module. It makes life so much easier! I tried to use it in with nuxt3 beta, but (as expected) it's not working out of the box. Is there a plan to make this module nuxt3 ready? Thanks!

Here's what I get when using it with sass and sass-loader:

Fresh nuxt3 beta install (3.0.0-27235451.ece0e01)

Mac OSX
Node: v14.17.6

yarn dev -o

Cannot start nuxt: resolver.resolveModule is not a function

at node_modules/@nuxtjs/style-resources/lib/module.js:35:43
at Array.reduce ()
at node_modules/@nuxtjs/style-resources/lib/module.js:34:42
at Array.reduce ()
at retrieveStyleArrays (node_modules/@nuxtjs/style-resources/lib/module.js:32:25)
at Object.nuxtStyledResources (node_modules/@nuxtjs/style-resources/lib/module.js:50:60)
at installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
at initNuxt (node_modules/nuxt3/dist/index.mjs:817:11)
at async load (node_modules/nuxi/dist/chunks/dev.mjs:6763:9)
at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6794:5)

✔ Generated nuxt.d.ts

[JonesGladston]

Same issue, any help will be helpful

[melrefaie]

yep same issue

[dawidstolarski]

Any updates here? Got stuck at the same point.

[henrycunh]

same here!

[cheapwebmonkey]

same here

[designbydc]

With Nuxt 3 this module still is not supported. Use the vite config property with preprocessorOptions option:

vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/assets/scss/global.scss";',
            },
        },
    },
}

Source: https://vite.nuxtjs.org/misc/common-issues#styleresources

[JonesGladston]

@designbydc Thanks, it works.

[volkipp]

For anyone using webpack with Nuxt 3 or Nuxt Bridge, I was able to modify the plugin to use @nuxt/kit. I don't have the bandwidth to formalize this as a pull request, but I did make a gist with some directions on how to install it. The good news is that I was able to test it using both Nuxt 3 and Nuxt Bridge and everything appears to work without a hitch.

https://gist.github.com/volkipp/56655a3743bd7ebab57a6666833f3ec2

With a little effort you should also be able to make this module add to the vite preprocessorOptions as well. Hopefully someone here can use this as a foundation to make a formal merge request.

Cheers! 🍻

[inomata137]

I had the same issue.
I wanted to use sass-mq in my Nuxt project. Here is my code:

// src/assets/styles/mq.scss
@use '~sass-mq' as *;
// or, @use '../../../node_modules/sass-mq' as *;
// I tried both, but neither of them successed.

// nuxt.config.ts
modules: [
  '@/modules/style-resources'
],
styleResources: {
  scss: ['assets/styles/mq.scss']
}

// src/pages/index.vue
.hoge {
  @include mq($from mobile) {/* */}
}

It says Undefined mixin.

[inomata137]

I was just stupid.
This worked:

- additionalData: '@import "@/assets/scss/global.scss";',
+ additionalData: '@use "path/to/file.scss" as *;',

[Camiloruiiz]

I was just stupid. This worked:

- additionalData: '@import "@/assets/scss/global.scss";',
+ additionalData: '@use "path/to/file.scss" as *;',

stackoverflow explanation

[wattanx]

I have created a style-resources-module for Nuxt 3. (It doesn't support Bridge yet, though.)
Please use it if you like.
https://github.com/wattanx/style-resources-module

[harlan-zw]

Will track Nuxt 3 support here #213 :)