NextJs - next.config.js - CSS loader + custom Webpack config

10,038

Have you tried wrapping it in other ways? This might work (not 100%):

module.exports = (config, { dev }) =>{
config.module.rules.push({
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: "file-loader",
        options: {
          name: "public/media/[name].[ext]",
          publicPath: url => url.replace(/public/, "")
        }
      });
return withCss(config);

} }

Also there is a withImages wrapper, https://github.com/twopluszero/next-images

const withImages = require('next-images') 
module.exports = withImages(withCss())
Share:
10,038
Webwoman
Author by

Webwoman

Web enthusiast the day... supa-heroe the night

Updated on June 04, 2022

Comments

  • Webwoman
    Webwoman almost 2 years

    I'm working with NextJS and I'm trying to custom my configuration. So far, I have tried to add CSS support + files support.

    Here my next.config.js :

    const webpack = require("webpack");  
    const withCSS = require('@zeit/next-css');
    
    
    module.exports = withCSS({
    
      webpack : (config, { dev }) => {
        config.module.rules.push({
                test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: "file-loader",
                options: {
                  name: "public/media/[name].[ext]",
                  publicPath: url => url.replace(/public/, "")
                }
              });
        return config;
      } 
    })
    

    my console returns me :

    UnhandledPromiseRejectionWarning: Error: Chunk.entrypoints: Use Chunks.addGroup instead

    I can't figure out what fails.

    If anybody have an hint, would be great,

    Thanks