error occurred when css require in node_modules

[vincentmrlau]

hello,
error occurred when css require in node_modules

// next.config.js
/* eslint-disable */
const withLess = require('@zeit/next-less')
const withCss = require('@zeit/next-css')

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

module.exports = withCss(withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
}))

log:

{ /mydir/node_modules/normalize.css/normalize.css:12
html {
     ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mydir/node_modules/antd-mobile/lib/style/index.js:3:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17) sourceMapsApplied: true }

It works when I remove the requrement

// file: mydir/node_modules/antd-mobile/lib/style/index.js

// require('normalize.css/normalize.css');

require('./index.css');

[vincentmrlau]

it is not work too

/* eslint-disable */
const withLess = require('@zeit/next-less')
// const withCss = require('@zeit/next-css')

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

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
})

[Jungwoo-An]

I recommend add cdn link in head section of _document.js

[Enalmada]

I believe the fix is to do the same thing for css that you have for less

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

[jeremytenjo]

Hey @vincentmrlau , did you find a solution for this?

[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.