Next.js build cannot resolve 'react-use-auth/auth0'

[jasonLaster]

I went through these steps this morning and ran into a build issue.

1. npx create-next-app
2. yarn add react-use-auth auth0-js
3. update pages/_app.js from https://useauth.dev/docs/auth0/
4. yarn build
5. yarn dev

Build Error

here's what i see when i run yarn dev

➜  next-auth git:(main) yarn dev
yarn run v1.22.4
$ next dev
ready - started server on http://localhost:3000
error - ./node_modules/react-use-auth/dist/react-use-auth.esm.js:1:4504
Module not found: Can't resolve 'react-use-auth/auth0'

node_modules files

Here are the files I see in react-use-auth

node_modules/react-use-auth
├── LICENSE
├── README.md
├── dist
│   ├── AuthConfig.d.ts
│   ├── AuthProvider.d.ts
│   ├── NetlifyIdentity.esm.js
│   ├── NetlifyIdentity.esm.js.map
│   ├── NetlifyIdentity.js
│   ├── NetlifyIdentity.js.map
│   ├── NetlifyIdentity.modern.js
│   ├── NetlifyIdentity.modern.js.map
│   ├── NetlifyIdentity.umd.js
│   ├── NetlifyIdentity.umd.js.map
│   ├── __tests__
│   │   ├── AuthConfig.spec.d.ts
│   │   ├── AuthProvider.spec.d.ts
│   │   ├── authReducer.spec.d.ts
│   │   └── useAuth.spec.d.ts
│   ├── auth0.esm.js
│   ├── auth0.esm.js.map
│   ├── auth0.js
│   ├── auth0.js.map
│   ├── auth0.modern.js
│   ├── auth0.modern.js.map
│   ├── auth0.umd.js
│   ├── auth0.umd.js.map
│   ├── authReducer.d.ts
│   ├── index.d.ts
│   ├── index.js
│   ├── index.js.map
│   ├── index.modern.js
│   ├── index.modern.js.map
│   ├── index.module.js
│   ├── index.module.js.map
│   ├── index.umd.js
│   ├── index.umd.js.map
│   ├── providers
│   │   ├── NetlifyIdentity.d.ts
│   │   ├── auth0.d.ts
│   │   └── index.d.ts
│   ├── react-use-auth.esm.js
│   ├── react-use-auth.esm.js.map
│   ├── react-use-auth.js
│   ├── react-use-auth.js.map
│   ├── react-use-auth.modern.js
│   ├── react-use-auth.modern.js.map
│   ├── react-use-auth.umd.js
│   ├── react-use-auth.umd.js.map
│   ├── types.d.ts
│   └── useAuth.d.ts
├── package.json
└── src
    ├── AuthConfig.tsx
    ├── AuthProvider.tsx
    ├── __tests__
    │   ├── AuthConfig.spec.tsx
    │   ├── AuthProvider.spec.tsx
    │   ├── authReducer.spec.ts
    │   └── useAuth.spec.tsx
    ├── authReducer.ts
    ├── index.ts
    ├── providers
    │   ├── NetlifyIdentity.ts
    │   ├── auth0.ts
    │   └── index.ts
    ├── types.ts
    └── useAuth.ts

[catrawalkar]

Facing Same Problem.

[yjean]

Same module resolution issue from a create-react-app app.

[jasonLaster]

I haven't done this yet, but it would probably be pretty easy to bisect the problem with a local copy of react-use-auth and npm link

[Swizec]

Okay lesson learned, don't test things in the examples/ directory of a library :D

This line in AuthProvider is the problem:

import("react-use-auth/auth0").then(({ Auth0 }) => {

If I change it to ./providers/auth0, it gets confused about importing TS files.

Seems like the only way to fix it is breaking backwards compatibility. Which is better than the library not working, bye bye <AuthProvider>

[yjean]

As it was introduced in a new major release, breaking backward compatibility makes sense for me.

Unfortunately, that's just my user point of view, I don't know how to help technically on this.

[Swizec]

Just released v2.0.2 that fixes this. Thanks for reporting @jasonLaster

[Swizec]

@all-contributors add @jasonLaster for bugs

[allcontributors]

@Swizec

I've put up a pull request to add @jasonLaster! 🎉