Cannot read properties of undefined (reading 'Component') error installing the version 2.0.4

[gabrielaRazo]

Cannot read properties of undefined (reading 'Component') error installing the version 2.0.4

[gerhardsletten]

@gabrielaRazo In the project where this is happening, ensure react is installed as a dependency

[jordant97]

have the same issue, was on nextjs 14

[gerhardsletten]

@jordant97 Would you create a sample-repo?

[jordant97]

My bad, got it working following #125

[gerhardsletten]

@jordant97 Great to hear, then I close this again

[robyn3choi]

I'm getting this error after upgrading to 2.0.4. I'm not sure how jordant97 used #125 to solve it. Adding a height and width to the component's parent element didn't help.

[robyn3choi]

I'm using react v18.2.0 and next v14.1.0

[gerhardsletten]

@robyn3choi Can you make a test repo where this happen?

[robyn3choi]

Sure, here's a test repo - https://github.com/robyn3choi/react-reader-bug. Running yarn dev and going to localhost:3000 will result in that error.

[gerhardsletten]

@robyn3choi Try to upgrade to npm i [email protected] and change your code to: (you need a height/width for parent element)

<main className="h-screen w-screen">
  <ReactReader
    url="https://react-reader.metabits.no/files/alice.epub"
    location={location}
    locationChanged={setLocation}
  />
</main>

The problem was that react-reader's package also need to have and exports field and NextJS was not able to load the es-module with the module field

"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/react-reader.es.js"
    },
    "require": {
      "types": "./dist/index.d.ts",
      "default": "./dist/react-reader.umd.js"
    }
  }
},

[robyn3choi]

Thanks, it's working for me now!

[gerhardsletten]

Great!