Next-plugins: How to use multiple plugins

[omeraplak]

Hello i want use sass and typescript plugin on my project but i can't found multiple plugins usage example.

my next.config.js file is;

// next.config.js
const withSass = require('@zeit/next-sass')
const withTypescript = require('@zeit/next-typescript')

module.exports = withSass()
module.exports = withTypescript()

but doesn't work. Only working typescript because last export is typescript.

how i can merge two different plugin?

Thanks

[sqlProvider]

Hi Omer, I hope that this works for you.

const withSass = require('@zeit/next-sass');
const withTypescript = require('@zeit/next-typescript');

module.exports = withTypescript(withSass());

[omeraplak]

@sqlProvider Thank you. It's working!

[Ehesp]

How do you customise each plugin config separately?

[sqlProvider]

Hi @Ehesp, you can use it.

const withSass = require('@zeit/next-sass');
const withTypescript = require('@zeit/next-typescript');

module.exports = withTypescript(withSass({
    webpack: function (config) {
                 // custom configs
        return config
    }
}));

[etroynov]

Hi,

When i try:

const withCSS = require('@zeit/next-css');
const withTypescript = require('@zeit/next-typescript');

module.exports = withTypescript( withCSS() )

i got error:

(node:23566) UnhandledPromiseRejectionWarning: Error: Chunk.entrypoints: Use Chunks.addGroup instead
    at Chunk.set (/home/xxx/www/resto/node_modules/webpack/lib/Chunk.js:465:9)
    at /home/xxx/www/resto/site/node_modules/extract-text-webpack-plugin/dist/index.js:176:40
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/home/xxx/www/resto/site/node_modules/extract-text-webpack-plugin/dist/index.js:171:18)
    at Compilation.applyPluginsAsyncSeries (/home/xxx/www/resto/node_modules/next/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/home/xxx/www/resto/node_modules/next/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/home/xxx/www/resto/node_modules/next/node_modules/webpack/lib/Compiler.js:504:17)
    at /home/xxx/www/resto/node_modules/next/node_modules/tapable/lib/Tapable.js:289:11
    at Promise.all.then (/home/xxx/www/resto/node_modules/next/node_modules/webpack/lib/DynamicEntryPlugin.js:45:21)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
(node:23566) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

[omeraplak]

Hi @etroynov,
what is next.js version?

[etroynov]

@omeraplak 5.0.0

[haha54carol]

@etroynov
I got same error msg with you.
What is your webpack version?
I solve the issue by installing [email protected]

[etroynov]

i use webpack 4.1.0

[timneutkens]

i use webpack 4.1.0

Webpack is built into Next. And you can't upgrade it yourself.
Webpack 4 will require many changes on the Next side.

[etroynov]

any news?

[timneutkens]

Not sure what you're asking 🤔. There's an issue for webpack 4 support in Next. But it's unrelated to this issue. Going to lock this one.