I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...
Related
My Application with MUI in DEV has one custom design
My Application with MUI in Prod has no custom design
Should I make something different?
Is missing some extra configuration?
Sample of something that is not working:
<Typography className={styles.customStyle} component="h1">
{t("Translation")}
</Typography>
The className={styles.customStyle} is totally ignored in Prod
This works fine in DEV.
My configuration
node v19.0.0
Package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.0",
"#mui/styles": "^5.11.1",
"#next/font": "13.0.7",
"#types/node": "^18.13.0",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.9",
"axios": "^1.2.1",
"country-flag-icons": "^1.5.5",
"eslint": "8.29.0",
"eslint-config-next": "^13.1.1",
"html-entities": "^2.3.3",
"i18next": "^22.4.6",
"json5": "^1.0.2",
"next": "^13.1.1",
"next-translate": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.1.1",
"sass": "^1.57.0",
"typescript": "4.9.4"
}
}
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfig
FIXED:
After reading this article: https://blog.logrocket.com/getting-started-with-mui-and-next-js/
I saw that it was missing added <CacheProvider />.
So after that, the style custom works fine.
SOLUTION:
First, create a new file in the utils directory called createEmotionCache.js.
import createCache from "#emotion/cache";
export default function createEmotionCache() {
return createCache({ key: "css", prepend: true });
}
After go to the _app.js or page.js (if using LAYOUT RFC)
....
import { CacheProvider } from "#emotion/react";
const clientSideEmotionCache = createEmotionCache();
function MyApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}) {
return (
<CacheProvider value={emotionCache}>
<App />
</CacheProvider>
);
}
export default MyApp;
Thanks it.
I was working on a project on react native trying to create drawer navigation
I installed a navigation drawer, gesture handler, and reanimated libraries
and when I run I got an error
1st error :
ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:
2nd error
error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
here is my package.json
{
"name": "Train",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
my index.js
import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error
};
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';
const stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function MystackNav(){
return(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}
Mine is working the only diff is:
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json
{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}
1.Update babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
2.run expo start -c
references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;
I am new to coding and I cant figure out a problem.
When I am opening a app in expo with the command
expo start -c
I am getting chinese symbols in my menu.
Then a red screen pops up with the following notificaton:
console.error: fontFamily "AntDesign" is not a system font and has not been loaded through FontloadAsync
I have googled the problem, and I have seen that people uploaded codes from 2 files, to get help.
App.js and package.json. So I have done it to.
App.js
import React from 'react';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { Root } from "native-base";
import { StatusBar } from "react-native";
import AppPreLoader from "./application/components/AppPreLoader";
import firebaseConfig from './application/utils/Firebase';
import * as firebase from 'firebase';
firebase.initializeApp(firebaseConfig);
import GuestNavigation from './application/navigations/Guest';
import LoggedNavigation from './application/navigations/Logged';
console.disableYellowBox = true;
function cacheImages(images) {
return images.map(image => {
if (typeof image === 'string') {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default class App extends React.Component {
constructor () {
super();
this.state = {
isLogged: false,
loaded: false,
isReady: false,
}
}
async _loadAssetsAsync() {
const imageAssets = cacheImages([
require('./assets/images/header.jpg'),
require('./assets/images/logo.png'),
require('./assets/images/logo_dark.png'),
require('./assets/images/star.png'),
require('./assets/images/avatar.png'),
require('./assets/images/emptylist.png'),
require('./assets/images/avatar.jpg'),
require('./assets/images/nointernet.png'),
require('./assets/images/contact.png'),
require('./assets/images/address.png'),
require('./assets/images/audience.png'),
require('./assets/images/schedule.png'),
require('./assets/images/phone.png'),
require('./assets/images/website.png'),
require('./assets/images/bookmarked.png'),
require('./assets/images/checked.png'),
]);
await Promise.all([...imageAssets]);
}
async componentDidMount () {
await Expo.Font.loadAsync({
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
'anticon': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),
'Entypo': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Entypo.ttf'),
'Ionicons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
'MaterialCommunityIcons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'),
'SimpleLineIcons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf'),
'FontAwesome': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf')
});
And package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/toolbar-android": "github:react-native-community/toolbar-android",
"expo": "^38.0.9",
"expo-ads-admob": "~8.2.1",
"expo-facebook": "~8.2.1",
"expo-font": "~8.2.1",
"firebase": "^7.9.0",
"moment": "^2.27.0",
"native-base": "^2.13.12",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.62.2",
"react-native-carousel": "^0.12.0",
"react-native-device-detection": "^0.2.1",
"react-native-form-validator": "^0.3.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-map-link": "^2.7.10",
"react-native-maps": "0.27.1",
"react-native-modalbox": "^2.0.0",
"react-native-reanimated": "^1.9.0",
"react-native-render-html": "^4.2.1",
"react-native-root-toast": "^3.2.1",
"react-native-safe-area-context": "^3.0.7",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.9.0",
"react-native-star-rating": "^1.1.0",
"react-native-super-grid": "^4.0.2",
"react-native-timeago": "^0.5.0",
"react-native-vector-icons": "^6.7.0",
"react-native-web": "^0.11.7",
"react-native-webview": "^9.4.0",
"react-navigation": "^4.4.0",
"react-navigation-drawer": "^2.5.0",
"react-navigation-stack": "^2.8.2",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^8.2.3"
},
"private": true
}
I hope somebody can help me with this. It is my third night solving this issue.
you should load the font "AntDesign" with expo-font, as described in https://docs.expo.io/guides/using-custom-fonts/#a-minimal-but-complete-working-example
I've been trying to implement single-spa parcels, but I've been getting the following exception
index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error:
<Parcel /> was not passed a mountParcel prop, nor is it rendered where mountParcel is within the React context.
If you are using <Parcel /> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <Parcel /> as a mountParcel prop
at index.js:167
at index.js:114
The error is about a mountParcel attribute of which is passed down the parcel, I've pulled it from single-spa library but still I get the same issue, I've been battling with this problem for a while now, please assist
Please find my code below
parcel-config.js
// myParcel.js
import React from 'react'
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react'
import MyParcelComponent from './my-parcel-component.component';
export const MyParcel = singleSpaReact({
React,
ReactDOM,
rootComponent: MyParcelComponent
})
export function bootstrap(props) {
return MyParcel.bootstrap(props).then(res => {
debugger;
});
}
export function mount(props) {
return MyParcel.mount(props);
}
export function unmount(props) {
return MyParcel.unmount(props);
}
// in this case singleSpaReact is taking our inputs and generating an object with the required lifecycles.
MyParcelComponent.js
import React from 'react';
export default class MyParcelComponent extends React.Component {
render() {
return (
<div >
<h1>This is a parcel</h1>
</div>
);
}
}
single-spa application. attempt to consume the parcel
import React from 'react';
import Parcel from 'single-spa-react/parcel'
import * as singleSpa from 'single-spa';
import { MyParcel } from './parcel1/parcel-config';
export default class Root extends React.Component {
componentWillMount(){
console.log(singleSpa);
}
render() {
return (
<div style={{ marginTop: '100px' }}>
This was rendered by app 1, which is written in React.
<Parcel
config={MyParcel}
mountParcel={singleSpa.mountRootParcel}
wrapWith="div" />
</div>
);
}
}
package.json
{
"name": "simple-single-spa-webpack-example",
"version": "1.0.0",
"description": "A simple example of how to use webpack with single-spa",
"scripts": {
"watch": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/joeldenning/simple-single-spa-webpack-example.git"
},
"author": "Joel Denning",
"license": "MIT",
"bugs": {
"url": "https://github.com/joeldenning/simple-single-spa-webpack-example/issues"
},
"homepage": "https://github.com/joeldenning/simple-single-spa-webpack-example#readme",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^2.1.1",
"http-server": "^0.10.0",
"style-loader": "^0.23.1",
"ts-loader": "^2.3.2",
"typescript": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"#angular/common": "^4.3.3",
"#angular/compiler": "^4.3.3",
"#angular/core": "^4.3.3",
"#angular/platform-browser": "^4.3.3",
"#angular/platform-browser-dynamic": "^4.3.3",
"#angular/router": "^4.3.6",
"core-js": "^2.4.1",
"es6-promise": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2",
"single-spa": "^3.9.1",
"single-spa-angular2": "^1.2.0",
"single-spa-react": "^2.9.0",
"single-spa-vue": "^1.3.0",
"vue": "^2.6.10",
"zone.js": "^0.8.16"
}
}