Vue3/Quasar. 'q-' custom elements aren't recognized as quasar's elements - vue.js

After updating package.json Vue started trying to resolve Quasar's components, and even if those are excluded (through vue.config.js) Quasar itself doesn't see them
console error
[Vue warn]: Failed to resolve component: q-page-container
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"#quasar/extras": "^1.13.0",
"#vue/cli": "^5.0.1",
"axios": "^0.26.1",
"core-js": "^3.21.1",
"quasar": "^2.5.5",
"vue": "^3.2.31",
"vue-router": "^4.0.13",
"webpack": "^5.70.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "^5.0.1",
"vue-cli-plugin-quasar": "~4.0.4",
"#vue/compiler-sfc": "^3.2.31",
"sass": "^1.49.9",
"sass-loader": "^10.0.2"
}
}

For the future generations
The issue is in vue/cli. Vue/cli is in the maintenance mode and it was replaced by Vite and apparently something inside vue/cli not supporting something in the new libs.
To upgrade from vue/cli to vite these are helpful manuals:
https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d
(note WebStorm hack for # aliases)
https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
Also note that Vite doesn't support require('path' / 'module'), only import

Related

Github Pages Vue.js Project

I am attempting to deploy a vuejs app to github pages. I have followed every stackoverflow post, and every tutorial I have found online. No matter what I do, the page only displays the readme file.
github repo
github page
I am using the gh-pages branch.
package.json:
type here{
"name": "eller-front-end-resume",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"predeploy": "yarn build",
"deploy": "node scripts/gh-pages-deploy.js"
},
"dependencies": {
"#vue/composition-api": "1.4.6",
"axios": "0.26.0",
"core-js": "^3.6.5",
"execa": "latest",
"lodash": "4.17.21",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.6.4",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/lodash": "^4.14.180",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.7",
"#vue/cli-plugin-eslint": "~4.5.7",
"#vue/cli-plugin-router": "~4.5.7",
"#vue/cli-plugin-typescript": "~4.5.7",
"#vue/cli-plugin-vuex": "~4.5.7",
"#vue/cli-service": "~4.5.7",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
I have spent far too many hours researching and trying to host a dumb/simple app to show my grandma. Please help me.
I have followed over a dozen guides on stackoverflow and other sites (yes, even that medium article everyone points to). I am expecting to see my app running as if I was running my project locally on my machine.
You do not seem to have the files you build via vue in a folder that is served by GitHub Pages. Go to the repository settings in GitHub and choose "Pages". There you can switch the branch and the folder in the branch that should be served. Currently only "/" (root) or "/docs" are allowed. See the GitHub Pages Docs on this
For your use case, changing this to "/docs" and renaming your "dist" folder to "docs" after building your page / changing the output folder in your compiler should do the trick.
Take note that it will take a few minutes for the new index.html to be served instead of the current Readme after changing this.

"exports is not defined" error in brand new Vue.js 3 project

I am creating a Vue project with VueCli v4. Actually I did it like hundreds of times before but today I got an error.
I am creating with "vue create live-chat"
Then I pick Vue 3, Babel and Router.
When everything is created I go to subfolder and run "npm run serve" as usual.
Everything gets compiled without a problem but when I go to http://localhost:8080, I got this error
vue-router.esm-bundler.js?6c02:2306 Uncaught ReferenceError: exports is not defined
at Module.eval (vue-router.esm-bundler.js?6c02:2306)
at eval (vue-router.esm-bundler.js:3375)
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js (chunk-vendors.js:1236)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (index.js?a18c:1)
at Module../src/router/index.js (app.js:1219)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:12)
I used the same command yesterday without a problem. This is my package.json:
{
"name": "live-chat",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"firebase": "^8.1.2",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0"
}
}
This is the folder I create:
C:\Users\Bugra\Documents\GitHub\Frontend\Udemy\Build Web Apps with Vue JS 3 and Firebase\Section 13 - PROJECT BUILD - Live Chat Room with Authentication\live-chat
Can you please help me?
*Edit
I have put the Udemy instructor's package.json file and it worked. Only difference is firebase version. Still it would be great if you know the reason.
"name": "live-chat",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"firebase": "^8.0.1",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0"
}
}
I encountered the same issue. Changing to the following versions & re-running yarn or npm install worked for me:
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.3"
},
Note: I scaffolded the app via npx #vue/cli create my-app then added the vue-router dependency.

sh: vue-cli-service: command not found at build step of aws amplify for vuejs2 app

I am trying to deploy an vue app in AWS amplify.
Below is my build configuration-
version: 0.1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run production
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
My package.json in the vue app -
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "./bin/web.js",
"serve": "vue-cli-service serve --mode development",
"production": "vue-cli-service build --mode production",
"sandbox": "vue-cli-service build --mode sandbox",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"bignumber.js": "^8.0.1",
"bootstrap": "^4.3.1",
"connect-history-api-fallback": "^1.5.0",
"cors": "^2.8.5",
"currency-formatter": "^1.5.3",
"ethereum-blockies": "^0.1.1",
"ethereum-blockies-base64": "^1.0.2",
"express": "^4.16.4",
"from-now": "^1.0.2",
"jquery": "^3.3.1",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"popper.js": "^1.14.7",
"socket.io-client": "^2.3.0",
"vue": "^2.5.17",
"vue-axios": "^2.1.4",
"vue-multiselect": "^2.1.4",
"vue-router": "^3.0.1",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.0",
"#vue/cli-plugin-unit-mocha": "^3.2.0",
"#vue/cli-service": "^3.2.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-eslint": "^10.0.1",
"chai": "^4.1.2",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-cli-plugin-bootstrap": "^1.0.0-alpha.1",
"vue-template-compiler": "^2.5.17"
}
}
In the build step it's failing, so I pulled up the log and saw following error-
2020-03-25T06:37:48.522Z [WARNING]: sh: vue-cli-service: command not
found
Why the error? vue-cli-service is there in the dev dependencies.
A quick fix that did work for me is to install #vue/cli-service globally with this command npm install -g #vue/cli-service
Also make sure your npm install command runs in NODE_ENV=development otherwise devDependencies won't be installed.
You may want to use npm ci or to trash your node_modules, at least once just as a test. Seems like most CICD systems hitting this issue were resolved by destroying the node_modules artifact: https://github.com/vuejs/vue-cli/issues/2404
Is the vue-cli-service not intended only to be used for development? Amplify is not going to serve your content from that service, its a development dependency which you would use to run locally during development. I think you don't want a "start" script there at all as Amplify would look in your public folder and serve the index.html file there.

Vue.js: Not Getting CSS Reference of External Component datetimepicker in the dist Folder

I have used an external component datetimepicker in my component and it works fine as shown below when I run the project.
But while building for production as web component to get the min.js files inside dist directory, not getting CSS reference of that external component datetimepicker in the received js files inside the dist directory. It does not render styles of the datetimepicker field. It is displaying like below. Is there any solution for that?
I have executed below command:
$ npm install vuejs-datetimepicker
And used below code for that
<td align="left">
<datetime format="DD-MM-YYYY h:i:s" width="280px" v-model="dateTime"></datetime>
</td>
import datetime from 'vuejs-datetimepicker';
export default {
components: {
datetime
}
}
And I used the command npm run build to build as web component.
Attaching my package file below:
{
"name": "ABC",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target wc-async --name common-apps
./src/App.vue",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vuejs-datetimepicker": "^1.1.13",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-unit-jest": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
I fixed this issue just by executing the command npm install style-loader css-loader --save in the terminal.

Vue Babel outputting incompatible code disregarding browserslist

I have a Vue CLI 3 project that I am building. The built code seems to disregard broswerslist. It outputs code that breaks Microsoft Edge regardless if I add Edge to browserslist or not.
The syntax that is being output is the parameter spread operator in a lambda like
(...x) => {}
This is unsupported by a certain version of Edge, and my project keeps outputting it !
These are some of my files:
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"await-mutex": "^1.0.2",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.15",
"json5-loader": "^1.0.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"popper.js": "^1.14.7",
"pretty-checkbox-vue": "^1.1.9",
"vee-validate": "^2.2.0",
"vue": "^2.6.9",
"vue-router": "^3.0.2",
"vuex": "^3.1.0",
"tiptap": "^1.14.0"
},
"devDependencies": {
"#types/lodash": "^4.14.123",
"#vue/cli-plugin-babel": "^3.5.1",
"#vue/cli-plugin-eslint": "^3.5.1",
"#vue/cli-plugin-typescript": "^3.5.1",
"#vue/cli-service": "^3.5.1",
"#vue/eslint-config-typescript": "^3.0.5",
"#types/jwt-decode": "^2.2.1",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"typescript": "^3.0.0",
"vue-template-compiler": "^2.6.9"
}
}
.browserslistrc
> 1%
last 2 versions
edge 15
not ie <= 8
babel.config.js
module.exports = {
presets: [
'#vue/app',
],
}
What I have tried:
Removing Typescript from project
Changing .browserslistrc with invalid browser to check if it's reading the file or not, and the build crashed because of browser not found (means it's reading the file).
Settings .browserslistrc to "ie 11", and it still outputs lambdas and spread operators.
The problem lies in two things combined.
Babel (at least by default) doesn't transpile imported libraries, hence any imported JS file that uses new syntax has a great chance it is kept as-is.
Bootstrap-Vue uses such syntax, and importing individual components can cause this problem.
Solution:
Import the whole of Bootstrap-Vue and Vue.use it in main.js