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

[AustinMutschler]

I am getting the following error when building a package that is using this one as a dependency. The package swagger-ui-react v3.25.3 is using formdata-node v2.1.2.

Error: TypeError: (0 , _nanoid.customAlphabet) is not a function. File: https://github.com/octet-stream/form-data/blob/master/src/lib/util/boundary.mjs

Your help in fixing this issue would be appreciated.

[AustinMutschler]

It appears you updated to Nanoid v3.1.9. This could have caused a regression in your code.

[AustinMutschler]

Here it is 3.0.0 Nanoid migration Guide. It appears they changed how importing working works. https://github.com/ai/nanoid/releases/tag/3.0.0

[octet-stream]

Hi! Sure I will take a look. Well, imports seem correct per this file https://github.com/octet-stream/form-data/blob/4aefc8780767ee821431baa6e655396a0843f864/src/lib/util/boundary.mjs#L1

[AustinMutschler]

Hi! Sure I will take a look. Well, imports seem correct per this file

https://github.com/octet-stream/form-data/blob/4aefc8780767ee821431baa6e655396a0843f864/src/lib/util/boundary.mjs#L1

Yeah I saw the imports were correct and at first glance it looks like you are using the function correctly as per the documentation under the "Custom Alphabet" section.

[AustinMutschler]

Here is the build code that I am seeing. The import does not seem correct here.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _nanoid = require("nanoid");

const alpha = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
/**
 * @api private
 *
 * @return {string}
 */

const boundary = (0, _nanoid.customAlphabet)(alpha, 22);
var _default = boundary;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;

[octet-stream]

Yeah, this is the same exact code I see in the package distro. And I'm using it as dependency for my other library. Also works fine. Can you give me some more information, such you do you build it?

[octet-stream]

The import does not seem correct here.

Well, it will import CJS version of nanoid then _nanoid will contain an object with every public method including customAlphabet.

[AustinMutschler]

The import does not seem correct here.

Well, it will import CJS version of nanoid then _nanoid will contain an object with every public method including customAlphabet.

I am not using your package directly. I am using a package called swagger-ui which imports swagger-client ^3.10.3 which imports @tim-lai/isomorphic-form-data ^1.0.0 which imports formdata-node ^2.1.1 which now imports v2.1.2 of your code (You have to love node deps lmao). I am just installing their package and my Jest test suite flagged the error when trying to run a test to render the page which has worked continuously for a while including yesterday.

The only package in the Dep tree that has changed in the past day or 2 is this one and the test flagged that file specifically so I wanted to let you know about it and see if there is anyway I can help.

[AustinMutschler]

@octet-stream I have confirmed that the issue is with 2.1.2. I stored a custom version of @tim-lai/isomorphic-form-data in my own personal registry and locked the version import of formdata-node to v2.1.1 and everything is working again. I am not sure what the issue is in your code as it looks correct. Maybe something in the build is not working.

[octet-stream]

I'm not sure, but this seem to be a similar issue: https://github.com/ai/nanoid/issues/205

Can you check what's the imported nanoid object will print through console.log in your project?

[emonty]

I'm hitting the same thing, and I think it might be related to https://github.com/facebook/create-react-app/pull/8768 (and I agree on https://github.com/ai/nanoid/issues/205)

I tried the latest release of formdata-node and now get a slightly different error:

    TypeError: (nanoid.default || nanoid).customAlphabet is not a function

I pinned both formadata-node and nanoid in package.json:

"resolutions": {
    "formdata-node": "2.1.1",
     "nanoid": "2.1.11"
   },

and all is ok. I'm hoping the new release of create-react-scripts will allow me to remove the pins.

FWIW - although it's a bit heavyweight - if you want to reproduce:

git clone https://opendev.org/zuul/zuul
cd zuul/web
git fetch https://review.opendev.org/zuul/zuul refs/changes/05/716305/27 && git checkout FETCH_HEAD
yarn install
yarn run test

That patchset has a pin of just nanoid and still fails: https://zuul.opendev.org/t/zuul/build/9c80c65411f4456ca06e89901c669316/log/job-output.txt#522

Mostly mentioning all of that in case it's useful for figuring out a "better" fix - but my hunch is that we need the 3.4.2 of CRA here.

[AustinMutschler]

facebook/create-react-app#8768

Looks like they slated that release for 4.0 so It will take awhile for them to add full support for Jest cjs/mjs files. This issue you found is very helpful. I am doing the same thing you are doing with the pins and it works for now. Hopefully, they can add support soon. My other projects are pure React without CRA so this makes sense.

[octet-stream]

I'm closing this issue because I'm not using nanoid in the package anymore, so is should not cause this error anymore. Also, the swagger-client seem to removed formdata-node from their dependencies, see: https://github.com/swagger-api/swagger-js/pull/1547