Comments (7)
I'm able to reproduce this. The use-force-update
import is being returned by Webpack as a string (/path/to/some-file.cjs
) instead of returning the actual module.
There is a bug report for this at facebook/create-react-app#11889 and a pull request to fix it at #12352.
Here are some solutions:
- Downgrade
react-scripts
to^4
until they resolve it in^5
. - Downgrade
use-force-update
to1.0.8
. - Install Craco and use this configuration.
- Eject from
react-scripts
and update your Webpack config like this. - Use the commit in the pull request for your copy of
react-scripts
.
The easiest solution is likely to downgrade react-scripts
. If you want the newest toys (who doesn't?), then locking use-force-update
at 1.0.8
should work. It may be hard to patch your lock file manually, so depending on your package manager you can check out alternatives.
For NPM v8+:
package.json
{
"overrides": {
"use-force-update": "1.0.8"
}
}
For Yarn1:
package.json
{
"resolutions": {
"use-force-update": "1.0.8"
}
}
For Yarn2:
# .yarnrc.yml
packageExtensions:
'reactn@*':
dependencies:
use-force-update: 1.0.8
The third best solution is probably CRACO, because it's easy to just delete the CRACO config file if you decide you don't want it anymore. It's also nice to just have that freedom to configure Webpack regardless.
I hope one of these work for you. I could "fix" it in the package itself, but that would require removing native ESM support, and I'm reluctant to think that to be the right choice. 😞
from reactn.
I'll look into this. Can you confirm if you are using React Native or is this a browser project?
from reactn.
I'll look into this. Can you confirm if you are using React Native or is this a browser project?
This is a browser project. Using React v18.2.0
from reactn.
It is reproducible with react-scripts@^5
.
from reactn.
Thanks for looking into it!
For now I think I'll just lock use-force-update
to 1.0.8
. Seems to be the best option. Hopefully the webpack issue will get worked out soon.
from reactn.
I was upgrading react-scripts
from ^4
to ^5
and use-force-update
is the only library that broke the build. So I guess this library might be using something non-standard. I found this exports interesting but it could be the reason of breaking changes (from ^1.0.8
).
{
"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.cjs"
}
}
}
from reactn.
The reason is the cjs file extension, which is standard in newer versions of Node for packages that contain both CJS and ESM code. Others are experiencing it for other dependencies in the CRA bug report linked above.
It's true that not many dependencies use the CJS file extension. Not many dependencies vend both CJS and ESM builds.
from reactn.
Related Issues (20)
- Can we drop in preact in place of React while using Reactn? HOT 1
- Global state resets after Route change HOT 5
- Don't export functions with the same name as common React hooks HOT 1
- [Query] Does updating a global nested state, require deep copy ? HOT 2
- why is useEffect exported from the package? HOT 2
- Dependabot can't resolve your JavaScript dependency files
- Provider.useDispatch Errors with TypeScript HOT 1
- Global reducers do not work in TypeScript 4. HOT 4
- Ability to update state with a function with globalPropertySetter HOT 1
- React Native expo HOT 2
- react native compatible? HOT 5
- Feature request: add previous global state to addCallback parameters HOT 10
- useEffect in useGlobal has no dependencies and will run every render HOT 1
- Document how to put arrays and etc. in global state HOT 6
- Unwanted batch rendering
- Argument of type 'string' is not assignable to parameter of type 'never' HOT 3
- Dispatch re-renders components even when state is unchanged. HOT 2
- Set `peerDependencies` to `"@types/react": "^16.8.0 | ^17.0.2"` HOT 2
- Issue resolving dependency to `use-force-update` in react-native/expo project HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactn.