Failing next.js build since 1.1.0: ModuleParseError: Module parse failed: Unexpected character

[sesigl]

Hey,

I use custom css next.js setup to enable 3rd party dependencies to include css. Since 1.1.0 my build is failing with:

Failed to compile.
18:00:37.456  ./node_modules/react-multi-carousel/lib/styles.css
18:00:37.456  ModuleParseError: Module parse failed: Unexpected character '' (1:0)
18:00:37.457  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
18:00:37.457  (Source code omitted for this binary file)
18:00:37.458  > Build error occurred
18:00:37.459  Error: > Build failed because of webpack errors
18:00:37.459      at build (/zeit/6b3a4e9a/node_modules/next/dist/build/index.js:13:900)

my next.conf.js:

const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

const nextConfig = {
  env: {
    GOOGLE_API_KEY: 'SOME_KEY',
    REACT_APP_GOOGLE_MAP_API_KEY:
      'SOME_OTHER_KEY',
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }
    //   // HOTFIX: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
    config.plugins.push(
        new FilterWarningsPlugin({
          exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
        })
    );

    config.resolve.modules.push(__dirname);

    config.plugins.push(new webpack.IgnorePlugin(/(.*)(test|spec)\.(ts|js|tsx|jsx)$/));

    return config;
  },
};

module.exports = withPlugins(
  [
    [
      withOptimizedImages,
      {
        mozjpeg: {
          quality: 90,
        },
        webp: {
          preset: 'default',
          quality: 90,
        },
      },
    ],
    withFonts,
    withCSS,
  ],
  nextConfig
);

If I downgrade to 1.0.3, then everything is fine.

[rohanray]

@Journerist : Please have a look here https://github.com/rohanray/next-fonts-styled-component-example

It's a working example using styled components with custom css set-up.

-RR

[sesigl]

Thanks for the fast response. I created a minimal example based upon your example:

https://github.com/Journerist/next-fonts

It fails due to the woff import. It works in the previous version.

[br2ber]

Hello,

I have exactly the same problem.

Thks

[rohanray]

@Journerist : Are you also using styled-components?

[rohanray]

@Journerist : I had a look at your repro. Please do below changes:

1. The font files should be placed under public folder eg: public/fonts/roboto-v20-latin-regular.woff
2. src file reference in font-face config should point to where the font files are placed under public directory. The URL should begin with /

for e.g. If files are placed as mentioned in 1, font-face should be set like below:

@font-face {
  font-family: 'roboto-v20-latin-regular';
  src: url('/fonts/roboto-v20-latin-regular.woff');
}

[rohanray]

@Journerist : I have created a branch journerist-repro. Please check here https://github.com/rohanray/next-fonts/tree/journerist-repro. Build is working.

[sesigl]

Thank you for investigating! The issue is, a lot of react component library does it that way. In my app code it looks like:

import 'react-multi-carousel/lib/styles.css';

that basically contains the relative font import in react-multi-carousel/lib/someFont.woff

I could copy past it, fix it and get it working. But I think React component libraries that work with regular React.js, should just work with next.js due to this great plugin :).

[peterdresslar]

Hey I ran into the same issue, although it is firing from an Antd component

[ error ] ./node_modules/antd/lib/grid/style/index.less 1:0

Since I am working with antd and less, I am trying to get everything together with next-plugin-antd which seems very close to working. Using next-compose-plugins my next.config would be simply:

(mistake snipped, see next comment)

[peterdresslar]

Hey, actually I had an error in my config listed in my previous comment--I deleted it so nobody would use that code. This actually does work quite nicely to put together antd, less, and next-fonts:

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

// next.js configuration
const nextConfig = {
  //blahblah
};

const antdPluginConfig = {
    // loading custom ant design theme vars
    antdThemeVariables: themeVariables,
    // any options for @zeit/next-less
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: "[local]___[hash:base64:5]",
    }
};

module.exports = withPlugins([
  [withPluginAntd,antdPluginConfig],
  withFonts
], nextConfig);

[stefvhuynh]

i'm getting this issue as well with a custom css setup. the problem is this line:
https://github.com/rohanray/next-fonts/blob/master/index.js#L24

the css/sass loader tries to parse the css/sass file and comes across url and doesn't know how to handle it since the url-loader is told not to parse these files.

if i delete this line, it works just fine.

[rohanray]

@stefvhuynh : Please share package.json file.

[stefvhuynh]

@rohanray

{
  "version": "0.0.1",
  "scripts": {
    "start": "yarn build && yarn server",
    "dev": "NODE_OPTIONS='-r esm' next",
    "build": "rimraf .next/ && NODE_OPTIONS='-r esm' next build",
    "server": "NODE_OPTIONS='-r esm' next start"
  },
  "license": "ISC",
  "dependencies": {
    "@loadable/component": "^5.11.0",
    "axios": "^0.19.2",
    "axios-jsonp": "^1.0.2",
    "lodash": "^4.17.15",
    "next": "^9.3.6",
    "node-match-path": "^0.3.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.3.0",
    "url": "^0.11.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
    "@babel/plugin-transform-flow-strip-types": "^7.9.0",
    "@next/bundle-analyzer": "^9.3.4",
    "@zeit/next-source-maps": "^0.0.3",
    "babel-plugin-lodash": "^3.3.4",
    "esm": "^3.2.25",
    "file-loader": "^6.0.0",
    "imagemin-optipng": "^7.1.0",
    "inspectpack": "^4.4.0",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.9.0",
    "next-compose-plugins": "^2.2.0",
    "next-optimized-images": "^2.6.0",
    "next-plugin-custom-babel-config": "^1.0.2",
    "next-transpile-modules": "^3.1.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "string-replace-loader": "^2.3.0",
    "url-loader": "^4.1.0",
    "webpack-stats-plugin": "^0.3.1"
  }
}

note that next-fonts is not included in here because i rolled out my own font config, but this is what i was using before and i was on the latest version of next-fonts.