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

[David]

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

[David]

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

Source reference

[Bogdan Chadkin]

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

[Bogdan Chadkin]

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

[Bogdan Chadkin]

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

[Andrey Sitnik]

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?

[Bogdan Chadkin]

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

[Andrey Sitnik]

Fixing .cjs loading will not fix the problem.

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

[Bogdan Chadkin]

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

[Andrey Sitnik]

@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.

[David]

@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

[Andrey Sitnik]

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

[Andrey Sitnik]

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

[Andrey Sitnik]

I created pull request facebook/create-react-app#8768

Please add 👍 if you want to merge it quicker

[Andrey Sitnik]

I also added note about CRA to docs and migration guide

[Andrey Sitnik]

My PR was accepting. Now we need to wait a few days for the new CRA release.

[Sandro Simas]

In node.js this is not working:

const nanoid = require('nanoid');
nanoid();

This works:

const {nanoid} = require('nanoid');
nanoid();

[Tareq Dayya]

Any news on this?
For some reason, this problem occurs only when i'm mocking the module globally (inside "__mocks__/nanoid.ts") like this:
export default { nanoid: () => '123456789012', };
But not when i mock it inside individual test suites like this:
jest.mock('nanoid', () => ({ nanoid: () => '123456789012', }));

[Andrey Sitnik]

@tareqdayya Create React App maintainers accepted my PR but still do not release it. Feel free to create an issue in their repo and ask for release.

I can’t help here. Ask CRA maintainers about releasing the fix,

[Mr. Langdon]

In node.js this is not working:

const nanoid = require('nanoid');
nanoid();

This works:

const {nanoid} = require('nanoid');
nanoid();

I face the same issue and this one work for my case.

Thanks for saving 1 hour.

[Antonio Lobo]

I'm facing the same problem when using react testing library
TypeError: (0 , _nanoid.nanoid) is not a function

using nanoid version ^3.1.12

[Andrey Sitnik]

@antoniolobo do you use Create React App?

I sent the fix to CRA, but they are still not released it.

[Gui]

I updated Create React App to 4.0.0 with npm install --save --save-exact react-scripts@4.0.0 and it fixed.

See more about migrating to newer CRA versions here.

[Gui]

Update: solved again an entire different app by updating CRA to 4.0.0. Seems the solution for who is using:

• Create react app
• React testing Library

[Teague Stockwell]

I'm having the same issue when running on Code Sandbox. It seems to work fine below version 3.1.17 of nanoid. Is this related, or could it be an issue with Code Sandbox?

[Anton Lavrenov]

Just had the same issue on code sandbox too. I am not sure where to look at.

The demo from @tsAppDevelopment works ok with 3.1.16 and not ok from version 3.1.17

[Avraam Mavridis]

For anyone that is still facing the issue. ESM can’t import named CJS exports unless CJS scripts execute out of order

So you can do this:

import nanoid from 'nanoid'

but you can't do this:

import { nanoid } from 'nanoid'

That’s because CJS scripts compute their named exports as they execute, whereas ESM’s named exports must be computed during the parsing phase.

A workaround is

import _nanoid from 'nanoid'
const { nanoid } = _nanoid