We Keep Coding

Using react component in a different application

What I'm trying to achieve is:
Building simple react app - the template is create react app
Copying output file (main.*.js)
Pasting it in another react app
Importing render function to render the first app into the second one
Simple react app code:
interface Props {
greeting: string;
}
export module AppModule {
export const sendGreetings = ({ greeting }: Props) => {
return `Hello ${greeting}`;
};
}
Builder file code:
!function(){"use strict";var n;(n||(n={})).sendGreetings=function(n){var e=n.greeting;return"Hello ".concat(e)}}();
Trying to import this file into another app I get this error:
File 'c:/vscode/test-react-app/test-sc-react/src/main.783e0281.js' is not a module.ts(2306)
Which is obvious. I changed the output file manually to:
export function initApp(){"use strict";var n;(n||(n={})).sendGreetings=function(n){var e=n.greeting;return"Hello ".concat(e)}};
It works but the only function that I'm able to access is initApp but not sendGreetings
I've been struggling with this for a while now and I would really appreciate any helpful suggestions

I used Bit.dev for my components that are used across multiple applications & there is an article regarding your issue
https://blog.bitsrc.io/sharing-react-components-across-multiple-applications-a407b5a15186
I think it would help.

🎯 Solution #1
You can use an iframe to inject your react app:
<iframe src='path-to-your-app.html'/>
🎯 Solution #2
Go with micro-frontend architecture approach. Where a front-end app is decomposed into individual, semi-independent "microapps" working loosely together.
As a starting point, you can try npx create-mf-app instead of the CRA.

You can include your js code directly on run time. You can use window.addEventListener to load js/css incoming from an outside source. You just have to append that js to your document on the load event.

Client-only Nuxt 3 Vue plugin

I am new to Nuxt and Vue, so go easy on me. I am trying to create a video player component in my Nuxt 3 app using vue3-video-player, which doesn't seem to support SSR based on the following error I get when I import it in my video component:
ReferenceError: navigator is not defined
This error persists even if the component is wrapped with <ClientOnly>. So, based on what I saw in the Nuxt 3 Documentation I thought I would create a client-only plugin located at plugins/vue3-video-player.client.js with the following contents:
import Vue3VideoPlayer from '#cloudgeek/vue3-video-player'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3VideoPlayer)
})
But when I try to use it in my component as <vue3-video-player>, I get the following error:
[Vue warn]: Failed to resolve component: vue3-video-player
So I guess my question is how do I create a client-only Vue component using Nuxt 3 plugins? Or is there an entirely different approach that would work better?

Solution for nuxt 3:
Nuxt will automatically read the files in your plugins directory and load them. You can use .server or .client suffix in the file name to load a plugin only on the server or client side.
For example:
plugins/apexcharts.client.ts
Everything is so simple! And that is why we love nuxt ❤️
Solution for nuxt 2 (to show the difference):
nuxt.config.ts
plugins: [
{src: '~/plugins/apexcharts', mode: 'client'}
],
This is only for nuxt 2 because All plugins in your nuxt 3 plugins/ directory are auto-registered, so you should not add them to your nuxt.config separately.

you could try to provide a helper function. As mentioned in the docs.
import Vue3VideoPlayer from '#cloudgeek/vue3-video-player'
export default defineNuxtPlugin((nuxtApp) => {
return {
provide: {
Vue3VideoPlayer
}
}
})

To tag along with the given correct answer here,
If you're trying to install and use a third party NPM package, and running into "window is not defined" type errors, you can load the package as a plugin as follows (eg WAD)
npm install web-audio-daw
// plugins/wad.client.ts
import Wad from "web-audio-daw"
export default defineNuxtPlugin(nuxtApp => {
return {
provide: {
Wad,
}
}
})
// pages/whatever.vue
<script lang="ts" setup>
const { $Wad } = useNuxtApp();
// Can use $Wad normally from here on out
</script>

How to remove cache after a new build react project

When we have a new build in our react project, users who work with our PWA because they have old cache they cant have our last changes and they have to remove their cache by press ctrl+F5 to reload again and then our changes work so we try to find the best solution to solve the problem.
I want to remove the cache for all users after the new build from the react projects.

finally I solved this problem for my projects.
I define a variable in local storage for versioning and I saved the project version after build and checked the version in the first react file ( componentDidMount() in Routes.js for example ) if they didn't match run the code below :
window.location.reload(true);
example :
componentDidMount(){
let name = 'Project-Name'
let version = '1.0.0'
console.log(`${name} v${version} 😎`)
const last_version = localStorage.getItem(`${name}-Version`)
if(last_version !== version){
console.log('New Version Available ! 😝')
localStorage.setItem(`${name}-Version`, version)
window.location.reload(true);
}
}

Getting error when trying to use ReactJS.Net server side rendering with EPiServer

I am trying to set up server side rendering using ReactJS.Net in an EPiServer project. In order to do that I am using the provided ReactJS.Net Html extention to do my rendering, however, when I run my site
I get an error saying: "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file."
If I swap from trying to use the server rendering extension to trying to render normally with React
I get a different error: "TinyIoCResolutionException: Unable to resolve type: React.Web.BabelHandler".
I think the root issue is that there is some difference in how an EPiServer project initializes things at start up vs a vanilla .Net MVC project, but I am unsure of what the difference is or how to work around it.
I am working with the React.Web.Mvc4 v4.0.0 nuget package, Episerver 11, and .Net Framework 4.6.2. I took the same component I'm trying to render and pasted it into a vanilla .Net MVC project with no EPiServer and it renders properly client side and server side using the extension, so the component is not the issue. I found something saying that this error is usually seen when React or ReactDOM is not exposed to the global scope so I set it up to ensure that my react component is being added to the global scope, but no luck there either.
Here is my ReactConfig:
public static void Configure()
{
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
ReactSiteConfiguration.Configuration
.AddScript("~/Static/js/Components/PrimaryCallout.jsx");
}
Here is my component:
class PrimaryCallout extends React.Component {
constructor(props) {
super(props);
this.state = {
header: this.props.header,
buttonText: this.props.buttonText,
buttonLink: this.props.buttonLink
};
}
render() {
return (
<div className="primary-callout-container">
<h2 className="primary-callout-header">{this.state.header}</h2>
<a href={this.state.buttonLink} className="primary-callout-link">
<button className="primary-callout-button">{this.state.buttonText}</button>
</a>
</div>
);
}
}
Here is how I'm trying to render my component:
#Html.React("PrimaryCallout", new
{
header = Model.Header,
buttonText = Model.CalloutLinkText,
buttonLink = Url.ContentUrl(Model.CalloutLink)
})
Any and all help or insight is appreciated.
Thank you.

After a lot of digging around I determined the issue I was having was indeed with Babel not with React. The React not initialized error was smothering the true issue. I didn't narrow it down to what in my Babel setup was wrong, but I re-did my bundling and minification setup and now I'm back up and running.
The lesson to take from this for anyone else is if you see this "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file." error then look deeper because it's likely smothering the error message for your true problem.

React-Native cannot import library

I'm trying to import the Ethereum web3.js library into a React Native project.
I've followed the React Linking Libraries instructions, installing the web3.js package and linking it with the commands:
$ npm install web3 --save
$ react-native link
My index.ios.js file looks as follows:
import { default as Web3 } from 'web3';
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class ReactProject extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('ReactProject', () => ReactProject);
The error message I receive in the simulator when I run the app {"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"} is not very helpful as the terminal shows only the same message.
How do I go about importing libraries like this into React Native?

I created a step-by-step simple guide on how I set up web3.js 1.0.0-beta.24 with Create React Native App, without modifying node_modules:
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

I was able to make it work on web3 version 0.x and open sourced the solution creating babel-preset-react-native-web3 so that it works out of the box, it might not be considered 100% secure if using for creating an account since it uses Math.Random() behind scenes.
For more info see the following sample app using web3 version 0.20.0, react 16 and expo.
Hope that helps,

Try this instead to import the library:
var Web3 = require('web3');

Fixed: https://github.com/ethereum/web3.js/issues/576
Edit The Following File
/node_modules/bignumber.js/bignumber.js
edit as follows:
-if ( !crypto ) try { crypto = require('crypto'); } catch (e) {}
+if ( !crypto ) try { crypto = require('crypto-js'); } catch (e) {}
Web3 Version: 0.18.2