Using with Next.js

Environment

"react": "17.0.2",
"react-native": "0.65.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "^0.18.1",

Description

I’m trying to setup a NextJS app with React Native Web and React Native Vector Icons. I’ve got the RN-web part working properly, but I can’t get RN-vector-icons to work. As soon as a page includes a component coming from RN-vector-icon, I get the following error:

../app/node_modules/react-native-vector-icons/lib/create-icon-set.js
Module parse failed: Unexpected token (91:8)
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
| 
|       return (
>         <Text selectable={false} {...props}>
|           {glyph}
|           {children}

After some searching it appears I’m not the only one with the issue, yet I can’t seem to find a solution. On Next.js, this issue mentions non-transpired code and suggests using a plugin to fix the issue. However it does not resolve the issue. Here are a few links/resources I used to try and figure out what’s wrong in my setup:

• https://github.com/vercel/next.js/issues/5614
• https://github.com/react-everywhere/re-start/issues/15#issuecomment-310911799
• https://stackoverflow.com/a/62243944/3515052
• https://stackoverflow.com/a/72622241/3515052

Here’s my next.config.js including the custom webpack configuration. I am quite certain that this can be fixed by configuring webpack further but I can’t see how:

module.exports = withImages(withFonts({
  experimental: {
    externalDir: true
  },
  // This feature conflicts with next-images
  images: {
    disableStaticImages: true,
  },
  webpack: (config, options) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      'react-native-linear-gradient': 'react-native-web-linear-gradient',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]

    if (options.isServer) {
      config.externals = ['react', 'react-native-web', ...config.externals];
    }
    config.resolve.alias['react'] = path.resolve(__dirname, '.', 'node_modules', 'react');
    config.resolve.alias['react-native-web'] = path.resolve(__dirname, '.', 'node_modules', 'react-native-web');

    config.module.rules.push({
      test: /\.ttf$/,
      loader: "url-loader", // or directly file-loader
      include: [
        // Not sure which one should work so I added both possible paths
        path.resolve(__dirname, "..", "app", "node_modules", "react-native-vector-icons"), // as reported by the error, imported from monorepo shared code package
        path.resolve(__dirname, ".", "node_modules", "react-native-vector-icons"), // from this package
      ],
    })

    return config;
  }
}));

And here’s my Icon component:

import React from 'react'
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
import type { IconProps } from 'react-native-vector-icons/icon'

export const Icon = (props: IconProps) => (
  <MaterialIcon {...props} />
)

Note: when using the /dist version ('react-native-vector-icons/dist/MaterialCommunityIcons'), I’m getting another error: Error: Cannot find module 'react', so I believe it’s best to use it like so?

Do you guys have any idea/guidance as to how I can get react-native-vector-icons working with my Next.js setup?

[mohamedabady]

don’t forget to alias the import statement in package.json "alias": { ..., "react-native-vector-icons/MaterialCommunityIcons": "react-native-vector-icons/dist/MaterialCommunityIcons" }

[dennervidal]

I was able to resolve my issue. What I just did is import everything in react-native-vector-icons from dist folder. In my case, rollup wasn’t transpiling code from the lib root (esm), so the correct way is to use already bundled (cjs) code.