CODEWITHSUNDEEP
javascriptreactjsnext.js
greatTeacherOnizuka
greatTeacherOnizuka

Reputation: 565

NextJS config file module exports set up

I have looked into other answer that the way to add multiple plugins into next.js config fil is to use composition. However this is not working for me.

const Dotenv = require('dotenv-webpack');
const withStyles = require('@webdeb/next-styles');


module.exports = withStyles(
  {
    webpack(config, options) {
      config.plugins.push(new Dotenv({ silent: true }));
      return config;
    },
    env: {
      NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST,
      AUTH_SECRET: process.env.AUTH_SECRET,
    },
  },
  {
    sass: true, // use .scss files
    modules: true, // style.(m|module).css & style.(m|module).scss for module files
  },
);

The above throws an error when I try to import my SCSS file into my component.

However having just 

module.exports = withStyles(
{
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
},
);

Works fine and load my CSS correctly

Upvotes: 0

Views: 194

Answers (1)

topched
topched

Reputation: 765

withStyles only accepts 1 object, in your non-working config you have 2. You want something like the following

const Dotenv = require('dotenv-webpack');
const withStyles = require('@webdeb/next-styles');


module.exports = withStyles(
  {
    webpack(config, options) {
      config.plugins.push(new Dotenv({ silent: true }));
      return config;
    },
    env: {
      NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST,
      AUTH_SECRET: process.env.AUTH_SECRET,
    },
    sass: true, // use .scss files
    modules: true, // style.(m|module).css & style.(m|module).scss for module files
  },
);

Upvotes: 1

Related Questions