Migrating to React v18.2.0 and Next v13.2.4

[bparvin12]

Hi there,

I am not sure if this is the right place to ask, so please let me know if I need to use another board.

I am working on a project that currently uses the following dependencies:

"react": "17.0.2",
"react-dom": "17.0.2",
"next": "12.2",
"@react-pdf/renderer": "2.1.1"

I would like to upgrade NextJS to v13: 13.2.4, this update requires updating React and React-DOM to v18: 18.2.0.

In doing this, I guess "@react-pdf/renderer": "2.1.1" also needed to be updated, so I installed version: 3.1.8. But I am running into some issues trying to run the project.

I did see this post here of some issues and possible solutions: https://gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6

But these do not seem to be the issue I am receiving.

Error

Uncaught ReferenceError: require is not defined
    at eval (webpack-internal:///./node_modules/restructure/src/DecodeStream.js:6:26)
    at ./node_modules/restructure/src/DecodeStream.js (_app.js?ts=1679424494473:33114:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./node_modules/restructure/src/EncodeStream.js:5:74)
    at ./node_modules/restructure/src/EncodeStream.js (_app.js?ts=1679424494473:33125:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./node_modules/restructure/index.js:17:78)
    at ./node_modules/restructure/index.js (_app.js?ts=1679424494473:34566:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./node_modules/fontkit/dist/browser-module.mjs:9:69)
    at ./node_modules/fontkit/dist/browser-module.mjs (_app.js?ts=1679424494473:31486:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./node_modules/@react-pdf/font/lib/index.browser.es.js:13:65)
    at ./node_modules/@react-pdf/font/lib/index.browser.es.js (_app.js?ts=1679424494473:1360:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./node_modules/@react-pdf/renderer/lib/react-pdf.browser.es.js:30:73)
    at ./node_modules/@react-pdf/renderer/lib/react-pdf.browser.es.js (_app.js?ts=1679424494473:1437:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./src/pdfs/LazyDownloadPDFButton/LazyDownloadPDFButton.js:4:77)
    at ./src/pdfs/LazyDownloadPDFButton/LazyDownloadPDFButton.js (_app.js?ts=1679424494473:19237:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./src/pdfs/LazyDownloadPDFButton/index.js:5:80)
    at ./src/pdfs/LazyDownloadPDFButton/index.js (_app.js?ts=1679424494473:19270:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./src/components/shared/Product/EU/Product.js:34:85)
    at ./src/components/shared/Product/EU/Product.js (_app.js?ts=1679424494473:14247:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)
    at eval (webpack-internal:///./src/components/shared/Product/EU/index.js:5:66)
    at ./src/components/shared/Product/EU/index.js (_app.js?ts=1679424494473:14401:1)
    at options.factory (webpack.js?ts=1679424494473:728:31)
    at __webpack_require__ (webpack.js?ts=1679424494473:37:33)
    at fn (webpack.js?ts=1679424494473:383:21)

Where ReferenceError: require is not defined comes from a package called Restructure that requires DecodeStream and EncodeStream. Which I believe is being called bu the Buffer package which is a dependency to react-pdf/renderer.

Any suggestions/ideas would be much appreciated.