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

Jest: TypeError: Cannot read property 'child' of undefined

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.

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 :)

Attempted import error : 'required' is not exported from 'yup'

Hello everyone I've Installed the yup in my new project but after importing it i'm getting the following error . required is not exported . I tried to change the position of import like putting it on top but still nothing happens please help I have to add validations on my react App.Thanks
I'm using following libraries in my App
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"bootstrap": "^4.6.0",
"datatables.net-bs4": "^1.11.3",
"date-fns": "^2.26.0",
"formik": "^2.2.9",
"jquery": "^3.6.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-day-picker": "^7.4.10",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-toastify": "^8.1.0",
"react-tooltip": "^4.2.21",
"react-yup": "^1.23.0",
"web-vitals": "^1.0.1",
"yup": "^0.32.11"
},

You need to use a schema type like Yup.string() or Yup.number() before you can use required().
Only schemas have the required prop:
BaseSchema, MixedSchema, BooleanSchema, StringSchema, NumberSchema, DateSchema, ObjectSchema, ArraySchema
It's not directly exported from Yup.

Invalid hook call in react. I am using class component

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?