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

Do we have any progress on this issue

Thanks @zackbloom. In response to https://github.com/transloadit/uppy/issues/3376#issuecomment-1000400488 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,
    },
  })
)

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.

@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

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

for those who encounter the same issue: https://github.com/facebook/create-react-app/pull/12021

Still error on react-scripts 5.0.0

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

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?).

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.

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