This module seems to be having some problems lately. I had been using react icons 3.2.1 but that was having problems importing icons that weren't being used in the project, causing poor lighthouse scores, and in general bad practice to bloat your bundle.js with lots of unnecessary files.
So
"#react-icons/all-files": "^4.1.0"
and
import { BsPlus } from '#react-icons/all-files/bs/bsArrowRightShort'
was succesfully importing only those icons -- and it worked fine locally -- but when I push to heroku, I get the following error
2022-04-19T22:16:58.682656+00:00 app[web.1]: ERROR in ./src/client/components/common/Layout.js 9:0-80
2022-04-19T22:16:58.682657+00:00 app[web.1]: Module not found: Error: Can't resolve '#react-icons/all-files/bs/bsArrowRightShort' in '/app/src/client/components/common'
2022-04-19T22:16:58.682657+00:00 app[web.1]: # ./src/client/components/App.js 7:0-37 11:42-48
2022-04-19T22:16:58.682657+00:00 app[web.1]: # ./src/client/index.js 9:0-38 15:85-88
I'm not sure what else I would have to do to also have this work in production... but this completely breaks the site, its not that it doesn't load or shows a broken image link icon, this completely crashes my server, which seems like...not ideal for a package that's supposed to just be serving icons.
I've also opened an issue on the github here: https://github.com/react-icons/react-icons/issues/554
Related
I am getting the following error when publishing my create react app but the error doesn't appear locally. I recently updated my React version and a load of packages too. I'm guessing it's possibly something to do with that as I've never had this issue before?
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://**subdomain**.azurewebsites.net/') with script ('https://**subdomain**.azurewebsites.net/service-worker.js'): The script has an unsupported MIME type ('text/html').
Any input on this will be greatly appreciated. The error doesn't appear to be breaking anything from what I can see but I'd rather not push this to production with any kind of errors
So turns out the issue was because I updated the react version. CRA doesn't have service workers out of the box anymore. The project was returning 'unsupported MIME type ('text/html')' because it was hitting 404 looking for a file that doesn't exist.
The fix was relativly simple.
I replaced the registerServiceWorker() in my index.js file with reportWebVitals(). I then added reportWebVitals.js to my src folder. (I just created a temp react project and pulled the file from that). After I did that it started to work for me. I think I also had to npm install web-vitals.
In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.
I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet in my index.js:
import 'rsuite/lib/styles/index.less';
I get the following message when running gatsby develop:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
If you're trying to use a package make sure that 'rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct.
File: src/pages/index.js:14:0
failed Building development bundle - 7.237s
ERROR in ./src/pages/index.js 14:0-38
Module not found: Error: Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
# ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 31:11-33:5
# ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 1 error
I tried so many things already: installing and reinstalling rsuite, installing and reinstalling gatsby-plugin-less and less, clearing the cache, trying all kinds of configurations in gatsby-config.js, but I'm out of options really.
Meanwhile, installing react-bootstrap and importing the stylesheet similarly through
import "bootstrap/dist/css/bootstrap.min.css";
does not produce the error and the stylesheet gets applied.
Would greatly appreciate your help!
I think you should be using:
import '~rsuite/lib/styles/index.less';
Notice the ~, as it is inferred from the docs.
You can try this:
import "rsuite/src/styles/themes/default/index.less"
https://github.com/rsuite/rsuite/blob/next/examples/with-gatsby/src/pages/index.js#L4
I am getting a "Failed to compile" error while trying to set up React with Webpack 4 and webpack-dev-server. The exact error showing is:
Failed to compile
./node_modules/history/es/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/vagrant/node_modules/history/es/index.js'
This error occurred during the build time and cannot be dismissed.
In the node_modules directory, the file in question indeed exists. However, I checked the files being sent over, and that file (and its siblings) is being sent as /vagrant/node_modules/history/index.js with the es director missing.
I am not exactly sure what is causing this. Some research suggested things like mismatched casing on imports, but I checked quite a few times and do not see anything like that going on. I am a bit of a noob when it comes to this, though, so I might be missing something obvious.
EDIT
Upon further investigation (with the help of Boy With Silver Wings' comment), the error is actually coming from the depths of React Router. This issue demonstrates something close to my issue, but in their version there is duplication of the history modules while mine seems to "move" them.
I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .