I am using mocha to test my react components. I set up the package.json like so
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "NODE_ENV=test mocha './app/**/*.spec.js' --compilers js:babel-core/register --require testSetup.js",
"test:watch": "npm test -- --watch",
"start": "NODE_ENV=dev node server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"aphrodite": "^0.2.0",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"css-loader": "^0.23.1",
"enzyme": "^2.2.0",
"eslint": "^2.6.0",
"eslint-plugin-react": "^4.2.3",
"expect": "^1.16.0",
"jsdom": "^8.2.0",
"mocha": "^2.4.5",
"mocha-jsdom": "^1.1.0",
"node-sass": "^3.4.2",
"npm-install-webpack-plugin": "^3.0.0",
"react-addons-test-utils": "^0.14.8",
"react-dom": "^0.14.8",
"react-hot-loader": "^1.3.0",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-notifier": "^1.3.0"
},
"dependencies": {
"axios": "^0.9.1",
"cuid": "^1.3.8",
"delay": "^1.3.1",
"fecha": "^2.1.0",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"intl": "^1.1.0",
"lodash": "^4.6.1",
"react": "^0.14.8",
"react-addons-shallow-compare": "^0.14.8",
"react-dom": "^0.14.8",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"react-router-redux": "^4.0.0",
"redux": "^3.3.1",
"redux-crud": "^1.0.0",
"redux-saga": "^0.9.5",
"reselect": "^2.2.1",
"seamless-immutable": "^5.1.1",
"url-loader": "^0.5.7"
}
}
And here is the test file Selector.spec.js used to test a Selector.jsx component:
import React from 'react';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import expect from 'expect';
import Selector from './Selector.jsx';
describe('Selector Component', function () {
const setup = (optionalProps={}) => {
const props = {
onChange: sinon.spy(),
value: '3',
values: ['1','2','3','4'],
...optionalProps
}
const output = mount(<Selector {...props} />)
return {
output,
props,
}
}
describe('when using scalar values', function () {
it('should allow all props to be passed down', () => {
const { output, props } = setup()
const actual = output.props()
const expected= props
expect(actual).toEqual(expected)
});
});
});
And finally, the Selector.jsx itself:
import React, { PropTypes } from 'react';
import map from 'lodash/map';
const Selector = ({
onChange,
value,
values, // [{value, name}]
}) => (
<select onChange={e=>onChange(e.target.value)}
value={value}
>
{values[0].value
? map(values, (val,i) =>
<option
key={i}
value={val.value}
>
{val.name} boo!
</option>
)
: map(values, val =>
<option
key={val}
value={val}
>
{val}
</option>
)
}
</select>
)
Selector.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
values: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.any.isRequired,
name: PropTypes.string,
})),
PropTypes.array
]).isRequired,
};
export default Selector;
So what happens now is that whenever I save the test file, Selector.spec.js, it reruns the test, but none of the changes I have made to the source file get picked up by the test, I have to ctrl+c to kill the test and restart it. Is there any reason why this is happening?
Thank you!
Related
These are my setup files
Router.js
import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';
const routes = [{
path: 'main/publish/tasks',
component: MyComponent
}]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
index.js
import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';
const app = createApp(MainApp);
app.use(router);
configureCompat({
// default everything to Vue 2 behavior
MODE: 2,
});
app.mount('.vue-app');
MainApp.vue
<template>
<router-view />
</template>
<script>
export default{
name: 'MainApp'
}
</script>
Edit:
MyComponent.vue
<template>
<div> Hello world </div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
package.json
{
"name": "Demo Project",
"version": "6.0.0",
"dependencies": {
"#vue/compat": "^3.2.39",
"#vue/compiler-sfc": "^3.2.39",
"core-js": "3.1.2",
"mitt": "^3.0.0",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.41",
"vue-carousel": "^0.18.0",
"vue-click-outside": "^1.1.0",
"vue-color": "^2.8.1",
"vue-custom-element": "^3.3.0",
"vue-debounce": "^2.6.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"#types/jest": "^28.1.8",
"#types/node": "^14.14.45",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"#vue/test-utils": "^1.3.0",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"license-checker": "^25.0.1",
"mini-css-extract-plugin": "^0.12.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.3.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.0.18",
"typescript": "^4.0.8",
"vue-jest": "^3.0.7",
"vue-loader": "^17.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^5.7.3"
},
"resolutions": {
"lodash": "^4.17.21"
},
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js",
"test": "jest src"
}
}
This code setup leads me to this error
Can anyone help me what I'm doing wrong? Everything works when I remove <router-view/>. I can render component fine by importing and adding it to MainApp.vue. But cannot get it rendered through <router-view/>.
I am running into issue in a jest unit test when I try to mount it. The Error I get is: TypeError: Cannot read property 'child' of undefined
wrapper = mount(
<ExportTemplateModal {...props} open={true} onClose={onClose} />
);
and here is the ExportTemplateModal
interface IExportTemplateModalProps {
open: boolean;
onClose(...args: any[]): any;
}
export class ExportTemplateModal extends React.Component<Props, State> {
render() {
return (
<Select
onChange={(value) => {
const selectedSupplier = projectSuppliers.find(
(ps) => ps.supplierId === value
);
const projectSupplierIds = supplierMap[value] || [];
this.setState({...});
}}
>
{options}
</Select>
);
}
}
here is the package.json, I have tried to change the react version and react-dom and ran npm install but it did not work. I am not sure where I am doing wrong. If I export export default Component as any it stops complaining but I do not know if that is the fix because in my unit tests I get another error which it complains about the React wrapper, this is the error => Error: ReactWrapper::state() can only be called on class components
"dependencies": {
"#amzn/pb-central-gql-schema": "*",
"#amzn/pb-central-ui-components": "^1.0.0",
"#hookform/resolvers": "^1.3.7",
"#react-icons/all-files": "^4.1.0",
"#testing-library/dom": "^8.13.0",
"#testing-library/react-hooks": "^8.0.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"emotion": "^10.0.27",
"is-hotkey": "^0.1.8",
"is-url": "^1.2.4",
"jest-environment-jsdom-sixteen": "^2.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.differenceby": "^4.8.0",
"lodash.escaperegexp": "^4.1.2",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.set": "^4.3.2",
"lodash.sortby": "^4.7.0",
"lodash.uniqueid": "^4.0.1",
"office-ui-fabric-react": "^7.107.0",
"react-hook-form": "^6.15.7",
"react-i18next": "^11.18.3",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"slate": "^0.60.8",
"slate-history": "^0.59.0",
"slate-react": "^0.60.8"
},
"peerDependencies": {
"#amzn/meridian": "*",
"#amzn/meridian-tokens": "*",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"date-fns": "^2.16.1"
},
"devDependencies": {
"#amzn/brazil": "*",
"#amzn/meridian": "*",
"#amzn/meridian-tokens": "*",
"#babel/core": "^7.6.0",
"#babel/helper-validator-identifier": "7.10.4",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/plugin-transform-typescript": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#babel/preset-typescript": "^7.12.1",
"#babel/runtime": "7.4.5",
"#sheerun/mutationobserver-shim": "^0.3.3",
"#storybook/addon-actions": "^6.0.26",
"#storybook/addon-essentials": "^6.0.26",
"#storybook/addon-info": "5.3.21",
"#storybook/addon-knobs": "^6.0.26",
"#storybook/addon-links": "^6.0.26",
"#storybook/addons": "^6.0.26",
"#storybook/react": "^6.0.26",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/date-fns": "^2.6.0",
"#types/enzyme": "^3.10.7",
"#types/history": "^4.7.8",
"#types/is-url": "^1.2.4",
"#types/jest": "^26.0.24",
"#types/lodash.clonedeep": "^4.5.6",
"#types/lodash.differenceby": "^4.8.6",
"#types/lodash.get": "^4.4.6",
"#types/lodash.isempty": "^4.4.6",
"#types/lodash.isequal": "^4.5.5",
"#types/lodash.set": "^4.3.6",
"#types/lodash.sortby": "^4.7.6",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.2.0",
"#types/storybook-react-router": "^1.0.1",
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.19",
"date-fns": "^2.16.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "7.11.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-react": "^7.21.5",
"file-loader": "^6.2.0",
"fs-extra": "^5.0.0",
"globby": "^8.0.1",
"history": "^4.10.1",
"husky": "^4.3.8",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
"jest-transform-stub": "^2.0.0",
"jest-when": "^3.2.1",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"prettier-plugin-organize-imports": "^1.1.1",
"react-to-typescript-definitions": "^1.2.0",
"storybook-react-router": "^1.0.8",
"typescript": "^4.2.4",
"webpack-cli": "^4.2.0"
},
"npm-pretty-much": {
"publishDir": "",
"runRelease": "always"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"src/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
}
I have tried:
running npm i react#18 react-dom#18 #types/react#18 #types/react-dom#18
removing node_module and npm install again
played around with imports
any help would be appreciated.
There are a few things you can check to fix this issue:
Make sure that the component is being imported correctly and the path to the component is correct.
Check if the component is being rendered in the correct place in the parent component.
Make sure that the component is not being rendered conditionally based on the state or props of the parent component.
Check the version of react and enzyme-adapter-react-16, it should be compatible with the version of react you are using.
Check if all the dependencies of the component are installed and imported properly.
It is also important to check the component by adding console.log inside the component to check if it is working fine.
I am using withTranslation() in my react class component at the last line when I am exporting my application.
But it is giving below error.
Please check the last line.
import React from 'react';
import { Input, Form, Row, Container, Card } from 'reactstrap';
import '../../../../node_modules/bootstrap/dist/css/bootstrap.css';
import baseUrl from '../../../base.js';
import ConfirmDlg from '../../Utils/Common/ConfirmDlg';
import { css } from 'react-emotion';
import { PropagateLoader } from 'react-spinners';
import i18next from 'i18next';
import i18n from '../../../i18n';
import { withTranslation } from 'react-i18next';
var request = require('superagent');
const override = css`
display: block;
margin: 0 auto;
border-color: red;
`;
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
errorMessage: '',
isConfirmDlgOpen: false,
isLoading: false,
};
}
render() {
const { errorMessage, isConfirmDlgOpen, isLoading } = this.state;
const { t } = this.props;
return <div className="wrapper">{t('Accueil')}</div>;
}
}
export default withTranslation()(MyComponent);
is there any other way to handle the same. its legacy application in which I am using translation
My package.json file.
{
"name": "myapplication",
"version": "0.1.0",
"private": true,
"scripts": {
"test": "mocha --compilers js:babel-core/register --recursive",
"start": "dotenv -e .env -- webpack-dev-server --hot --define process.env.dev --inline --port 80 --host localhost",
"build": "webpack -p --config webpack.config.js --env.prod"
},
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bootstrap": "^3.3.7",
"bowser": "^2.1.0",
"classnames": "^2.1.3",
"copy-webpack-plugin": "^4.2.1",
"core-js": "^2.5.4",
"create-react-class": "^15.7.0",
"css-hot-loader": "^1.3.4",
"css-loader": "^0.28.7",
"draft-js": "^0.10.5",
"extract-text-webpack-plugin": "^3.0.2",
"fbemitter": "^2.0.0",
"file-loader": "^1.1.5",
"findup-sync": "^0.1.2",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"html-react-parser": "^0.4.2",
"html-webpack-plugin": "^2.30.1",
"html2canvas": "^1.0.0-alpha.10",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"jquery": "^3.2.1",
"jspdf": "^1.3.5",
"moment": "^2.13.0",
"prop-types": "^15.7.2",
"randomstring": "^1.1.5",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-anything-sortable": "^1.7.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-date-picker-thecodingmachine": "^5.0.1",
"react-bootstrap-native-slider": "^2.0.1",
"react-bootstrap-slider": "^2.0.0",
"react-bootstrap-table": "^4.1.5",
"react-color": "^2.13.8",
"react-datepicker": "1.6.0",
"react-dropzone": "^4.2.3",
"react-i18next": "^11.15.1",
"react-modal": "^3.1.2",
"react-router-dom": "^4.2.2",
"react-scrollable-anchor": "^0.6.1",
"react-select": "^1.0.0-rc.5",
"react-signature-pad": "^0.0.6",
"react-spinners": "^0.4.5",
"react-star-rating": "^1.4.2",
"react-stepzilla": "^4.6.3",
"react-textarea-autosize": "^5.1.0",
"react-toastify": "^3.1.0",
"react-toggle": "^4.0.2",
"react-transition-group": "^1.2.1",
"reactjs-localstorage": "0.0.5",
"reactstrap": "^4.8.0",
"reflux": "^6.4.1",
"style-loader": "^0.19.0",
"superagent": "^3.8.1",
"transform-class-properties": "^1.0.0-beta",
"url-loader": "0.6.2",
"xss": "^0.3.4"
},
"peerDependencies": {
"react": "^16.0.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "6.23.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-register": "6.26.0",
"canvas": "1.6.7",
"css-loader": "^0.28.7",
"dotenv-cli": "2.0.1",
"draftjs-to-html": "^0.8.3",
"immutable": "^3.8.1",
"jsdom": "11.2.0",
"mocha": "^3.3.0",
"mocha-jsdom": "^1.1.0",
"node-libs-browser": "^2.0.0",
"node-sass": "^4.5.3",
"react-draft-wysiwyg": "1.10.12",
"react-hot-loader": "^1.2.7",
"react-tools": "0.13.3",
"sass-loader": "^6.0.6",
"source-map": "^0.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.4"
}
}
You should use it like this:
export default withTranslation(MyComponent);
run with this code and got no error
import React from "react";
import { withTranslation } from "react-i18next";
class MyComponent extends React.Component {
constructor(props: any) {
super(props);
this.state = {
username: "",
password: "",
errorMessage: "",
isConfirmDlgOpen: false,
isLoading: false
};
}
render() {
const { t } = this.props;
console.log(t);
return <div className="wrapper">{t("xx")}</div>;
}
}
export default withTranslation()(MyComponent);
might be other mistake?
I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM
These dependencies were not found:
#firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`.
and asking me to install firebase doing: npm install --save #firebase firebase firebase/firestore. which I did many times, but still the same error.
Here is my package.JSON:
{
"name": "Project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"firebase": "^7.13.1",
"node-pre-gyp": "^0.14.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
node -v = 16.12.1
npm -v =6.14.4
Any idea ?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import firebase from "#firebase";
import "./components/firebaseInit";
Vue.config.productionTip = false;
let app;
firebase.auth().onAuthStateChanged(function(user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
});
}
});
firebaseInit.js
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked.
I don't know why, but it worked!
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'
initializeApp(firebaseConfig)
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"
}
}