-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uppy throws with latest create-react-app (react-scripts 5), Uncaught TypeError: nanoid is not a function #3376
Comments
It it so weird, code works fine in codesandbox, but not locally, but they're identical. Github repo: Codesandbox: Local screenshot: uppy-sd.mp4 |
I've been struggling with this issue for 2 days, someone please help 😭😭 |
I made a screenshot for the whole process from scratch: uppy2.mp4 |
I'm able to reproduce. I think it's an issue with create-react-app itself, that returns a string to the |
I'm also not sure what we can do about this. @aduh95 if you're out of ideas feel free to close this. |
Can you help point us to where the Given that the function being used is only about ten lines of code, might it be possible to just vendor that function? |
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 Edit: I have a fork with that change here if it's helpful to anyone. |
… note this may break React Native compatibility.
Looking at the source code won't tell you that, the package uses
We recently switched to @aduh95 should we revert? |
https://unpkg.com/[email protected]/non-secure/index.cjs I don't think using
I'm not sure, I think using the non-secure implementation is beneficial for us (we don't use |
For anyone trying to understand the misconfiguration, it seems adding A short term solution is for anyone suffering this issue to eject their app from CRA, and make that change. |
Looking at the CRA GitHub repo, it looks like there are several open PRs trying to address |
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 |
Thanks @zackbloom. In response to #3376 (comment) I added the following in 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,
},
})
) |
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 |
Do we have any progress on this issue |
See transloadit/uppy#3376 BREAKING CHANGES
Still error on react-scripts 5.0.0 |
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. |
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?). |
@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. Hope it will work for you too ! PS: for the story I reverted my eject for that customization ;) Thanks @duanecilliers |
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. |
I found a "solution", if you are using React 18 disable Strict mode. In NextJS change your |
for those who encounter the same issue: |
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? |
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:
package.json
App.tsx
The text was updated successfully, but these errors were encountered: