Next JS config multiple plugin configuration - reactjs

Question

const {
DEVELOPMENT_SERVER,
PRODUCTION_BUILD
} = require("next/constants");
require('dotenv').config()
const path = require('path')
const Dotenv = require('dotenv-webpack')
const nextConfig = {
webpack: config => ({ ...config, node: { fs: "empty" } })
};
module.exports = phase => {
if (phase === DEVELOPMENT_SERVER || phase === PRODUCTION_BUILD) {
const withCSS = require("#zeit/next-css");
return withCSS(nextConfig);
}
return nextConfig;
};
*module.exports = {
webpack: (config) => {
config.plugins = config.plugins || []
config.plugins = [
...config.plugins,
// Read the .env file
new Dotenv({
path: path.join(__dirname, '.env'),
systemvars: true
})
]
return config
}
}*
let prefix;
switch (process.env.NODE_ENV) {
case "test":
prefix = "https://test.domain.com/providers";
break;
case "stage":
prefix = "https://state.domain.com/providers";
break;
case "production":
prefix = "https://production.domain.com/providers";
break;
default:
prefix = "";
break;
}
module.exports = {
distDir: "build",
assetPrefix: prefix
};
Here my next.config.js configuration.
But when I am trying to run then getting the message like
Error! Network error: Unexpected token N in JSON at position 0
But when I am trying to run whatever into the bold(*) and kept only that thing into the next.config.js then working fine.
How to configure multiple plugin into the module.export

Answer 1

Here is a simple way to use multiple nested plugins in Next.js
const withImages = require('next-images');
const withCSS = require('#zeit/next-css');
module.exports = withCSS(withImages({
webpack(config, options) {
return config
}
}))
If you want to using single one plugin then do this:
const withImages = require('next-images');
module.export = withImages();
For further information about Next.js plugins and their documentation click here:
https://github.com/zeit/next-plugins/tree/master/packages

Answer 2

next-compose-plugins plugin provides a cleaner API for enabling and configuring plugins for next.js.
Install npm install --save next-compose-plugins
Use it in next.config.js:
// next.config.js
const withPlugins = require('next-compose-plugins');
const images = require('next-images');
const sass = require('#zeit/next-sass');
const typescript = require('#zeit/next-typescript');
// optional next.js configuration
const nextConfig = {
useFileSystemPublicRoutes: false,
distDir: 'build',
};
module.exports = withPlugins([
// add a plugin with specific configuration
[sass, {
cssModules: true,
cssLoaderOptions: {
localIdentName: '[local]___[hash:base64:5]',
},
}],
// add a plugin without a configuration
images,
// another plugin with a configuration
[typescript, {
typescriptLoaderOptions: {
transpileOnly: false,
},
}],
], nextConfig);

Answer 3

Next.js version >10.0.3
Images are now built-in, so to add plugin and image code below will work:
const withPlugins = require('next-compose-plugins');
const withCSS = require('#zeit/next-css');
const nextConfig = {
images: {
domains: ['sd.domain.com'], // your domain
},
};
module.exports = withPlugins([
[withCSS]
], nextConfig);

Answer 4

This worked for me:
// next.config.js
const withLess = require("next-with-less");
const withPWA = require('next-pwa')
const pwa = withPWA({
pwa: {
dest: 'public'
}
})
module.exports = withLess({
lessLoaderOptions: {
},
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
eslint: {
ignoreBuildErrors: true,
},
...pwa // using spread to merge the objects
});