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
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
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'm new to Gatsby, but familiar with CRA. I'm using the default Gatsby setup generated by running gatsby new <project_name> from Gatsby CLI.
I have some general config that I want run in my whole project, regardless of current page - for example:
import { enableMapSet, enableES5 } from "immer";
enableMapSet();
enableES5();
In CRA projects I put this stuff inside App.tsx, but can't figure out what the right place is in a Gatsby project.
In Gatsby, you don't have a single configuration file per se. There are several APIs exposed by Gatsby that allows you to configure one specific part of your site.
To run a set of functions regardless of the page you can use a gatsby-browser.js (placed in the root of the project).
Basically, Gatsby exposes a bunch of APIs that lets you respond to actions within the browser, and wrap your site in additional components. The Gatsby Browser API gives you many options for interacting with the client-side of Gatsby. One of them, onClientEntry fits your requirements. From its documentation:
onClientEntry
(_: emptyArg, pluginOptions: pluginOptions) => undefined
Called when the Gatsby browser runtime first starts.
Applied to your code, your gatsby-browser.js should look like:
import { enableMapSet, enableES5 } from "immer";
import React from 'react';
export const onClientEntry = () =>{
enableMapSet();
enableES5();
};
The snippet above will trigger enableMapSet() and enableES5() on every page.
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.
I am using react's create-react-app for my new application.
I am really getting confused to separate index.html page for client side and admin panel.
I have different functional flows and css files for both side.
So index.html file should be loaded based on router navigation.
Example:
http://example.com => should load client/index.html
http://example.com/admin => should load admin/index.html
Note: i have tried webpack's multiple entries method and webpack html plugin. But it only separates bundle files not html(while navigate).
Please help me out.
webpack just a module bundler, It doesn't control which page show, This should be done by router.
if it's single page, you can use react-router
if it's multi page, you can use express route
after using the below code to include the external scripts, I don't really want any additional html pages.
var $script = require("scriptjs")
$script("/myscript.js")