Default export exposed as named `default`

[ithinkdancan]

when using this with Next.js using the string plugin format Next spits out a type error when applying the config

TypeError: require(...) is not a function

const config = {
  plugins: [
    [
      'postcss-assign-layer',
      [
        {
          include: 'core/*.module.css',
          layerName: 'core',
        },
      ],
    ],
  ],
};

module.exports = config;

From what I can tell this has to do with how the plugin is built. Next is calling require(pluginPath)(options) where as the plugin is exporting default which would require it to call require(pluginPath).default(options)

[IanVS]

I'll try to fix the packaging, but in the meantime you should be able to do this:

const postcssAssignLayer = require('postcss-assign-layer').default;

module.exports = {
  plugins: [
      postcssAssignLayer({
          include: 'core/*.module.css',
          layerName: 'core',
      }),
  ],
}

[mdaoust-sidlee]

I'll try to fix the packaging, but in the meantime you should be able to do this:

const postcssAssignLayer = require('postcss-assign-layer').default;

module.exports = {
  plugins: [
      postcssAssignLayer({
          include: 'core/*.module.css',
          layerName: 'core',
      }),
  ],
}

Actually, Next does not seem to support require() to import the PostCSS Plugins as seen :

• here https://nextjs.org/docs/pages/building-your-application/configuring/post-css#:~:text=Do%20not%20use,provided%20as%20strings.
• and here https://nextjs.org/docs/messages/postcss-shape

I am currently in the same situation, it works on Storybook for example, but not on Next.js

[IanVS]

@mdaoust-sidlee If you need to use esm, you can still do that with a workaround until I fix the packaging here:

import {default as postcssAssignLayer} from 'postcss-assign-layer';

export default {
  plugins: [
      postcssAssignLayer({
          include: 'core/*.module.css',
          layerName: 'core',
      }),
  ],
}

[IanVS]

Oh I see, next.js requires commonjs, but no use of require. Interesting limitation on their part. Yeah you'll probably be blocked until I fix this. Will try to get to it soon. But also, boo for next.js being weird like that.

[IanVS]

I released a fix in version 0.4.0. Please try it and let me know how it works.

[mdaoust-sidlee]

I released a fix in version 0.4.0. Please try it and let me know how it works.

It works!! Many thanks for the super quick fix 🙏.

For anyone else working with Next.js, here is what the postcss config should look like with this plugin.

// postcss.config.js
module.exports = {
  plugins: [
    // your other plugins ...
    
    ['postcss-assign-layer', [{ include: './src/components/**/*.module.css', layerName: 'components' }]],
  ],
};