[nextjs] react-native-elements not working with Next.js

[5ervant]

Description / Expected Behavior

Couldn't make react-native-elements work with Next.js by following these Usage on the Web · React Native Elements' instructions.

Observed Behavior

It seems that react-app-rewired can only be used with create-react-app. But not with Next.js since we're using yarn next dev to run our localhost, not react-scripts start that's needed to be replaced by react-app-rewired start.

Here's an error message generated by both web browser and terminal:

./node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Zocial.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
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
(Source code omitted for this binary file)

Environment

Expo CLI 3.13.1 environment info:
System:
OS: Windows 10
Binaries:
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
Watchman: 4.9.4 - C:\Users\USER\AppData\Local\watchman\watchman.EXE
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897

Phone/emulator/simulator platform, model and version:
Web Browser: Chromium-powered browser
Chromium: 80.0.3987.122 (Official Build) (64-bit)

Related Issues

• Support for React Native Web? vercel/next.js#858 (comment)
• react-native-elements with NextJS/TypeScript - Asking for help
• react-native-elements not working with Next.js vercel/next.js#11461

---

// ./next.config.js
const { withExpo } = require('@expo/next-adapter');

const path = require('path');
const { addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = withExpo({
  projectRoot: __dirname,
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  ...babelInclude([
    path.resolve(__dirname, 'node_modules/react-native-elements'),
    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
    path.resolve(__dirname, 'node_modules/react-native-ratings'),
    path.resolve(__dirname, 'src')
  ])
});

Any standard setup to make react-native-elements work with Next.js?
I already tried to have the above "next.config.js" code with the same result.

[byCedric]

Hi @5ervant! Thanks for the report. In the code you provided I see that next-fonts is missing from the next.config.js. Could you try this and see if that works for you? You can find some more info on this and how to set it up over here. Hope it helps 😄

[5ervant]

After using next-fonts I encountered this:

./node_modules/react-native-ratings/src/images/star.png 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)

I tried to use next-images, then the current error disappeared.

[daxfrost]

Hi @5ervant @byCedric, @EvanBacon - I am still having this issue despite following the documentation.

Here's my next.config.js:

// @generated: @expo/next-adapter@2.1.17
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo

const { withExpo } = require("@expo/next-adapter");

const withTM = require("next-transpile-modules")([
  "victory-native",
  "victory-core",
  "victory-shared-events",
  "victory-area",
  "victory-bar",
  "victory-candlestick",
  "victory-line",
  "victory-errorbar",
  "victory-pie",
  "victory-voronoi",
  "victory-tooltip",
  "victory-axis",
  "victory-polar-axis",
  "victory-box-plot",
  "victory-group",
  "victory-histogram",
  "victory-scatter",
  "victory-stack",
  "victory-chart",
  "victory-legend",
  "rollbar-react-native"
]); // pass the modules you would like to see transpiled

const withFonts = require("next-fonts");
const withImages = require("next-images");

module.exports = withTM(
  withExpo(
    withFonts({
        projectRoot: __dirname,
      }
    )
  )
);

I also tried using next-images, and both next-images & next-fonts together (also tested placing withFonts on the outer layer which @EvanBacon's documentation suggested not to do) but continue to see the following error when compiling:

yarn run v1.22.4
$ next build
> Using external babel configuration
> Location: "/Users/dbooysen/Documents/dev/expo/Better/babel.config.js"
Creating an optimized production build

Failed to compile.

./node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Octicons.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
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
(Source code omitted for this binary file)

Any idea what I may be doing wrong? This seems like straightforward stuff.

[ahummel25]

@daxfrost Having this same issue. Did you happen to find a fix?