NextJS module not found

[Flowrome]

Hi

Do you have any idea why nextjs is giving me module not found with this library?

here's the error (there's nothing else really)

// _app.tsx
import { GbaProvider } from "react-gbajs"

const AppWrapper = ({ Component, pageProps }: Props) => {
  console.log(GbaProvider)
  return (
    <I18nextProvider i18n={i18n}>
      <GlobalContextProvider>
        <App {...{ Component, pageProps }}></App>
      </GlobalContextProvider>
    </I18nextProvider>
  )
}

error - ./pages/_app.tsx:17:0
Module not found: Can't resolve 'react-gbajs'
  15 | import { env } from "../infrastructure/utils/environment"
  16 | import { themes } from "../infrastructure/theme"
> 17 | import { GbaProvider } from "react-gbajs"
  18 | 
  19 | const AppWrapper = ({ Component, pageProps }: Props) => {
  20 |   console.log(GbaProvider)

I'm using NextJS 12.0.7 with typscript

Thank you for your hard work

Have a nice day

[macabeus]

I guess it's the same reason why eslint-plugin-import raises a false positive error (https://github.com/import-js/eslint-plugin-import/issues/2132).

In short, I didn't include the main field in the package.json, since it's only for the browser. NextJS is probably looking only for the main field instead of main and browser fields.

I can try to fix it by adding the main field in the package.json as a workaround, but it's a NextJS issue.

[macabeus]

Fix done. You can use version 1.0.2 now.

If you want, you can check this repository with a workable (and dirty) example: https://github.com/macabeus/next-js-react-gba-js

[Flowrome]

Thank you @macabeus you've made my life simplier :)