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

How to transpile styled components into an NPM package?

I have a styled component that I want to build into an NPM package and be able to import into other projects.
My styled component is something like this:
// src/StyledDiv.styles.js
import styled from "styled-components"
const StyledDiv = styled("div")`
border: solid red 1px;
border-radius: 5px;
padding: 20px;
margin: 15px;
`
export default StyledDiv
I then have a build script that should transpile my code into a dist folder:
"build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
// .babelrc
{
"presets": ["env", "react"]
}
I then run npm link in my styled component project and then npm link <styled component> in my other project in order to try import it but seem to get the 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.
Which I believe arrives from babel not transpiling my styled component correctly so when I import the built files in dist, the app crashes.
My full package.json is as follows:
{
"name": "my-styled-component",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "jest ./src/**/*.test.js --notify --detectOpenHandles",
"test:watch": "jest ./src/**/*.test.js --notify --watch",
"start": "webpack-dev-server --mode development",
"build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
"lint:css": "stylelint './src/**/*.styles.js'"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.8.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.8.0",
"jest-styled-components": "^6.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.8.6",
"style-loader": "^0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-recommended": "^2.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.6.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"styled-components": "^4.2.0",
"styled-tools": "^1.7.1"
}
}

It looks like you need to import react in the component file.
import React from 'react';

You need use this in .babelrc:
presets: [
'#babel/env',
'#babel/react',
],

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.

Angular4 blank screen after importing component

I am facing the following problem:
I have generated a JHipster Application and now need to import a component inside another component like shown in this tutorial:
https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch/lessons/2
I have a TeamMember.component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import { Team } from './team.model';
import { TeamService } from './team.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
#Component({
selector: 'jhi-team',
templateUrl: './team.component.html'
})
export class TeamComponent implements OnInit, OnDestroy {
teams: Team[];
currentAccount: any;
eventSubscriber: Subscription;
constructor(
private teamService: TeamService,
private jhiAlertService: JhiAlertService,
private eventManager: JhiEventManager,
private principal: Principal
) {
}
loadAll() {
this.teamService.query().subscribe(
(res: ResponseWrapper) => {
this.teams = res.json;
},
(res: ResponseWrapper) => this.onError(res.json)
);
}
ngOnInit() {
this.loadAll();
this.principal.identity().then((account) => {
this.currentAccount = account;
});
this.registerChangeInTeams();
this.teamService.query();
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
trackId(index: number, item: Team) {
return item.id;
}
registerChangeInTeams() {
this.eventSubscriber = this.eventManager.subscribe('teamListModification', (response) => this.loadAll());
}
private onError(error) {
this.jhiAlertService.error(error.message, null, null);
}
}
and a Team.component, where I want to import the teammembers.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { RouterModule } from '#angular/router';
import { EntrestratsSharedModule } from '../../shared';
import {ButtonModule} from 'primeng/primeng';
import {DataListModule} from 'primeng/primeng';
import {TeamMemberComponent} from '../team-member/team-member.component';
import {
TeamService,
TeamPopupService,
TeamComponent,
TeamDetailComponent,
TeamDialogComponent,
TeamPopupComponent,
TeamDeletePopupComponent,
TeamDeleteDialogComponent,
teamRoute,
teamPopupRoute,
} from './';
const ENTITY_STATES = [
...teamRoute,
...teamPopupRoute,
];
#NgModule({
imports: [
EntrestratsSharedModule,
ButtonModule,
DataListModule,
RouterModule.forRoot(ENTITY_STATES, { useHash: true }),
],
declarations: [
TeamComponent,
TeamMemberComponent,
TeamDetailComponent,
TeamDialogComponent,
TeamDeleteDialogComponent,
TeamPopupComponent,
TeamDeletePopupComponent,
],
entryComponents: [
TeamComponent,
TeamDialogComponent,
TeamPopupComponent,
TeamDeleteDialogComponent,
TeamDeletePopupComponent,
],
providers: [
TeamService,
TeamPopupService,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class EntrestratsTeamModule {}
My Problem is the following:
If I do this as described in the tutorial and as shown in my code snippets, I only get a blank page for this app. I don't get an error, just a white page for the whole app.
Has anyone experienced this and some ideas for me? I sit on this the whole day now and don't have an idea what I could do with this.
Thank you in advance for all suggestions!
Karsten
EDIT:
Maybe it helps if i share my package.json:
{
"name": "entrestrats",
"version": "0.0.1",
"description": "Description for entrestrats",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular-devkit/schematics": "0.0.34",
"#angular/animations": "4.3.2",
"#angular/common": "4.3.2",
"#angular/compiler": "4.3.2",
"#angular/core": "4.3.2",
"#angular/forms": "4.3.2",
"#angular/http": "4.3.2",
"#angular/platform-browser": "4.3.2",
"#angular/platform-browser-dynamic": "4.3.2",
"#angular/router": "4.3.2",
"#ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"bootstrap": "4.0.0-beta",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"ng-jhipster": "0.2.12",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "1.0.0",
"ngx-infinite-scroll": "0.5.1",
"popper.js": "1.11.0",
"primeng": "^4.3.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"zone.js": "0.8.16"
},
"devDependencies": {
"#angular/cli": "1.4.2",
"#angular/compiler-cli": "4.3.2",
"#types/jasmine": "2.5.53",
"#types/node": "8.0.18",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.2",
"browser-sync": "2.18.13",
"browser-sync-webpack-plugin": "1.2.0",
"codelyzer": "3.1.2",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"generator-jhipster": "4.10.2",
"html-loader": "0.5.0",
"html-webpack-plugin": "2.30.1",
"jasmine-core": "2.7.0",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.0.1",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"merge-jsons-webpack-plugin": "1.0.11",
"ngc-webpack": "3.2.2",
"node-sass": "4.5.3",
"postcss-loader": "2.0.6",
"proxy-middleware": "0.15.0",
"puppeteer": "0.10.2",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.5.2",
"uglifyjs-webpack-plugin": "1.0.0-beta.2",
"web-app-manifest-loader": "0.1.1",
"webpack": "3.6.0",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-notifier": "1.5.0",
"webpack-visualizer-plugin": "0.1.11",
"write-file-webpack-plugin": "4.1.0",
"xml2js": "0.4.17"
},
"engines": {
"node": ">=6.9.0"
},
"scripts": {
"lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
"lint:fix": "yarn run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"test": "karma start src/test/javascript/karma.conf.js",
"test:watch": "yarn test -- --watch",
"webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base",
"webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
}

It can sound crazy but try importing the:
templateUrl: './team.component.html'
without the './'
templateUrl: 'team.component.html'
and also add the
moduleId: module.id above the selector.

mocha not reloading source React component .jsx file

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!