How to add webpack loader to nuxt 3?

user_15647068 0
Viewed 175

how to add webpack loader to nuxt 3 project? For example I'm trying to add ejs loader like this (with nuxi type checking)

build: {
    extend(config) {
      chainWebpack: (config) => {
        config.module
          .rule("ejs")
          .test(/\.ejs$/)
          .use()
          .loader("ejs-loader")
          .set("options", {
            esModule: false,
          });
      };
    },
  },

enter image description here I'm getting error

Type '{ extend(config: any): void; }' is not assignable to type '{ quiet?: boolean; analyze?: any; profile?: boolean; extractCSS?: boolean; cssSourceMap?: boolean; ssr?: any; parallel?: boolean; cache?: boolean; standalone?: boolean; publicPath?: string; serverURLPolyfill?: string; ... 25 more ...; followSymlinks?: boolean; }'.
  Object literal may only specify known properties, and 'extend' does not exist in type '{ quiet?: boolean; analyze?: any; profile?: boolean; extractCSS?: boolean; cssSourceMap?: boolean; ssr?: any; parallel?: boolean; cache?: boolean; standalone?: boolean; publicPath?: string; serverURLPolyfill?: string; ... 25 more ...; followSymlinks?: boolean; }'.ts(2322)
nuxt.js
1 Answers

Can you check this link ?

https://github.com/nuxt/framework/issues/1954#issuecomment-977796717

You can extend Webpack configs with Nuxt hooks with adding 'webpack:config'

hooks: {
    "webpack:config"(configs: Configuration[]) {
      // in here you can find 2 config related to "client" and "server"

      // example for client config
      config[0].module.rules.push({
        test: /\.svg$/,
        type: "asset/resource",
      });

     // you can see all configs
     console.log(configs);
    },
},
user_27023950
Related