Recently, I downloaded mern.io. The nice thing is they have bundled everything for me. But I am kind of lost. In my last project whenever I changed something on client I could refresh browser and see the changes. With MERN I always see:
webpack building...
webpack built e9c15d7d435381a63771 in 1043ms
At first it was replacing the code on client. Now, I can't make it to propagate changes any more.
Maybe it's an issue with https://github.com/gaearon/react-hot-loader
What am I missing?
Do I have to clean the webpack or caches somehow?
EDIT
The config files can be seen here: https://github.com/Hashnode/mern-starter
The webpack ones are webpack.config.*.js
EDIT 2
The computer restart helped me but only for the first load of the page. I have found this message in the console:
XMLHttpRequest cannot load http://0.0.0.0:8000/50d9888579520587227e.hot-update.json
Which led me here: https://github.com/gaearon/react-hot-loader/issues/56
Related
I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a new browser tab and enter the CSS file link, I am able to get the CSS file but occasionally need to fetch the 2nd or 3rd time to get the file. When the website loads, the CSS file seems not be able to loaded at the same time. In the HTMLWebpackPlugin, I have set the scriptLoading as 'blocking'. Any idea how to debug and fix this issue? Another questions, only webpack generated js and CSS file has load issue, the other files like flexbox.min.css has no issue to load.
Update: I downgraded to using webpack4 and this issue is gone. If anyone has an idea or knows any configuration regarding this, please please let me know.
Thanks
I'm working on it as a react and running the bundled file as webpack-dev-server.
The problem I have is, For example..
/jkdlfjq
If you enter it in the address window, history ApiFallback of webpack will find my original index.html address.
but,
(meaningless address)
/jkdlfjq/djfiqjifq
/djqoife/qjeifoqjef/qjeifojf
/qjeif/dd/qqq/kk
If you put "/" on it, it makes the same error as the picture above.
I looked up all the settings on webpack, but I couldn't find solution because of my search skills.
Is there a sweet guy who can give me a hint?
I had a really interesting debugging experience last night so I thought I'd share
On gatsby#4.4 + gatsby-plugin-image#2.4 + Netlify (may not matter) I noticed that I was not able to see GatsbyImage components under these specific circumstances:
only on initial load (hitting a nav button rendered the images)
only on desktop and on Chrome
only in prod (Images were loading perfectly in localhost after running gatsby develop )
The issue for me was that when I migrated from v2 to v4 and swapped out gatsby-image to the recommended gatsby-plugin-image, I forgot to add it to gatsby-config. For whatever reason, using {GatsbyImage} from the newer gatsby-plugin-image does not throw any errors even if you don't add it to gatsby-config. Not only that, the dev preview in localhost will show images rendering perfectly.
To make things even more confusing, {StaticImage} appears to NOT work if the plugin is not loaded in config and Gatsby will correctly tell you that something is wrong.
Anyways, my takeaway is.. always check that all plugins are added to config because in certain cases there is no error handling for that. And always check out dev AND prod builds before pushing code!
I'm working on two React projects.
In both projects, the manifest.json file is set up correctly and The serviceworker is also registered.
In one of the projects, the question of adding to the home screen is not asked.
From the research I've done, I've found that a project that doesn't work properly can't find a file in .license format, but in a project that works properly, it's a file with a .license.txt format.
What makes the difference between the two files when it is taken from the building project? How can this problem be solved?
Photo of the project that works properly and displays the install app prompt
The project photo does not work properly and does not show the install app prompt
error message in console
Finally I found the solution to the problem. If you have ejected the project, you can add a field called extractComments with a false value in the webpack.config.js file in the TerserPlugin section. If you have not ejected the project, you can solve this problem by creating a webpack.config.js file and adding the Terser module with the default settings and adding the extractComments field with a false value. The following links may be helpful in understanding and resolving the issue.
license-to-kill-your-PWA
terser-plugin