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
Related
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.
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
In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source
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.
It’s been a couple of weeks that I’m working on a Vue js project Vuetify to be specific. I use npm run serve command to build and run a live server. it was working fine everything was okay but suddenly I run my project again and boom can’t building anymore it gets stuck 40% without throwing anything as a bug or an error. I wanna know guys if you had similar issue like mine or if you know how to troubleshoot this issue. thank in advance.
I'm using npm 6.9.0 , node v10.16.0 and vue 3.9.2
package.json
{
"name": "mycode",
"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.0",
"core-js": "^2.6.5",
"fuse.js": "^3.4.5",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.12.0",
"vue-router": "^3.0.3",
"vue-table-component": "^1.9.2",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"live-server": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"typescript": "^3.5.3",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.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"
]
}
Sometimes during the compiling process certain errors occur. For example say I have a component with a template that contains the following
<template>
<imagingheader></imagingheader>
<router-view ></router-view>
</template>
Now what is wrong with this picture?
There are two base elements in the template. During the compiling process this will prevent it from going any further and sadly the server does not start to display this error. Moving the two elements into a common div tag fixes the issue and moves the compling process from 40% to 100%.
Take some time and look through your code and see whether you will get a missing closing tag. It can be a missing , , ... etc.
Keep an eye on the first place the numbers pause and use that as a way to narrow down the problems you might face.
40% building 223/268 modules 45 active ...rders\List.vue?
I just ended up wasting 30 minutes on a similar issue, to find out that I had a merge (due to git pull) in progress and there were conflicted filed :/