I want to deploy a React app to netlify but the build fails. When I check the build logs I find that it fails where I used lazy loading to get a component.
When I use lazy loading to get a component, as shown below,
import React, {lazy } from 'react';
const SidebarLeft = lazy(() => import('./pages/SidebarLeft'))
the build fails with the error message
12:26:05 AM: Cannot find file './pages/WorldCases' in './src'.
What could be the cause of this, and how do I fix it?
For anyone who might run into this problem, it turned out that git didn't change the folder name when I did. I initially created a Pages folder. I later renamed it to pages, with a small p. But git didn't pick up that change. So I had to change the name back to Pages.
Related
We have a React Webapp where every route is lazy loaded:
const HomeScreen = React.lazy(() => import('../components/HomeScreen/HomeScreen'));
This, as expected, generates various JS files during a production build:
main.js
1.main.js
2.main.js
Is there any way to load those generated production code in another Webapp we have?
Do they simply replace the content of a specific DOM element? and if so, how do they go about it?
You can use Module Fedration for this
https://levelup.gitconnected.com/microfrontends-module-federation-exposing-remote-from-legacy-react-webpack4-created-by-f3753d70d34e
I have a CRA and want to have the first page generated statically to improve load time and SEO. The idea is to run a NodeJS script that renders the App document inside index.html.
Here is my code:
const { renderToString } = require("react-dom/server");
const App = require('./App');
const content = `<html><body>${renderToString(App)}</body></html>`
const fs = require('fs');
fs.writeFileSync('../public/index.html', content);
However, I have problems running it with NodeJS:
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Apparently, I have to build the source, but I don't know how to do it. I'm using CRA to build my React files (actually, I'm using react-app-rewired, so I could customize the build process if I only knew how to do it).
What should I do to make it work?
the error is from node: https://stackoverflow.com/a/59399717/13216797
I know it's not your question... but what about using Nextjs?
Even without a node environment you can use the "next export" command to make a bundle that will work as it would static files while still being react...
I ended up using puppeteer and just saving the generated client-side code. Before that I spent hours stubbing out first window, then window.location, then window.localStorage, window.document, window.document.createElement, it never ended. With puppeteer, it was pretty easy.
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
I setup a new Gatsby project through the installer but when I try to create a new file in /src/pages, but if then I go to that route, the browser says
Preparing requested page
in loop. In the browser console it outputs:
[Error] Unhandled Promise Rejection: Error: We couldn't find the correct component chunk with the name "component---src-pages-home-js" (anonymous function) (loader.js:45) promiseReactionJob
This is my home.js (in a normal React environment works perfectly):
import React from "react";
const Home = () => {
return (
<div>
<title>Test</title>
<p>Hello</p>
</div>
);
};
export default Home;
Project structure:
pages
- 404.js
- index.js
- second.js
What could be the problem? I already tried to reinstall Gatsby again and tried cleaning caches or making another file, with a different file names. The file is seen by Gatsby because if I try to access the route without creating the file, it gives me the 404 page.
Thanks.
UPDATE:
If you're using a Mac with M1 Chip, make sure you installed Gatsby with Rosetta!
Also hit the same problem with M1 MacBook Air when adding pages to Gatsby sample project. The solution (found elsewhere) was to empty the browser cache.
Have you tried renaming your home.js to index.js?
After that, clean the cache by gatsby clean.
This may be due to data in your browser cache. Clear the cache in Safari with Option + Command + E
Clearing browser caché was the solution for mee too, as #JohnysSon says
I've just cloned a repo from github, and started the server and able to see the default text showing at http://localhost:8080
The default text is showing inside src/components/app.js. And making any changes to the text, simply switch back to browser and reload the webpage to see the changes.
Now I try to create the src folder from scratch, so I've deleted src and recreated it and added a file index.js, without any content. (My web server is still running all this while)
So my question is, when I reload the webpage, I was expecting no content to be showing in the webpage. But truth is I can still see the previous changes showing on webpage. It seems to be cached or something? In order to reflect the latest changes, I have to kill the webserver and npm start again.
This is my first timer in Web Development so wondering if it's a common scenario and best practices to restart webserver everytime we make any changes?
Usually when developing with react you don't even have to refresh the page you are in. Once you save the changes in the Editor they sould be visible in the browser immediately. Maybe you have made a mistake by setting up the index.js
When starting with react I would suggest you to use https://github.com/facebook/create-react-app
With that it's very easy to start and you can play around a bit and get started with React.
You should use Hot Module Replacement.
Here is an example:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
Hot Module Replacement (HMR) is a tool to reload your application in the browser, so that the
browser doesn’t perform a page refresh.
BTW #Zander is right, you don't have to kill the server. The page automatically refreshes. For your help, I hope you installed create-react-app using npm as
npm install -g create-react-app and to initiate a new app as create-react-app yourApp. If done so, everything basic is automatically configured.