Develop Reference

Vue JS server not compiling after changes to src files

I am new to Vue.js and I am having an issue and have been stuck for a long while trying different fixes.
After starting a dev server using npm run serve, I would expect that when I make changes to any .vue or .js files within my directory, the server would refresh and display these changes. However, no matter what I try nothing happens. Nothing is compiling and nothing changes within my terminal. The only way I can refresh the server is by closing it and running a new one. Refreshing my browser page does nothing either. Really stumped on this one so will be eternally grateful if anyone can help as none of the fixes I found on here have worked for me :(
My vue.config.js is as follows:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
client: {
progress: true
},
hot: false,
watchFiles: {
paths: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.json', 'src/views/*.vue']
},
liveReload: true,
}
})
My package.json is:
{
"name": "product-and-cart",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"nodemon": "^2.0.19",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"webpack": "^5.74.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"#vue/standard"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
And my jsconfig.json is:
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"jsx": "preserve"
}
}
And babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}

In your vue.config.js file, you set hot module replacement to false in devServer configuration; therefore, your changes won't be applied without refreshing the page. Hot module replacement is enabled by default in Vue CLI, you can remove hot from the configuration. Also, you don't have to set liveReload and watch options for this.
For more details, you can take a look at Vue CLI configuration and Webpack DevServer configuration.

Rollup produces incorrect Dist structure when test are present

I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "#kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/#kubevious/entity-meta/public,./node_modules/#kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian#gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-framework": "^1.0.59",
"#types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"#storybook/addon-actions": "6.5.7",
"#storybook/addon-essentials": "6.5.7",
"#storybook/addon-links": "6.5.7",
"#storybook/react": "6.5.7",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "12.1.5",
"#types/jest": "26.0.24",
"#types/js-yaml": "^4.0.0",
"#types/node": "^14.6.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "5.27.1",
"#typescript-eslint/parser": "5.27.1",
"#babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"#rollup/plugin-babel": "5.3.1",
"#rollup/plugin-commonjs": "22.0.0",
"#rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"#storybook/preset-scss": "1.0.3",
"#types/react-router-dom": "5.3.3",
"#testing-library/dom": "8.13.0",
"#testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"#kubevious/ui-framework": "^1.0.59",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}

Why does my vue web app load a blank page in IE11 and look broken in Edge?

I'm having a bit of trouble with getting my project to work on IE11 and Edge
You can view it here: https://tagfireandsecurity.co.uk/
THE PROBLEMS
IE11: Blank page, shows multiple errors:
SCRIPT1002: Syntax error
firebase-app.js (1,1)
SCRIPT1002: Syntax error
firebase-analytics.js (1,1)
SCRIPT1002: Syntax error
init.js (1,1)
SCRIPT5043: Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
eval code (3959) (15268,9)
SCRIPT5022: SecurityError
sockjs.js (1684,3)
Edge: Loads the website, however its all messed up. For example the grid is not working and my carousels aren't working. Also shows some errors:
SCRIPT65535: SCRIPT65535: Invalid calling object
WHAT I'VE DONE SO FAR
I tried to make sure babel will polyfill which I don't even know if it's doing it to be honest, I followed the documentation on their website and I don't think its working.
I also tried to add transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video'] to polyfill my plugins but I don't think that is doing anything either.
I also added an autoprefixer and I believe that is working because the SCSS to CSS output now has all the prefixes in it, so why it's not working in EDGE? I don't know. Inspecting it in Edge shows it has the prefixes there, sometimes just disabling the prefix and putting it back on again fixes it so I'm very confused.
Here are my config files:
babel.config.js
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es.promise',
'es.symbol'
]
}]
]
};
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}],
vue: {
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
}
}
}
}
vue.config.js
// vue.config.js
module.exports = {
transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']
}
main.ts
import "core-js/stable";
import "regenerator-runtime/runtime";
require('intersection-observer');
import "regenerator-runtime/runtime";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "#fortawesome/fontawesome-free/css/all.css";
import VueMq from "vue-mq";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import VueCarousel from "vue-carousel";
import "animate.css/animate.css";
import * as firebase from "firebase";
import VueLazyLoadVideo from "vue-lazyload-video";
require("intersection-observer");
require("matchmedia-polyfill");
require("matchmedia-polyfill/matchMedia.addListener");
import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";
import "lazysizes/plugins/blur-up/ls.blur-up";
// Register Components
// LazyVideo & LazyVideoAsGIF
Vue.use(VueLazyLoadVideo);
const firebaseConfig = {
HIDDEN CONFIG FOR STACKOVERFLOW
};
firebase.initializeApp(firebaseConfig);
Vue.use(VueCarousel);
gsap.registerPlugin(ScrollTrigger);
Vue.use(VueMq, {
breakpoints: {
// default breakpoints - customize this
sm: 480,
md: 921,
lg: 1024
}
});
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({})
]
};
package.json
{
"name": "tag",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#firebase/polyfill": "^0.3.36",
"#fortawesome/fontawesome-free": "^5.13.0",
"animate.css": "^4.1.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"firebase": "^7.15.5",
"gsap": "^3.4.0",
"intersection-observer": "^0.11.0",
"lazysizes": "^5.2.2",
"matchmedia-polyfill": "^0.3.2",
"uuid": "^8.2.0",
"vue": "^2.6.11",
"vue-carousel": "^0.18.0",
"vue-class-component": "^7.2.3",
"vue-lazyload-video": "^0.1.15",
"vue-mq": "^1.0.1",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#babel/preset-env": "^7.10.4",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "^4.4.6",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-plugin-router": "~4.4.0",
"#vue/cli-plugin-typescript": "~4.4.0",
"#vue/cli-plugin-vuex": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"autoprefixer": "^9.8.5",
"cssnano": "^4.1.10",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"fork-ts-checker-webpack-plugin": "^5.0.5",
"google-auth-library": "^6.0.5",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-load-config": "^2.1.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"sugarss": "^2.0.0",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended",
"#vue/prettier",
"#vue/prettier/#typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"strict": false,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

Sorry to say this, you can't render a website built with JS based framework (VUE, ReactJS etc) in IE, and the JS engine of Edge (non-chromium) is not capable of handling all features of ES6 standard. If the customer wants to use your website on a Microsoft based browser, then they have to switch to the latest Edge based on Chromium.

Minified React error #321 - React Typescript library build

I am writing my own React library with Typescript. I have a lot of problems with building and using it. I am using webpack with ts loader to build files into lib folder. When I am trying to use my components from build
import React from 'react'
import { Text } from '../lib'
export default () => {
return <Text lg>Blabla</Text>
}
I get an error
index.js:9 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
What is wrong?
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "esnext"],
"allowJs": true,
"outDir": "./lib/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"typeRoots": ["node_modules/#types"]
},
"include": ["src"],
"exclude": ["node_modules"]
}
webpack
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../lib'),
library: 'my-library',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [new CleanWebpackPlugin()]
}
package.json
{
"name": "my-library",
"version": "1.0.0",
"private": true,
"types": "lib",
"main": "lib/index.js",
"dependencies": {
"#types/node": "^14.0.11",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --mode development --open --hot --config config/webpack.dev.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/react": "^5.3.19",
"babel-loader": "^8.1.0"
}
}

Babel transform import statements

I have an ASP.NET MVC solution with my front-end scripts in TypeScript. I am trying to use webpack and babel with ts-loader so I can develop with es2016 but have babel transform to es5 and be able to run and debug in IE from Visual Studio. However I find that the output js is not transformed as I expect. For example the following statements in my ts appear in my resulting js, which are not es5:
import * as moment from 'moment';
import { classes } from './order';
Here is my config:
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts'),
entry: ['babel-polyfill', './pos.ts'],
output: {
path: path.join(__dirname, 'Scripts'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2016",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/#types/**/*.d.ts",
"Scripts/**/*.ts"
]
}
package.json
{
"version": "1.0.0",
"name": "foo",
"readme": "README.md",
"description": "foo",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-bower": "^0.0.13",
"gulp-clean-css": "^3.4.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^1.0.0",
"gulp-less": "^3.3.0",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-tsc": "^1.3.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"merge-stream": "^1.0.1",
"node-sass": "^4.5.3",
"run-sequence": "^1.2.2",
"ts-loader": "^2.3.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"#types/jquery": "^2.0.46",
"#types/bootstrap-touchspin": "",
"#types/maskedinput": "",
"#types/bootstrap-select": ""
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
}
}
Webpack appears to be running successfully in that there are no errors and js is created from my ts. I think that Babel is being invoked because if I put in an invalid preset I get an error. However as noted above it seems like Babel is not transforming to es5. I have tried other presets like env and 2016. What am I missing?