I'm wondering if there's a way in next js to show the eslint issues in either the console or the server after running the development server.
I was able to successfully add custom eslint rules to my next project but i want to make it as strict as posible breaking the dev server and showing the eslint issues when found.
I want to achieve what Create React App does, but in CRA this was somehow built-in. With next this is not the case because the application still runs even after eslint issues were found.
Related
In my react js project once I build npm run build and deploy it on the server let's say dev environment using Webpack. The rest of the project works fine but when I click one specific button in my UI in the dev environment. I get the following error -
Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors
Too many re-renders. React limits the number of renders to prevent an infinite loop.
But when I try to replicate the issue in my local environment it works completely fine, without any issues. I am not able to find the root cause of this issue.
Please help
I can't seem to get the proxying to work for local development when trying to set up a Duende BFF with ASP.NET Core 6 and a TypeScript version of create react app.
Here's the repo I've been working in: https://github.com/dahlsailrunner/duende-bff-react-typescript
It's based on the sample from Duende which works fine: https://github.com/DuendeSoftware/Samples/tree/main/IdentityServer/v6/BFF/ReactBffSample
I'm simply trying to get a new version of the same thing that uses the TypeScript version of React.
If I leave the ClientApp/src/setupProxy.js file named as-is, the React app seems to build, but it never loads in the browser (the output from the react scripts all seems fine and it says it should be in the browser, but I always get "connection refused". This remains true even if I comment out every line in setupProxy.js.
If I rename the file in any way (make it a .ts file, or add -bak to it), everything loads fine on the site but the proxy to the backend/BFF doesn't work.
I've tried adding src/setupProxy.js to the exclude list in tsconfig.json as mentioned as a workaround here.
I'm guessing I'm missing something simple but just haven't been able to see it yet.
Wow - it turns out that the only problem from the code was that the version of http-proxy-middleware npm package was too current. Downgrading it to "http-proxy-middleware": "^0.19.1" did the trick - no other changes needed.
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 using conditional rendering without React Router or any other routing module in App.js. I am also using create-react-app for the project, however it's been ejected using npm run eject. If I request http://localhost:3000/privacy.html it seems to rewrite me back to http://localhost:3000/. That is, I'm given the contents of the index file, while the URL remains unchanged. After the production build is put on the production server I am using Nginx to fix the issue on said machine, but how would I solve this on the development machine?
Also if there's an easy configuration setting to conditionally "rewrite" URLs back to index, please give it a mention. For instance, I still want http://localhost:3000/35643, or any URI which ends with numerics, to rewrite back to http://localhost:3000/, but not http://localhost:3000/privacy.html, which would be some sort of exception.
I'm a newbie to Webpack and all the features beside core React, so would highly appreciate generous explanation of the configuration.
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.