Uppy throws with latest create-react-app (react-scripts 5), Uncaught TypeError: nanoid is not a function

[waveiron]

To reproduce the error:
https://github.com/waveiron/uppy_example_1
It was created using create-react-app, only App.tsx and package.json dependencies are changed

You can follow the steps to reproduce the error:

npx create-react-app --template typescript my_app

package.json

// ...
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.14",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@uppy/core": "^2.1.4",
    "@uppy/react": "^2.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.2"
  },
// ...

App.tsx

import Uppy from '@uppy/core';
import { Dashboard, useUppy } from '@uppy/react';
import React from 'react';
import './App.css';

function App() {
  const uppy = useUppy(() => {
    return new Uppy();
  });
  return (
    <Dashboard uppy={uppy}/>
  );
}

export default App;

npm start

[waveiron]

It it so weird, code works fine in codesandbox, but not locally, but they're identical.

Github repo:
https://github.com/waveiron/uppy_example_1

Codesandbox:
https://codesandbox.io/s/trusting-murdock-5s4ec?file=/src/App.tsx

Local screenshot:

uppy-sd.mp4

[waveiron]

I've been struggling with this issue for 2 days, someone please help 😭😭

[waveiron]

I made a screenshot for the whole process from scratch:

uppy2.mp4

[aduh95]

I'm able to reproduce. I think it's an issue with create-react-app itself, that returns a string to the require('nanoid/non-secure') call... I looks like they don't support .cjs as a file extension for JavaScript, and returns a string instead of the actual module 🤔 Not sure what is happening there, it might be worth opening an issue on create-react-app repo.
A not very satisfactory workaround would be to keep using the previous create-react-app version (npx create-react-app@4.0.3 my-project seems to be working) or use a different build tool.

[Murderlon]

I'm also not sure what we can do about this. @aduh95 if you're out of ideas feel free to close this.

[zackbloom]

Can you help point us to where the .cjs file is? Might it be possible to use a .js extension? It doesn't appear that nanoid uses that extension: https://github.com/ai/nanoid/blob/main/non-secure/index.js

Given that the function being used is only about ten lines of code, might it be possible to just vendor that function?

[zackbloom]

This is the most likely place where .cjs could be included, but it doesn't actually resolve the issue: https://github.com/facebook/create-react-app/blob/f0a837c1f07ebd963ddbba2c2937d04fc1b79d40/packages/react-scripts/config/paths.js#L34-L46

For what it's worth, replacing const { nanoid } = require('nanoid/non-secure') with const { nanoid } = require('nanoid') does fix the problem.

Edit: I have a fork with that change here if it's helpful to anyone.

[Murderlon]

Can you help point us to where the .cjs file is? Might it be possible to use a .js extension? It doesn't appear that nanoid uses that extension: https://github.com/ai/nanoid/blob/main/non-secure/index.js

Looking at the source code won't tell you that, the package uses dual-publish, so it will output multiple builds, including cjs.

For what it's worth, replacing const { nanoid } = require('nanoid/non-secure') with const { nanoid } = require('nanoid') does fix the problem.

We recently switched to non-secure to avoid a React Native limitation. But in the case of React Native, it could also be fixed by adding a additional package, but we can't do that here.

@aduh95 should we revert?

[aduh95]

Can you help point us to where the .cjs file is? Might it be possible to use a .js extension?

https://unpkg.com/nanoid@3.1.30/non-secure/index.cjs

I don't think using .js extension would help.

should we revert?

I'm not sure, I think using the non-secure implementation is beneficial for us (we don't use nanoid for anything related to security) as it decreases the bundle size and works natively in more places. The issue here is with create-react-app specifically, I'm not sure it's worth making Uppy bigger in bundle size for everyone because of a bug in one build tool.
Has the bug been reported to create-react-app? If there's a fix incoming, it's definitely not worth reverting.

[zackbloom]

For anyone trying to understand the misconfiguration, it seems adding cjs to the list of extensions which should be processed by babel in areas like this solves it.

A short term solution is for anyone suffering this issue to eject their app from CRA, and make that change.

[aduh95]

Looking at the CRA GitHub repo, it looks like there are several open PRs trying to address .cjs support: https://github.com/facebook/create-react-app/pulls?q=is%3Apr+is%3Aopen+cjs
Given the bug is not on Uppy side, I think the correct thing to do is to close this as won't fix; until the bug is fixed upstream, you can use one of the workarounds listed above (or share yours if you find something else).

[digitalpraesidium]

Hallo, referring to @zackbloom solution about replacing const { nanoid } = require('nanoid/non-secure') with const { nanoid } = require('nanoid'), how can i apply this solutions in my node_modules in React project? i am experiencing this issue and it is a blocking issue for me. Thanks a lot

[duanecilliers]

Thanks @zackbloom. In response to #3376 (comment)
I used customize-cra to add a new webpack rule without ejecting.

I added the following in config-overrides.js

const { override, addWebpackModuleRule } = require('customize-cra')

module.exports = override(
  addWebpackModuleRule({
    test: /\.(cjs)$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve('babel-loader'),
    options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [
        [
          require.resolve('babel-preset-react-app/dependencies'),
          { helpers: true },
        ],
      ],
      cacheDirectory: true,
      // See #6846 for context on why cacheCompression is disabled
      cacheCompression: false,
      // Babel sourcemaps are needed for debugging into node_modules
      // code.  Without the options below, debuggers like VSCode
      // show incorrect code and set breakpoints on the wrong lines.
      sourceMaps: true,
      inputSourceMap: true,
    },
  })
)

[kamalesh777]

I have tried all suggested ways but it doesn't return any errorless result. It returns same error that is nanoid is not a function

[mbvenu]

Do we have any progress on this issue

[001123]

Still error on react-scripts 5.0.0

[Murderlon]

I still stand by @aduh95's point: #3376 (comment).

It's a problem on the CRA side, not us. Fortunately we are moving to ESM in the nearby future which could solve this.

[DavidDuwaer]

Also need a fix on this issue. It's breaking, so I guess the only option is to not use <Dashboard/>. Ejecting CRA is never an option; switching to something other than CRA is a similar way too large thing to do for a single library and the customize-cra fix in the comment above doesn't work for me (on the dev server, is what I've tested. Anyone who did get that to work?).

[oxyno-zeta]

@DavidDuwaer I used this customization on my project and this is working well. You can find it here: https://github.com/oxyno-zeta/s3-proxy-interfaces in the dashboard folder for example.
The configuration provided needs to have 'react-app-rewired' installed and configured in the package.json (replacing the cra commands).

Hope it will work for you too !

PS: for the story I reverted my eject for that customization ;) Thanks @duanecilliers

[DavidDuwaer]

Thanks a lot, it works now on my dev server. I simply forgot to replace react-scripts with react-app-rewired in package.json's script commands.

[johan-apo]

I found a "solution", if you are using React 18 disable Strict mode. In NextJS change your next.config.js, change reactStrictMode from true to false. Don't forget resetting your development server (at least in NextJS which I am using).

[Ionut-Milas]

for those who encounter the same issue:
facebook/create-react-app#12021

[GuiltyRemnant]

For anyone trying to understand the misconfiguration, it seems adding cjs to the list of extensions which should be processed by babel in areas like this solves it.

A short term solution is for anyone suffering this issue to eject their app from CRA, and make that change.

Thank you, that solved it for me. Why do i have to change something in node_modules and why isnt that in the package by native?