Description
I have a custom npm package I regularly use in Expo apps to access firebase data. The package is built using react-native-bob
.
Expected Behavior
I’d expect the pages to compile with yarn next dev
after completing the next set up from the docs. In fact, they do, unless I import my npm package.
Observed Behavior
After running yarn next dev
, the app breaks with the following error. This only happens when I import @nandorojo/fuego
.
/Users/app/node_modules/@nandorojo/fuego/lib/module/index.js:1
export{default as connectFuego}from'./HOC/connectFuego/index';export{default as useFuego}from'./hooks/useFuego/index';export{default as FuegoProvider}from'./FuegoProvider/index';export{default as GetFuego}from'./components/GetFuego/index';export{default as Fuego}from'./Fuego/index';export{default as FuegoQuery}from'./FuegoQuery/index';export*from'./FuegoQuery/types';export{default as useFuegoContext}from'./hooks/useFuegoContext';export{default as useOnlineStatus}from'./hooks/useOnlineStatus';export{default as FuegoGate}from'./components/FuegoGate';export{default as connectFuegoGate}from'./HOC/connectFuegoGate';
^^^^^^
SyntaxError: Unexpected token 'export'
...
Solution
It looks like next.js doesn’t transpile node modules. This worked for me to solve it:
yarn add next-compose-plugins next-transpile-modules
Edit next.config.js, extending from the expo docs:
const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')
const withImages = require('next-images')
const withTM = require('next-transpile-modules')
const withPlugins = require('next-compose-plugins')
module.exports = withPlugins(
[
[
withTM,
{
transpileModules: ['@nandorojo/fuego'], // you can add other modules to this array
},
],
withFonts,
withImages,
[withExpo, { projectRoot: __dirname }],
],
{
// ...
}
)
I figured I’d post this in case someone else runs into the same issue.