I am having difficulties telling vue to polyfill my application in a way that it runs on IE11.
If I understand everything correctly, I have to tell my npm build to insert core-js and regenerator-runtime for my generator functions.
The app works fine on Chrome/Firefox, but I persistently get the error SCRIPT1006: Expected ')' on IE11.
Can someone point me in a direction to solve this?
My package.json looks like this:
{
"name": "vue-form",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vuetify": "^2.4.2"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"#vue/babel-preset-app": "^4.5.11",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
my babel.config.js:
module.exports = {
presets: [
['#babel/preset-env', {
"useBuiltIns": "entry"
}]
],
plugins: ['#babel/plugin-transform-parameters', '#babel/plugin-syntax-dynamic-import']
}
and my vue.config.js:
module.exports = {
// options ...
publicPath: './',
transpileDependencies: ['bootstrap', 'vuetify']
}
Does anybody have any clue on how to fix this?
Cheers
Related
I decided to use Pinia with my vue2 project but it fails once I load the page.
Error:
TypeError: Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"]) is not a function. (In 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])(true)', 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])' is an instance of Object)
createPinia — pinia.mjs:955
packages.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"chart.js": "^3.9.1",
"core-js": "^3.6.5",
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"driver.js": "^0.9.8",
"jquery": "^3.6.0",
"pdfjs-dist": "2.15.349",
"pinia": "^2.0.22",
"vue": "^2.6.11",
"vue-chartjs": "^4.1.1",
"vue-tour": "^1.5.0",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^1.6.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
js entrypoint
import Vue from 'vue'
import myapp from './myapp.vue'
import { PiniaVuePlugin,createPinia } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia(); // <-- this is the problem
new Vue({
pinia,
render: (h) => h(myapp)
}).$mount("#myapp");
Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?
I am trying to create some aliases to make my package cleaner but my project is ignoring my vue.config.js file. I am using the Vue CLI with Vue v^2.6.11.
vue.config.js:
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#vue-toggle-component': path.resolve(__dirname, 'src/components')
}
}
}
}
package.json:
{
"name": "vue-toggle-component",
"version": "0.1.1",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"description": "## Project setup ``` yarn install ```",
"main": "babel.config.js",
"repository": "git+https://github.com/nehlis/vue-toggle-component.git",
"keywords": [
"Vue.js",
"Toggle",
"Component",
"Lightweight",
"Checkbox"
],
"author": "Niels Bosman",
"license": "ISC",
"bugs": {
"url": "https://github.com/nehlis/vue-toggle-component/issues"
},
"homepage": "https://github.com/nehlis/vue-toggle-component#readme"
}
When I look online for a solution every page says Vue should read the config file. But it does not, since I tried console logging there and it had no output. Anyone knows more about this?
I made a custom npm package which I'm trying to install in my Vue application. I tried to follow some tutorials and steps but I'm getting an error below:
This dependency was not found:
chatinterfaceui in ./src/main.js
To install it, you can run: npm install --save chatinterfaceui
My main.js file in my chatinterfaceui lib is:
import ChatUi from './ChatUi.vue'
export default {
install (Vue, options) {
if (!options || !options.store) {
throw new Error('Please initialise plugin.');
}
Vue.component('chat-ui', ChatUi);
}
}
The package.json file for the chatinterfaceui lib:
{
"name": "chatinterfaceui",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name chatinterfaceui ./src/ChatUi.vue",
"lint": "vue-cli-service lint"
},
"main": "./dist/chatinterfaceui.common.js",
"dependencies": {
"autolinker": "^3.14.1",
"core-js": "^3.6.4",
"emoji-js": "^3.5.0",
"escape-goat": "^3.0.0",
"msgdown": "^1.0.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My main.js file for the Vue application is:
import Vue from 'vue'
import App from './App.vue'
import ChatUi from 'chatinterfaceui'
Vue.use(ChatUi)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
My package.js is:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"chatinterfaceui": "^0.1.0",
"core-js": "^3.6.4",
"dialogflow": "^1.2.0",
"uuid": "^8.0.0",
"vue": "^2.6.11",
"vue-beautiful-chat": "^2.3.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
In my main Vue application in which I want to use my library, when I try to use the library, I'm getting the warning. I feel I'm doing something silly, but can't understand or find what.
I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}