I am beginner on npm and web-pack-dev server. Recently I have created reactJs app using nmp and webpack. So at the beginning everything gonna fine when I save the content it auto refresh and reload the content on browser. But on next day, after restarting server and change the content the server does not reloading the content. Every time I need to stop and start the server to see the changes. Which is not good. I have fix the problem by uninstall and install the webpack and webpack-dev-server. But today I again I do the same but the problem did not fixed. Anyone please suggested me how to fix this issue. I have created the app with the reference http://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
The problem is fixed by adding the line above to the webpack.config.js file,
var webpack = require('webpack'), need to require the webpack package.
Related
I am working on a project that includes react as frontend technology. Python Django is used for backend and both of them dockerized by a docker-compose file and Dockerfiles. When I try to edit and save index.html or App.js file, nothing happened. Docker container terminal and browser stayed still, despite app's files are mounted correctly in docker-compose file.
When I look up for the solution to this case on SO and other websites, all of the suggestions were made towards to environment variables like CHOKIDAR_USEPOLLING, WATCPACK_POLLING and FAST_REFRESH.
In those websites, WATCHPACK_POLLING was suggested to use instead of CHOKIDAR_USEPOLLING due to using react-scripts version 5.0.1 in my project. So I set WATCHPACK_POLLING=true in environment variable and tried again.
This time webpack compiles with this message in terminal:
frontend-app-1 | Compiling...
frontend-app-1 | Compiled successfully!
frontend-app-1 | webpack compiled successfully
But after compiling successfully nothing happens, browser still does not refresh. I've tried to set FAST_REFRESH=false to enable hot reloading but nothing changed.
I've mixed up old and new solutions and using CHOKIDAR_USEPOLLING and WATCHPACK_POLLING at the same time. This time after editing and saving compiling has done again and browser refreshes but with a slight issue. Browser refresh process cant catch up the compiling and these two process are being done unsynchronized.
So when I change the website title from "React App" to "React" and save it, compilation starts and broser refreshes. Browser still displays "React App" title. After that when I edit index file again to change title from "React" to "Test", refreshed browser diplays title "React". Refreshment is following at least one step behind like this.
Essentially my problem is after edit and save in a dockerized react app, webpack compiles successfully but browser does not refresh.
How can I solve this problem?
Edit: I've tried FAST_REFRESH with these two variables and nothing changed.
Are you editing source code on host machine? If yes then do you have a bind mount of the source code folder or file to the container?
Please try different node versions. I had the same issue recently and got it resolved after taking an image with different node version.
If previous options don't work then you can setup directory synchronization between host and container. See how to rsync from a host computer to docker container using docker cp for details.
We are working on react project that we had setup using "create-react-app". We are using git as multiple dvelopers are working on this project.
Everything is working fine as expected but sometime we get very strange issue in which react renders content of index.html as text (Please see attached screenshot below) instead of rendering as html page.
We get this issue when we switch to other git branch and then run react app in development mode after taking pull of latest code from working branch. We had tried to resolve this issue by deleting node_modules and package-lock.json file and then run "npm install" on the same branch but issue is still persist.
This issue is coming only when we run app in development mode. There is no issue with production build. We think this issue is coming due to cache somehow. Therefore, we had tried to disable cache or clear browser cache but nothing works.
Can someone please guide about what we are doing wrong and we are missing something? We have tried many things but not able to find our root cause of this issue.
Thanks in advance.
I have a Visual Studio project with a simple React ClientApp that I'm using for testing. The client app was working well until suddenly it wasn't. (It may have broken when I added a static wwwroot folder to the project, but that has since been removed--I was testing with a different React App at the time so I wasn't paying much attention to whether my admin utility app was still working.)
Now for the life of me I can't get webpack-dev-server to serve the React app. I've tried:
/invalidate,
npm build
Changing the ports the server is running on
Hitting it from a different browsers.
npm cache clean --force
Reverting back to a much earlier version of the project when this front end was definitely working
Strangely enough if I run npm start directly in the ClientApp folder the app runs fine. For workflow reasons, and for reasons of just wanting to understand how this works, I'd like to keep using the VS launched version.
The symptom is that it simply displays the Index.html page and does not load the app. In Chrome it keeps failing to load 0.chunk.js with error ERR_HTTP2_PROTOCOL_ERROR. In Firefox this there are no errors loading this file, but only the index.html file displays.
I can navigate to /webpack-dev-server and everything looks good. I can click through to all of the individual files from there.
Any ideas for how to diagnose this would be fantastic!
FWIW - if anyone runs into this issue, the solution was to simply update Microsoft.AspNetCore.SpaServices.Extensions to the latest version (in this case 5.0+).
I created an ReactJS APP. I want to deploy this app in hosted server. So i made the changes as
In package.json add "home": 'https://ww.domain.com/ReactApp"
Installed react-snapshot plugin. Added "&& react-snapshot" in build line in package.json. Replace React-Dom to react-snapshot in index.js.
Build the project and copy the files and folders inside build and paste inside server inetpub/wwwroot/reactApp folder.
Run the application favicon displayed in tab. Blank white screen. No error in console.
Anybody please suggest what mistake am i doing and please suggest quick solution.
Thanks
You can try the following steps to fix your question:
1.Please check your Webpack’s publicpath setting. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. please make sure it is set correctly, it will base links like above from that URL.
2.If you’re using create-react-app, you won’t have to deal with Webpack configs. The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. Now your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.
When running npm start to deploy my code to localhost:3000 the version displayed is a previous version of the code.
I've tried resetting my editor (Visual Studio Code) and Node.js. Tried disable cache in the network inspector of Chrome.
The browser will reload upon a save, however it will not use the correct code. It continues to 'hang' on the previous version.
This is potentially an issue with the create-react-app service worker.
Can you please look for that file, and remove it or comment it out?
Otherwise, it is possible you have an error in your code.