Next-plugins: using multiple plugins

[HamidTanhaei]

hi everyone.
i wanna use two plugins together but it doesn't work and show's me an error:

here is my way to use them together:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withImages({
  webpack(config, options) {
    return config
  }
}))

i'm trying to do it the same as document:
https://github.com/zeit/next.js/#customizing-webpack-config

and here is my error:

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/home/hamid/www/cartooniha-spa/node_modules/webpack/lib/Chunk.js:824:9)
    at /home/hamid/www/cartooniha-spa/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)

[anekpattanakij]

You should use next-compose-plugins in order to use multiple plug-ins.

For an example

const withCss = require("@zeit/next-css");
const withImages = require('next-images');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins(
  [
    withImages,
    withCss,
  ],
  {
    distDir: "../.next",
  },
);

[HamidTanhaei]

@anekpattanakij after more checks i realized that i get this error because of using @zeit/next-css. when i use it, it shows me an error.

[timneutkens]

So one of two things happened:

1. You install @zeit/next-css@canary which requires next@canary to run (webpack 4)

2. You manually installed webpack 4, which you shouldn't do as it's managed by Next.js

[conarwelsh]

I am trying to use withStylus and withCSS... however only one of them will actually work properly.

3 examples:

1: Only the imported CSS files end up in the built /_next/static/style.css

const withStylus = require('@zeit/next-stylus')
const withCSS = require('@zeit/next-css')

module.exports = withStylus(withCSS())

2: Only the imported Stylus files end up in the built /_next/static/style.css

const withStylus = require('@zeit/next-stylus')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withStylus())

3: I took the suggestion in this thread to use next-compose-plugins and the same problem still occurs

const withPlugins = require("next-compose-plugins")
const withStylus = require('@zeit/next-stylus')
const withCSS = require('@zeit/next-css')

module.exports = withPlugins(
  [
    withCSS,
    withStylus,
  ],
)

I am just trying to import vendor css files into the build as well as my own stylus files.

[timneutkens]

That's fixed in canary.

[conarwelsh]

do i just need to install @zeit/next-css@canary or does the whole project need to update? And thank you for the quick response

[timneutkens]

@zeit/next-css@canary required next@canary because that implements webpack 4.

[conarwelsh]

is there a migration guide somewhere i am not seeing? Upgrading breaks the whole project for me

[timneutkens]

It's a beta so you have to keep track of the changes yourself here: github.com/zeit/next.js/releases.

[PaulPCIO]

you could just iiterate the configs down to the root like so:

const withTypescript = require('@zeit/next-typescript')
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')
const withImages = require('next-images')

// Where your antd-custom.less file lives
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8'))

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {}
}

// Image Asset Config
const imagesConfig = { exclude: path.resolve(__dirname, './assets/svg') }

// AntD default style overrides
const lessConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
}

module.exports = withTypescript(
  withImages(
    withLess({
      ...imagesConfig,
      ...lessConfig,
      webpack(config, options) {
        config.resolve.alias['components'] = path.join(__dirname, 'components')
        config.resolve.alias['utils'] = path.join(__dirname, 'utils')
        config.resolve.alias['hooks'] = path.join(__dirname, 'utils/hooks')
        config.resolve.alias['static'] = path.join(__dirname, 'static')
        config.resolve.alias['images'] = path.join(__dirname, 'assets/images')
        config.resolve.alias['svg'] = path.join(__dirname, 'assets/svg')
        config.resolve.alias['assets'] = path.join(__dirname, 'assets')
        return config
      },
    })
  )
)

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.