What is the correct way to import jQuery and fancybox into a Vue component so it gets bundled correctly. Does it need to be at the highest App level, or just at the component using fancybox?
Most of the solutions I've seen on here use ProvidPlugin and webpack. This project does not use webpack.
I run into 'no unused' or 'not defined' problems with this:
import $ from 'jQuery'
import fancybox from 'fancybox';
My implementation is the inline vanilla varity, i.e. just adding "data-fancybox" to a link.
I have no problem if I just call jQuery and fancybox from a CDN in the index.html, but I want to learn the right way so it's bundled in.
package.json
{
"name": "inv-dash",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"airtable": "^0.7.1",
"axios": "^0.19.0",
"core-js": "^3.3.2",
"fslightbox-vue": "^1.0.2",
"imagesloaded": "^4.1.4",
"inuitcss": "^6.0.0",
"masonry-layout": "^4.2.2",
"material-icons": "^0.3.1",
"to-title-case": "^1.0.0",
"vue": "^2.6.10",
"vue-agile": "^1.0.11",
"vue-carousel": "^0.18.0",
"vue-images-loaded": "^1.1.2",
"vue-js-toggle-button": "^1.3.3",
"vue-lazyload": "^1.3.3",
"vue-masonry": "^0.11.8",
"vue-masonry-css": "^1.0.3",
"vue-nl2br": "^0.1.2",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-toasted": "^1.1.27",
"vue-truncate-collapsed": "^2.1.0",
"vueisotope": "^3.1.2",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-unit-jest": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"lint-staged": "^9.4.2",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"git add"
]
}
}
Related
I am getting error updating vue version to 3 using bootstrap-vue.
warn in ./node_modules/bootstrap-vue/esm/vue.js 22:59:50
export 'default' (reexported as 'Vue') was not found in 'vue' (pos
As of their documentation i am using #vue-compat.
Here is my package.json
{
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.18",
"#babel/runtime": "^7.18",
"#coreui/coreui": "^2.1.16",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"#coreui/vue": "^2.1.2",
"#fortawesome/fontawesome-free": "^5.9.0",
"#symfony/webpack-encore": "^3.1.0",
"axios": "^0.27",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bootstrap": "^4.6.2",
"bootstrap-vue": "npm:#ankurk91/bootstrap-vue#^3.0.2",
"chart.js": "^3.9.1",
"core-js": "^3.25.3",
"css-vars-ponyfill": "^2.4.8",
"downloadjs": "^1.4.7",
"moment": "^2.29.4",
"node-sass": "^7.0.3",
"perfect-scrollbar": "^1.5.5",
"regenerator-runtime": "^0.13.9",
"roboto-npm-webfont": "^1.0.1",
"sass-loader": "^13.0.2",
"vue": "^3.1.0",
"#vue/compat": "^3.2.41",
"vue-cal": "^2.24.8",
"vue-chartjs": "^4.1.1",
"vue-i18n": "^8.27.2",
"vue-loader": "^17.1.0",
"vue-notification": "^1.3.20",
"vue-perfect-scrollbar": "^0.2.1",
"vue-router": "^3.0.2",
"#vue/compiler-sfc": "^3.1.0",
"vuex": "^3.6.2",
"webpack-notifier": "^1.15.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"#types/file-saver": "^2.0.5",
"file-saver": "^2.0.5"
}
}
I tried to change version of bootstrap-vue as well as #vue-compat but it did't helped.
Looks like you don't have the proper package installed
"bootstrap-vue": "npm:#ankurk91/bootstrap-vue#^3.0.2"
should be replaced with
"bootstrap-vue": "^2.23.1"
Thanks you for reponse. I found problem was my webpack configuration. I forgot to add this section
alias: {
vue: '#vue/compat'
}
I have a script which is being weird! When I run it, it won't delete the field on the document but instead sets the field to null. Never seen this before.
Code:
await firebase
.firestore()
.collection('devices')
.doc('W4ajAVxml4Mffwnqfo23')
.update({
exampleField: firebase.firestore.FieldValue.delete(),
});
This should result in exampleField being removed from document W4ajAVxml4Mffwnqfo23 in the collection devices. Instead, it's value is set to null.
From package.json:
"firebase": "^8.2.1"
Package.json contents:
{
"name": "app",
"version": "1.18.76",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"functions": "firebase serve --only functions --port 5001"
},
"dependencies": {
"#capacitor-community/bluetooth-le": "^1.8.2",
"#capacitor-community/fcm": "^2.0.2",
"#capacitor-community/http": "^1.4.1",
"#capacitor-community/keep-awake": "^2.1.1",
"#capacitor/android": "^3.5.1",
"#capacitor/app": "1.1.1",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.5.1",
"#capacitor/device": "^1.1.2",
"#capacitor/filesystem": "^1.1.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/ios": "^3.5.1",
"#capacitor/keyboard": "1.2.2",
"#capacitor/network": "^1.0.7",
"#capacitor/push-notifications": "^1.0.9",
"#capacitor/splash-screen": "^1.2.2",
"#capacitor/status-bar": "1.0.8",
"#capacitor/storage": "^1.2.5",
"#ionic/pwa-elements": "^3.1.1",
"#ionic/vue": "^6.0.0",
"#ionic/vue-router": "^6.0.0",
"#robingenz/capacitor-badge": "^1.2.1",
"#sentry/cli": "^2.0.4",
"#sentry/tracing": "^7.1.1",
"#sentry/vue": "^7.1.1",
"axios": "^0.27.2",
"buffer": "^6.0.3",
"cordova-plugin-ionic": "^5.5.2",
"cordova-plugin-whitelist": "^1.3.5",
"core-js": "^3.6.5",
"dotenv": "^16.0.0",
"firebase": "^8.10.1",
"google-polyline": "^1.0.3",
"mapbox-gl": "^2.8.2",
"marked": "^4.0.15",
"vue": "^3.2.21",
"vue-json-pretty": "^2.1.1",
"vue-router": "^4.0.12"
},
"devDependencies": {
"#capacitor/cli": "3.5.1",
"#sentry/webpack-plugin": "1.18.4",
"#types/jest": "^27.0.2",
"#typescript-eslint/eslint-plugin": "^5.6.0",
"#typescript-eslint/parser": "^5.6.0",
"#vue/cli-plugin-babel": "~5.0.0-rc.1",
"#vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"#vue/cli-plugin-eslint": "~5.0.0-rc.1",
"#vue/cli-plugin-router": "~5.0.0-rc.1",
"#vue/cli-plugin-typescript": "~5.0.0-rc.1",
"#vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"#vue/cli-service": "~5.0.0-rc.1",
"#vue/eslint-config-typescript": "^9.1.0",
"#vue/test-utils": "^2.0.0-rc.16",
"#vue/vue3-jest": "^27.0.0-alpha.3",
"babel-jest": "^27.3.1",
"cypress": "^8.7.0",
"eslint": "^8.4.1",
"eslint-plugin-vue": "^8.2.0",
"jest": "^27.3.1",
"ts-jest": "^27.0.7",
"typescript": "^4.3.5"
},
"description": "An Ionic project"
}
This is an Ionic 6 project btw. Not sure if that matters but it uses the Firebase JavaScript NPM package.
I'm trying to run yarn start and am getting the following error:
🚨 /User/platform/src/containers/App.js: Cannot resolve dependency 'core-js/modules/es6.array.iterator'
This is my package.json:
{
"name": "static-site-mailer",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"dependencies": {
"#babel/polyfill": "^7.8.7",
"aws-sdk": "^2.661.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"core-js": "^3.6.5",
"es6-promise": "^4.2.8",
"html-webpack-plugin": "^4.2.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-modal-login": "^1.4.5",
"react-modal-plugin": "^1.0.3",
"react-router-dom": "^5.1.2",
"regenerator-runtime": "^0.13.5",
"xmlhttprequest": "^1.8.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.4.0",
"babel-loader": "^8.1.0",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.4",
"eslint-plugin-react": "^7.19.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.4.0",
"parcel-bundler": "^1.12.4",
"react-test-renderer": "^16.13.1",
"sass": "^1.26.3",
"webpack": "^4.43.0"
},
"scripts": {
"start": "parcel ./src/index.html",
"test": "jest",
"build": "rm -rf dist && parcel build ./src/index.html",
"watch": "parcel ./src/index.html"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "identity-obj-proxy"
}
}
}
What's going on? I assume I am using the incorrect version of one of the packages? I have already uninstalled and reinstalled the packages a few times now but it doesn't seem to make a difference.
I downloaded core-js#3.6.5 via npm and took a look at the following path:
core-js/modules
The modules directory does NOT contain the file es6.array.iterator.js but it DOES contain es.array.iterator.
Try changing the path 'core-js/modules/es6.array.iterator.js' to 'core-js/modules/es.array.iterator.js' in the affected file.
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};
I am running a project created with vue-cli-3 which uses webpack4. I am new to all this and cannot for the life of me figure out how to have my code transpiled to ES5 code and have it minified/obfuscated. There seems to be absolutely zero documentation on this subject... Can someone help me out?? I want to transpile for IE11 and newer browsers.
package.json
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"papaparse": "^4.6.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuetify": "^1.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-e2e-nightwatch": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-unit-jest": "^3.1.1",
"#vue/cli-service": "^3.1.1",
"#vue/eslint-config-prettier": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-cli-plugin-vuetify": "^0.4.5",
"vue-template-compiler": "^2.5.17",
"vuetify-loader": "^1.0.5"
}
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
vue.config.js
module.exports = {
productionSourceMap: false
}
Add this to your package.json
  "browserslist": [
    "IE 11"
  ],