We Keep Coding

`<router-view />` not working when trying to upgrade to vue 3 from vue 2

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/>.

Problem with React-Bootstrap/InputGroup caused by <InputGroup.Prepend>

I have been encountering a problem that I didn't have before.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I have a Searchbar.jsx component in my React that I export and then I import it in my Navigation.jsx component. The Searchbar component looks like this:
import { useHistory } from 'react-router-dom';
import { useState } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSearch } from '#fortawesome/free-solid-svg-icons';
import Form from 'react-bootstrap/Form';
import { Collapse, InputGroup } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
import './Searchbar.scss';
export default function Searchbar() {
const history = useHistory();
const [searchQuery, setSearchQuery] = useState('');
const [open, setOpen] = useState(false);
const onSubmit = (e) => {
history.push(`/dashboard/?s=${searchQuery}`);
e.preventDefault();
};
return (
<Form className="d-inline-block" bsPrefix="form" onSubmit={onSubmit}>
<InputGroup>
<InputGroup.Prepend>
<Button
variant=""
id="button-addon1"
onClick={searchQuery.length < 1 ? () => setOpen(!open) : onSubmit}
>
<FontAwesomeIcon icon={faSearch} className="searchIcon" />
</Button>
</InputGroup.Prepend>
<Collapse in={open} className="collapse d-sm-block">
<Form.Control
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
type="text"
id="header-search"
placeholder="Search..."
name="s"
className="border border-secondary"
/>
</Collapse>
</InputGroup>
</Form>
);
}
This is how I import it later in my Navigation.jsx:
import Searchbar from './Searchbar/Searchbar';
/*...
...
a bunch of code
...
... */
return (
<>
<Navbar bg="white" className="mb-3 px-3" bsPrefix="navbar">
<Container className="justify-content-start d-flex-inline col-9 col-sm-6">
<Navbar.Brand href="/dashboard">
<img style={{ width: '100px' }} src={logo} alt="Logo" />
</Navbar.Brand>
</Container>
<Searchbar />
<>
I have made sure that export and import stuff the correct way.
As you can see I use React-Bootstrap/InputGroup and the problem seems to be caused by <InputGroup.Prepend> tag because as soon as I remove it, the error disappears.
What is more weird is that I don't get this error when I run it on my laptop despite it being the same exact code. So naturally I thought that is might be caused by different versions of react-bootstrap or, react-router-dom or even google chrome but I checked all of those and they are the same across my stationary computer and laptop. I get the same error across different web browsers on my stationary as well. I am really lost and I don't know how to solve this issue.
Any help or guidance will be appreciated.
// I just updated node version on my laptop and then yarn install in my web-app folder and now I'm getting the same error on my laptop as well. Could this be an issue with node or react-bootstap or react-router-dom? In that case what can I do?
//edit I have include my package.json
{
"name": "profet-web-app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:5001",
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.17",
"#mui/material": "^5.8.7",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"#types/jest": "^27.4.1",
"#types/node": "^17.0.23",
"#types/react": "^18.0.2",
"#types/react-dom": "^18.0.0",
"axios": "^0.21.1",
"bootstrap": "^5.2.0",
"chart.js": "^3.7.1",
"jwt-decode": "^3.1.2",
"moment": "^2.29.1",
"nodemon": "^2.0.7",
"react": "^17.0.1",
"react-bootstrap": "^2.5.0",
"react-chartjs-2": "^4.0.1",
"react-dom": "^17.0.1",
"react-ga": "^3.3.0",
"react-icons": "^4.3.1",
"react-number-format": "^4.4.4",
"react-responsive": "^9.0.0-beta.6",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.3",
"react-scripts": "^5.0.0",
"swiper": "^8.0.7",
"typescript": "^4.6.3",
"validator": "^13.7.0",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.2.0",
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"eslint": "^8.13.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"prettier": "^2.6.2",
"sass": "^1.39.0"
}
}

I think I found why this happens.
I went through react bootstrap documentation and found this:
dropped InputGroupPrepend and InputGroupAppend. Buttons and InputGroupText can now be added as direct children.
Link:https://react-bootstrap.netlify.app/migrating/#inputgroup

CkEditor 5 not working with ReactJs 18.2.0

I'm working on a ReactJs (v18.2.0) project that requires integration with CkEditor5.
Following the official documentation here, I've imported and set up the CkEditor.
Somehow, it's not working. A log of the editor returns null
CreateProduct.jsx
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
<div>
<CKEditor
editor={ClassicEditor}
data="<p>Hello World</p>"
onReady={editor => {
console.log(editor)
}}
onChange={(event, editor) => {
console.log(editor.getData())
}}
onBlur={(event, editor) => {}}
onFocus={(event, editor) => {}}
/>
</div>
...
export default CreateProduct;
if (document.getElementById('createProduct')) {
const container = document.getElementById('createProduct');
const root = createRoot(container);
root.render(
<React.StrictMode>
<CreateProduct />
</React.StrictMode>
);
}
package.json
...
"devDependencies": {
"#babel/preset-react": "^7.13.13",
"#ckeditor/ckeditor5-build-classic": "^34.2.0",
"#ckeditor/ckeditor5-react": "^5.0.2",
"#fortawesome/fontawesome-free": "^6.1.1",
"#popperjs/core": "^2.10.2",
"#table-library/react-table-library": "^4.0.10",
"#tailwindcss/forms": "^0.5.2",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"check-npm": "^1.0.0",
"formik": "^2.2.9",
"laravel-mix": "^6.0.49",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"sweetalert2": "^11.4.23",
"sweetalert2-react-content": "^5.0.1",
"tailwindcss": "^3.1.6",
"yup": "^0.32.11"
}
...
Console Error
Browser Output not display toolsbar

In my case CKEditor wasn't showing at all.
I fixed it by removing <React.StrictMode>
Hope it helps :)

I've looked at the single-spa site on how to create parcels, I get exceptions

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"
}
}

Vue Custom Element failing to build standalone JS files in Dist

I followed the directions for registering and using custom elements here:
https://alligator.io/vuejs/custom-elements/
I'm using the standard Webpack template for Vue.
When I run
npm run build
I expect to get a packaged web component file called element.js in the dist directory. Nothing happens, though. Does anyone know if there are any extra steps needed? The documentation doesn't make this clear.
This produced the following files in my project:
<template>
<div id="app">
<example myProp="I can pass props!"></example>
</div>
</template>
<script>
import Example from './components/example.Vue'
export default {
name: 'app',
components: {
Example
}
}
</script>
<style>
</style>
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 vueCustomElement from 'vue-custom-element'
Vue.config.productionTip = false
Vue.use(vueCustomElement);
/* eslint-disable no-new */
import Example from './components/Example.vue';
// Configure Vue to ignore the element name when defined outside of Vue.
Vue.config.ignoredElements = [
'example-component'
];
// Enable the plugin
Vue.use(vueCustomElement);
// Register your component
Vue.customElement('example-component', Example, {
// Additional Options: https://github.com/karol-f/vue-custom-element#options
});
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
components/example.vue
<template>
<p>Dynamic prop value: {{myProp}}</p>
</template>
<script>
export default {
props: ['myProp']
}
</script>
package.json
{
"name": "example",
"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"
},
"dependencies": {
"vue": "^2.5.2",
"vue-custom-element": "^2.0.0"
},
"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",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"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"
]
}
After including the script files for the custom element and vue libraries, my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
<script src="vue/dist/vue.min.js"></script>
<script src="vue-custom-element/dist/vue-custom-element.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

The docs and the alligator.io article don't explain it, but in order to work, a vue-custom-element still requires the Vue.js and vue-custom-element libraries.
So you have to use the <script> includes that webpack generates in the index.html.
Found a tutorial which mentions that:
http://vuetips.com/vue-web-components
This implementation requires Vue.js core files and the
vue-custom-element library to be included in your page.
It also mentions https://github.com/kartsims/vue-customelement-bundler which is a template that builds everything into a single .js file.