[next-js / expo web] SyntaxError: Unexpected token 'export' with npm module

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.