4

If you run

npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install

To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:

@fortawesome/fontawesome-svg-core,
@fortawesome/free-solid-svg-icons,
@fortawesome/react-native-fontawesome,

This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:

Unexpected token 'export'.

I understand this is because @fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:

transpilePackages: ['ui'],

I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages

I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.

How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?

Orleydovsky
  • 43
  • 3

1 Answers1

0

I have checked the package @fortawesome/react-native-fontawesome

package.json of @fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:

export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'

therefore Next handles @fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.

You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).

Andrey Smolko
  • 712
  • 3
  • 8
  • The project uses Next.js v13.1.4 which includes the built-in module transpilation transpilePackages, but I still haven't been able to reference that specific module so that it is transpiled, I tried: transpilePackages: ['ui', '@fortawesome/react-native-fontawesome'] – Orleydovsky Feb 06 '23 at 17:58