Custom webpack config with next.js and next-fonts in a monorepo with @expo/vector-icons

Question

I am trying to use solito to use a monorepo with React Native and Next.js.

I successfully created a brand new project. My next step is to add a UI library called react-native-paper. Looks good so far on the React Native

My problem: I need to setup a custom webpack config on /next.config.js to handle .ttf files, but I have no idea how 😅

That's what I have done, but it's stuck on an infinite loop.

const withFonts = require('next-fonts')

module.exports = withPlugins(
  [
    withTM,
    [
      withFonts,  <------ seams this custom config is not happy
      {
        enableSvg: true,
        webpack(config, options) {
          return config
        },
      },
    ],
    [withExpo, { projectRoot: __dirname }],
  ],
  nextConfig
)

Answer 1

After I night I revisited my code and simply removed the webpack custom config and it's working.

const withFonts = require('next-fonts')

module.exports = withPlugins(
  [withTM, withFonts, [withExpo, { projectRoot: __dirname }]],
  nextConfig
)