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.

[ai]

I created pull request https://github.com/facebook/create-react-app/pull/8768

Please add 👍 if you want to merge it quicker

[ai]

I also added note about CRA to docs and migration guide

[ai]

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

[sandrocsimas]

In node.js this is not working:

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

This works:

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

[tareqdayya]

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', }));

[ai]

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

[langdon0003]

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.

[alycoy]

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

[ai]

@AntonioLobo do you use Create React App?

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

[guitheengineer]

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.

[guitheengineer]

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

[teaguestockwell]

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?

[lavrton]

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

[AvraamMavridis]

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