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.
Related
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'm learning NextJS, and using PhpStorm for development. I never had problem with React auto-import since now. But my IDE doesn't seem to detect NextJS for auto-import components and classes.
I created my project using yarn create next-app and created a new really basic page with <h1>Hello World</h1> and wanted to add a <Link> and <Image> but both are not suggested in auto-import.
It seem nothing like that, but I really need this for creating a whole project. So wanted to know if you have any suggestion to fix that issue?
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
Description
Please, I'm desperate. For the last 3 days, I've been trying without luck to implement react-hot-loader within an electron app and don't know what else to try. I'm following many comments, posts, issues trying to replicate what they did but none gives me enough information about the entire setup so I can find what I'm missing. I've already tried electron-webpack but it didn't work for me. It has HMR from webpack, but no react-hot-loader and that makes applications using react-router a pain to work with. Maybe it's not possible, but people seem to have achieved it so I'm not willing to give up.
Expected behavior
Project setup with electron, webpack, webpack-dev-server, react, react-router, react-hot-loader. I want to be able to change CSS and HTML strings without having to rebuild the entire project with webpack and restart it.
Actual behavior
Looking for the right styles in a component accessed through react-router links takes forever. Can't keep doing this. I've been using the dev tools for that purpose but it's not even close to the speed achievable by trying things in an IDE.
Environment
Deps:
electron 4.2.10
webpack-cli 3.3.7
webpack-dev-server 3.8.0
webpack 4.39.3
react-hot-loader 4.12.12
react-router-dom 5.0.1,
System:
OS Ubuntu 18.04 LTS
node 10.16.2
npm 6.9.0
yarn 1.7.3
Reproducible Demo
This is the project I'm trying to set it up for https://github.com/nahuelarjonadev/kafka-lens/, but I'm ultimately looking for just a super simple working demo so I can mirror the configurations or at least get a hint on how to do it. I couldn't find one yet.
Use the webpack react electron boilerplate and add on it the react-hot-reloader or whatever else you want to add, i am sure that will probably work, is a good starting point for sure.
https://github.com/electron-react-boilerplate/electron-react-boilerplate
my problem resides around Gatsby's production build failing to make project, which would seem and work as it should.
My goal is to adapt material-kit-react into Gatsbyv2 generated project.
done project in develop mode
so far so good i managed to do it all no problem, site looks exactly like it should in developer mode on my computer, but when i tried to put it on Github pages Gatsby build command needed to be executed, and when it did i errors appear around window object which is not defined on server where project tries to run when building (or something like that source: https://github.com/gatsbyjs/gatsby/issues/309 ). I resolved all of those errors as Gatsby employee suggested using if statement to not use window when its undefined, an it worked just fine, Gatsby ended its 'gatsby build' function and automatically published it to Github Pages thanks to ""deploy": "gatsby build --prefix-paths && gh-pages -d public""
After deploying however something strange happens to my site
project after publishing it onto Github pages
i found that it may be because css random class generator overlap somewhere, so i added JssProvider with generateRandomClassName from #material-ui/core into new layout component and it kida worked
material ui random name generator
but effect was far from desired:
deployed project after adding random class generator
and i tried to found whats wrong with this code, but i don't understand everything in react and gatsby yet and im empty of ideas. no errors, no eslint warning, everything falls apart anyway with no visible sign for me.
here is source material: https://github.com/Thrajnor/Gatsby-material-ui/tree/master/landingpage
and here is deployed page after build: https://thrajnor.github.io/Gatsby-material-ui/
i would really appreciate help or even a little advice in whats happening