I'm working on an application which I would like to add IE11 support to. I've added react-app-polyfill, mdn-polyfills and core-js as dependencies. I had a little trouble running it on Edge (Legacy version) at first, but that's up and running. I'm using Immer which seems to be the culprint for IE11 not working.
My reason for thinking this is the error [Immer] minified error nr: 19 ES5. Find the full error at: https://github.com/immerjs/immer/blob/master/src/utils/errors.ts. The error is "Plugin not loaded". Going through the Immer documentation, then it specifies to use the function enableES5().
I've called enableES5() in index.tsx, I've even moved it to the top, right underneath the polyfills imports, but the error persists. I've been going at this for a few hours now, but can't seem to figure out what is wrong, or if i'm missing something crucial.
Make sure that you are using the latest version of immer 7.x
Try this:
import {enableES5} from "immer"
enableES5()
After hours of testing and trying to figure out what the problem was, then I came across a post regarding create-react-app by a developer for Immer. Create-react-app has react-scripts which has a dependency of react-dev-util which again has a dependency to Immer. The problem is that the dependency is extremly outdated (v1.10). The devs of Immer have been pushing CRA to update the version, and they have, but it hasn't been released yet. So, for the time being, then the solution seems to be that downgrading to Immer v5.3.6 solved my problem
Related
I've setup a rails app all good, server runs fine etc, now I need to add React to it.
I see the command
rails webpack:install:react
appears to be the way everyone recommends but when I run this I get the following error:
rails aborted!
Don't know how to build task 'webpacker:install:react' (See the list of available
tasks with `rails --tasks`)
Did you mean? webpacker:install
So I run webpacker:install, alls good then try with :react again and the same errors generated, I've got react added in the package.json file and react-rails in the gem file. I've also run bundled since adding these.
I cant find an answer anywhere so whatever you've got I'll take.
Thank you.
Found the issue, the problem was that webpacker:install:react was removed from webpacker v6, moved to version 5.4.3 and the issues resolved.
More info here:
https://github.com/rails/webpacker/pull/2802/files#diff-8efe491b392a5a50e31b54660bbc0e7258e544e36d4e0b8a65e4cca93d39d18c
As the above answer states, this was removed. If you see a tutorial telling you to run rails webpack:install:react you can simply skip it if you've already run rails webpack:install. React now works "out of the box" and so you don't need to specify it.
I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message.
I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!
React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.
Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.
You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.
A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).
I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true
I have huge problems with apollo-react and typescript. For some reason compiling started fail (I don't what has changed). I started from the clean table couple of times but no luck. Here is the error, looks very clear but I'm not able resolve it.
.../node_modules/react-apollo/ApolloConsumer.d.ts
(1,8): Module '.../node_modules/#types/react/index"' has no default export.
This appears when I include ApolloProvider.
I have tried with allowSyntheticDefaultImports and esModuleInterop flags but it just get new problems and also I'm sure earlier it worked without.
-hakki
Once you enable esModuleInterop, it looks like the react-apollo/browser.d.ts breakage was introduced recently by this PR (released in version 2.2.0) and fixed today by this PR (not yet released). You'll have to go back to react-apollo version 2.1.11 (or point your dependency to the git repository) until the fix is released.
I have this big problem with my create-react-app. I am using styled-components and everything works whene developing but after I build it, some of the styled are missing and the app looks really broken.
It does not happen with the same component everytime. I tried it a month later when my app progressed a lot hoping the problem would solve itself, but it is still happening, just somewhere else.
I noticed that some styles are missing in head of the HTML - first style tag.
I don't know what to do with it, I haven't found anyone with similar problem.
So I finally solved the problem!
With npm list styled-components I found out that package grid-styled is using a different version of styled-components than my project. I synced the version and the styles started to behave correctly even in production build.
I am using reactstrap in my React app which was originally created by create-react-app.
The problem I'm having is with reactstrap, I'm getting the following console warnings:
./~/reactstrap-tether/dist/js/tether.js
Critical dependencies:
2:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/reactstrap-tether/dist/js/tether.js 2:479-486
In the project's GitHub issues, I see possible solutions listed like so: "To suppress the warning (for now), add this to your webpack config file...". The problem is, with Facebook's create-react-app I do not have a Webpack configuration file to configure. How can I go about fixing this warning
Looks like this has raised concern for people with create-react-app and a feature request has been put in and is currently being worked on. It should be fixed in the near future so there you shouldn't really worry about it. But to answer the other part of the question, it's possible to get the Webpack, Babel and other configuration files from create-react-app by running npm run eject but since this is an irreversible action and will separate you from future updates, I would highly suggest just waiting for the fix to happen.