TypeError: (0 , _nanoid.nanoid) is not a function

[neviaumi]

I trying upgrade nanoid from 2.x to 3.x in CRA environment

The export value from nanoid is always undefined

And i got error when running below jest test

import { nanoid } from 'nanoid';
it('Should work', () => {
  console.log('nanoid is ', nanoid);
  const genId = nanoid();
  expect(() => genId()).not.toThrow();
});

Console message

console.log src/services/spotify/auth/__tests__/authorize.test.ts:14
    nanoid is  undefined
TypeError: (0 , _nanoid.nanoid) is not a function

Also i try below test

import * as nanoid from 'nanoid';

it('Should work', () => {
  console.log('nanoid is ', nanoid);
  const genId = nanoid.nanoid();
  expect(() => genId()).not.toThrow();
});

Console message

  console.log src/services/spotify/auth/__tests__/authorize.test.ts:14
    nanoid is  { default: 'index.cjs' }
TypeError: nanoid.nanoid is not a function

[neviaumi]

https://github.com/davidNHK/spotify-music-player/blob/development/src/services/spotify/auth/authorize.ts

Source reference

[TrySound]

Maybe CRA has some cache? Did you try to rerun it after installing new version?

[TrySound]

Hm.. this is unexpected nanoid is { default: 'index.cjs' }. v2 does not have this.

[TrySound]

Perhaps the problem comes from the fact that CRA does not support .cjs extension.

[ai]

Perhaps the problem comes from the fact that CRA does not support .cjs extension.

CRA should use ESM or even index.browser.js.

Does CRA still use a webpack?

[TrySound]

Got it. It's loaded as path with file loader 🤦‍♂

https://github.com/facebook/create-react-app/blob/edc671eeea6b7d26ac3f1eb2050e50f75cf9ad5d/packages/react-scripts/config/webpack.config.js#L544-L549

[ai]

Fixing .cjs loading will not fix the problem.

index.browser.js should be loaded according to package.browser

[TrySound]

Perhaps specified extensions prevents browser field lookup
https://github.com/facebook/create-react-app/blob/edc671eeea6b7d26ac3f1eb2050e50f75cf9ad5d/packages/react-scripts/config/paths.js#L32-L44

[ai]

@davidNHK I cloned your project, updated Nano ID by yarn upgrade-interactive --latest, replaced import nanoid from to import { nanoid } from and everything starts to work.

In your pull request, you didn’t replace import nanoid from import { nanoid } from`.

Can you try to do it again with updating imports according to the migration guide. If you will have any problem, just give me a link to git branch to reproduce the error.

[neviaumi]

@davidNHK I cloned your project, updated Nano ID by yarn upgrade-interactive --latest, replaced import nanoid from to import { nanoid } from and everything starts to work.

In your pull request, you didn’t replace import nanoid from import { nanoid } from`.

Can you try to do it again with updating imports according to the migration guide. If you will have any problem, just give me a link to git branch to reproduce the error.

@ai

I attempt follow the migration guide

But problem still exist, PR here

P.S. i also attempt change index.browser to index.web and no luck

[baeharam]

Same issue here

[ai]

@davidNHK everything works in the web, problem realted with Create React App test runner.

[ai]

I found the problem in the CRA jest config generator. Wait for a second, I will create pull request to CRA.