Vue Babel outputting incompatible code disregarding browserslistHow do I generate sourcemaps when using babel and webpack?babel vs babel-core vs babel-runtime“unexpected token import” in Nodejs5 and babel?How to ditch Babel from Vue build chain?Webpack not extracting CSS into files from vendor vue componentsgulp-babel with babel-preset-env ignores browserslistImporting SCSS file in Vue SFC components without duplication with WebpackUse babel for transpiling vue template instead of bubleVue-jest can't find babelhow to use exclude with babel-loader in vue cli3?
Do the 26 richest billionaires own as much wealth as the poorest 3.8 billion people?
C++20 with u8, char8_t and std::string?
Why is quantum gravity non-renormalizable?
List of Implementations for common OR problems
Non-inverting amplifier ; Single supply ; Bipolar input
Is it possible that Curiosity measured its own methane or failed doing the spectrometry?
Story about two rival crews terraforming a planet
HTTPmodule or similar for SharePoint online
Who are the police in Hong Kong?
Magento 2: I am not aware about magneto optimization. Can you please share the steps for this?
What is the point of using the kunai?
What could a Medieval society do with excess animal blood?
Does the North Korea Kim Jong Un have an heir?
What is the difference between a historical drama and a period drama?
Why did moving the mouse cursor cause Windows 95 to run more quickly?
When you're given a degree sequence, what is the method to draw a graph which has that degree sequence?
Did Snape really give Umbridge a fake Veritaserum potion that Harry later pretended to drink?
Phrase origin: "You ain't got to go home but you got to get out of here."
Olive oil in Japanese cooking
Sleepy tired vs physically tired
Term for a character that only exists to be talked to
Isn't "Dave's protocol" good if only the database, and not the code, is leaked?
What is a "tittering order"?
What do you call the angle of the direction of an airplane?
Vue Babel outputting incompatible code disregarding browserslist
How do I generate sourcemaps when using babel and webpack?babel vs babel-core vs babel-runtime“unexpected token import” in Nodejs5 and babel?How to ditch Babel from Vue build chain?Webpack not extracting CSS into files from vendor vue componentsgulp-babel with babel-preset-env ignores browserslistImporting SCSS file in Vue SFC components without duplication with WebpackUse babel for transpiling vue template instead of bubleVue-jest can't find babelhow to use exclude with babel-loader in vue cli3?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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
.browserslistrcwith 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.
vue.js babeljs microsoft-edge vue-cli-3 browser-support
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
add a comment |
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
.browserslistrcwith 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.
vue.js babeljs microsoft-edge vue-cli-3 browser-support
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
1
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values intsconfig.jsonintargetoption.
– Max Sinev
Mar 25 at 19:02
My target is es5
– Seaskyways
Mar 25 at 19:17
add a comment |
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
.browserslistrcwith 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.
vue.js babeljs microsoft-edge vue-cli-3 browser-support
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
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
.browserslistrcwith 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.
vue.js babeljs microsoft-edge vue-cli-3 browser-support
vue.js babeljs microsoft-edge vue-cli-3 browser-support
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
edited Mar 27 at 19:51
Seaskyways
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
asked Mar 25 at 17:57
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
1,7463 gold badges19 silver badges34 bronze badges
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
1
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values intsconfig.jsonintargetoption.
– Max Sinev
Mar 25 at 19:02
My target is es5
– Seaskyways
Mar 25 at 19:17
add a comment |
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
1
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values intsconfig.jsonintargetoption.
– Max Sinev
Mar 25 at 19:02
My target is es5
– Seaskyways
Mar 25 at 19:17
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
1
1
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values in
tsconfig.json in target option.– Max Sinev
Mar 25 at 19:02
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values in
tsconfig.json in target option.– Max Sinev
Mar 25 at 19:02
My target is es5
– Seaskyways
Mar 25 at 19:17
My target is es5
– Seaskyways
Mar 25 at 19:17
add a comment |
1 Answer
1
active
oldest
votes
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.useit inmain.js
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55343883%2fvue-babel-outputting-incompatible-code-disregarding-browserslist%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.useit inmain.js
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
add a comment |
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.useit inmain.js
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
add a comment |
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.useit inmain.js
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
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.useit inmain.js
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
answered Mar 27 at 20:13
SeaskywaysSeaskyways
1,7463 gold badges19 silver badges34 bronze badges
1,7463 gold badges19 silver badges34 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55343883%2fvue-babel-outputting-incompatible-code-disregarding-browserslist%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I just created new vue-cli project - arrow funcs and rest operator are transpiled correctly. I see typescript in your package.json. Does your project contain some ts code?
– Max Sinev
Mar 25 at 18:41
Yes it does, could it be the culprit ?
– Seaskyways
Mar 25 at 18:51
1
Yes, ts code does not go through babel and does not rely on your browser list, it has own predefined values in
tsconfig.jsonintargetoption.– Max Sinev
Mar 25 at 19:02
My target is es5
– Seaskyways
Mar 25 at 19:17