Next-plugins: @zeit/next-sass - Invalid or unexpected token (@) for CSS module in node_modules

[penx]

I have set up @zeit/next-sass as per the instructions but get an error:

/sandbox/node_modules/govuk-frontend-react/lib/components/button/_button.module.scss:1
(function (exports, require, module, __filename, __dirname) { @import "~govuk-frontend/components/button/button";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)

This may be related to the fact that I'm loading in CSS modules via React components that are in node_modules.

I have a React component library - govuk-frontend-react that loads in SCSS modules from govuk-frontend. I have an example of this working in create-react-app - govuk-frontend-react-example and am now working on a nextjs example - govuk-frontend-react-example-next.

I have tried the following in next.config.js:

if (typeof require !== 'undefined') {
  require.extensions['.scss'] = (file) => {}
}

This compiles but I don't get any class names on elements so styles aren't visible.

I am guessing this may be related to next.js processing content in node_modules differently?

I have tried the following but also with no success:

  sassLoaderOptions: {
    includePaths: ["node_modules"]
  }

Would be good if @zeit/next-sass could support this with the default config.

I have a sandbox demonstrating the issue here:

https://codesandbox.io/s/ll7jz2k9jl

[penx]

Related:

• https://github.com/zeit/next.js/issues/3280
• https://github.com/zeit/next.js/issues/706
• https://github.com/zeit/next-plugins/issues/273

[penx]

My understanding is this also prevents @shopify/polaris from working:

https://codesandbox.io/s/k9k7nlpq07

[penx]

This was solved by yarn add next-plugin-transpile-modules and

const withSass = require('@zeit/next-sass')
const withTM = require('next-plugin-transpile-modules');

module.exports = withTM(withSass({
  transpileModules: ['govuk-frontend'],
  cssModules: true,
...