Next.js 12 failing with react-icons

[styfle]

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

next build fails to bundle necessary files for react-icons

Expected Behavior

Should be able to run bundled functions from nft.json

To Reproduce

// Put this in `pages/api/index.js`

import { IconContext } from 'react-icons';
console.log(IconContext)

export default function handler(req, res) {
  res.end('it works')
}

Trace from next build is:

{
  "version": 1,
  "files": ["../webpack-runtime.js",
    "../../../package.json",
    "../../../node_modules/react-icons/lib/package.json",
    "../../../node_modules/react-icons/package.json",
    "../../../node_modules/react-icons/lib/cjs/index.js",
    "../../../node_modules/react/package.json",
    "../../../node_modules/react/index.js",
    "../../../node_modules/react-icons/lib/cjs/iconBase.js",
    "../../../node_modules/react-icons/lib/cjs/iconsManifest.js",
    "../../../node_modules/react-icons/lib/cjs/iconContext.js",
    "../../../node_modules/react/cjs/react.production.min.js",
    "../../../node_modules/object-assign/package.json",
    "../../../node_modules/object-assign/index.js"
  ]
}

The trace from nft is:

node_modules/object-assign/index.js
node_modules/object-assign/package.json
node_modules/react-icons/index.js
node_modules/react-icons/lib/cjs/iconBase.js
node_modules/react-icons/lib/cjs/iconContext.js
node_modules/react-icons/lib/cjs/iconsManifest.js
node_modules/react-icons/lib/cjs/index.js
node_modules/react-icons/lib/package.json
node_modules/react-icons/package.json
node_modules/react/cjs/react.development.js
node_modules/react/cjs/react.production.min.js
node_modules/react/index.js
node_modules/react/package.json
package.json
pages/api/index.js
pages/api/index.js

Notice the react-icons/index.js is missing from next build which causes the following:

Error: Cannot find module '/var/task/node_modules/react-icons/lib'. Please verify that the package.json has a valid "main" entry

[aboveyunhai]

@styfle I had a weird issue while using react-icons. it works but generated following warning in dev mode.

[Hopsken]

Guess you shouldn't use react-icons in the api files? They are server side only. Importing react-icons here just doesn't make any sense.

[timneutkens]

To temporarily work around this you can use:

// next.config.js
module.exports = {
  outputFileTracing: false
}

And remove it once this is fixed 👍

[ijjk]

Hi, this has been updated in v12.0.3-canary.9 of Next.js, please update and give it a try!

[timneutkens]

It's out on 12.0.3 now 🎉

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.