Loading font from node_modules in Nextjs

user_8507085 0
Viewed 632

I'm installing a npm package that uses fonts like:

var _font = _interopRequireDefault(require("../../style/fonts/font123.eot"));

When i start my nextjs project, it returns me this error:

Error before webpack loader

To fix this issue, I placed a webpack loader on next.config.js:

config.module.rules.push({
  test: /\.(woff|woff2|ttf|eot|svg)$/,
  loader: 'file-loader',
  options: {
    name: 'fonts/[name].[ext]'
  }
});

But it fails to parse every font, not only .eot files.

error after adding webpack loader

I already tried many webpack loaders and nothing seems to work

node-modules webpack reactjs
1 Answers

I've experienced the same problem, resolved it with this config.

module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(woff|woff2|ttf|eot|svg)$/,
      loader: "file-loader",
      options: {
        esModule: false,
        name: "[name].[ext]",
        outputPath: "static/media/fonts/",
        publicPath: "../assets/fonts/",
      },
    });

    return config;
  },
};

Here is an article that can help you more.

user_86458180
Related