sibling package's *.module.css being parsed incorrectly

[mikestopcontinues]

• I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE

Are you trying to transpile a local package or an npm package?
Local package using lerna/npm, maximal hoisting.

Describe the bug
I'm trying to use lerna do import uncompiled js/css into a bunch of sibling apps. But when I switched from styled-components to css modules, I started getting an error from my shared .module.css imports. To my eye, it looks like the files are being parsed as js rather than css.

With regards to Next, my only custom config is is using withTM('@arc') so that all of my shared packages work without explicitly naming them (EG @arc/theme @arc/react @arc/rambo). That said, I've also got some custom babel plugins and some custom postcss plugins, though these worked before I setup css modules in the subpackages. And none of the babel plugins touch css imports.

En route to css modules, I also tried working with linaria and astroturf. They worked with my setup, though other things prevented me from using them. Notable is the fact that astroturf produces .module.css files via babel, and they auto-imported fine.

I wish I could say if the recent Next and withTM updates caused the issue, but I just switched to css modules, so I have no clue.

To Reproduce

Here's an abbreviated version of my webpack config:

{
resolve: {
  extensions: [ '.js', '.mjs', '.jsx', '.json', '.wasm' ],
  modules: [ 'node_modules' ],
  alias: {
    'next/head': 'next/dist/next-server/lib/head.js',
    'next/router': 'next/dist/client/router.js',
    'next/config': 'next/dist/next-server/lib/runtime-config.js',
    'next/dynamic': 'next/dist/next-server/lib/dynamic.js',
    next: '/Users/msc/Code/sitearcade/node_modules/next',
    'private-next-pages': '/Users/msc/Code/sitearcade/apps/view/pages',
    'private-dot-next': '/Users/msc/Code/sitearcade/apps/view/.next'
  },
  mainFields: [ 'main', 'module' ],
  plugins: [
    {
      apply: [Function: nothing],
      makePlugin: [Function (anonymous)],
      moduleLoader: [Function (anonymous)],
      topLevelLoader: [Object],
      bind: [Function (anonymous)],
      tsLoaderOptions: [Function (anonymous)],
      forkTsCheckerOptions: [Function (anonymous)]
    }
  ],
  symlinks: false
},
plugins: [
  {
    test: /\.(tsx|ts|js|mjs|jsx)$/,
    include: [
      '/Users/msc/Code/sitearcade/apps/view',
      /next[\\/]dist[\\/]next-server[\\/]lib/,
      /next[\\/]dist[\\/]client/,
      /next[\\/]dist[\\/]pages/,
      /[\\/](strip-ansi|ansi-regex)[\\/]/
    ],
    exclude: [Function: exclude],
    use: { loader: 'next-babel-loader', options: [Object] }
  },
  {
    oneOf: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  },
  {
    test: /\.+(js|jsx|mjs|ts|tsx)$/,
    loader: { loader: 'next-babel-loader', options: [Object] },
    include: [ /(@arc)$/, /(@arc)[\\/](?!.*node_modules)/ ]
  }
]
}

And the error:

[ error ] ./node_modules/@arc/ui/node_modules/@arc/theme/react/Typo.module.css 3:0
Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* import */
|
> @import './typo/block.css';
| @import './typo/code.css';
| @import './typo/heading.css';

I tried to explicitly alias all of my @arc/ deps in resolve.alias, but that caused my shared js to stop being transpiled by babel (JSX errors). I had an identical error with resolve.symlinks = true, which makes sense, as the effect is the same.

I also tried to use the old @zeit/next-css package (with an updated postcss.config.js), but that resulted in a different error:

[ error ] ./node_modules/@arc/theme/react/Form.module.css
ReferenceError: self is not defined

Expected behavior
I just want it to work.

Setup

• Next.js version: 9.3.6
• next-transpile-modules version: 3.3.0
• Node.js version: 13.10.1
• npm/yarn version: 6.14.4
• Operating System: OSX 10.15.3

[martpie]

Sorry for the late reply, Is it still happening on the latest versions of Next.js + next-transpile-modules?

[mikestopcontinues]

I'm sorry, after quite a bit of headbanging, I switched back to styled-components, so I don't know. I would understand if you just closed the issue instead of pursuing it. Thanks though! :)

[leandroferreira]

I was having the same issue (testing against next@9.4.4). Worked for me when downgraded to next-transpile-modules@4.0.0 but fails on 4.0.1 on.

[martpie]

Most probably a duplicate of #146