vue 3 unexpected token ... on chrome versions below 60 - vue.js

So I am trying to launch my app below chrome 60 version. But I get this error:
App is built on vue 3. And also this is my .babelrc:
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-modules-commonjs",
"#vue/babel-plugin-jsx"
],
Thought it was about object spread operator but I have plugin for that. Have any ideas what can be wrong?

Related

React native - Jest failed to parse error

I'm trying to test my react-native expo app using jest and testing library. When running npm test i get the following error:
jets config inside package.json:
"jest": {
"testEnviroment": "jsdom",
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"presets": [
"ts-jest"
]
},
I've been stucked in this error for a lot of time and i tried some other configurations or solutions but nothing seems to work. if you can help me i would appreciate it.

How do I handle the new isCustomElement setup for using web components in Vue 3 when unit testing with Jest

I am trying to write unit tests for my Vue 3 app using web components.
I have Jest configured containing transform options:
// ...
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
// ...
I need to use isCustomElement which is now required at compilation time, so I’ve added options based on the proposed solution in Vue3 docs like I did in webpack. I played around with it in the transform and global options. And also tried adding it to my babel.config.
// ...
"transform": {
".*\\.(vue)$": ["vue-jest", {
compilerOptions: {
isCustomElement: tag => tag === 'my-custom-component'
}
}],
"^.+\\.js$": "babel-jest"
},
// ...
However it’s still throwing a Vue warn when running tests:
[Vue warn]: Failed to resolve component: my-custom-component.
Any ideas how to make isCustomElement work with Jest? I am at a loss as to what I need to set up to get rid of the console warnings and properly render the web components. In Vue 2 I just had to add them to setupFiles directly.

SCRIPT errors with IE 11 when using Babel and Vue.js

We're having a problem with our Vue.js application on Windows 10 / IE 11.
The application was giving SCRIPT1003: Expected ':' until we updated out babel.config to the following:
module.exports = {
presets: [
[
'#vue/cli-plugin-babel/preset',
{
targets: {
'ie': '11'
}
}
]
]
}
At which point the error is now SCRIPT1002: Synxax Error chunk-vendors.js (11365, 9311) which appears to relate to the vuelidate node module.
It appears that I need to exclude the above package, but I dont understand where the syntax should go.
It's also likely that there will be multiple packages that I need to exclude.
The base project was built using vue-cli 4.4.1 and the config files haven't moved far from the stock install
Do you want to transpile the modules? You could use exclude property in webpack.config.js or babel.config.js to transpile modules.
You could change this line:
...
exclude: /node_modules/,
...
into this:
...
exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...
If you need to exclude more than one module you can extend the exception list like so:
exclude: /node_modules\/(?![module1|module2])/
For more information, you could refer to this link.

vue-jest error: "SyntaxError: Unexpected token <" caused by `import PictureInput from 'vue-picture-input'`

I'm new to Jest and vue-jest. Just trying to get basic tests working.
In my bootstrap.js file (this file will, ideally, be loaded for all tests), I attempt to register the 3rd party component vue-picture-input:
import PictureInput from 'vue-picture-input';
Vue.component('picture-input', PictureInput);
(This is part of a standard file (bootstrap.js) file I use for my entire project.) But Jest gives me the following error:
Details:
/home/vagrant/Code/Patrol/node_modules/vue-picture-input/PictureInput.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
^
SyntaxError: Unexpected token <
85 | // ...
86 |
> 87 | import PictureInput from 'vue-picture-input';
| ^
88 | Vue.component('picture-input', PictureInput);
I've taken a look at similar questions on Stack Overflow for this error, but I can't seem to decipher what is going on or what I need to change. Seems like this answer addresses a similar issue, but I don't know how to adapt the solution for this particular issue (or if it's even close, to be honest).
Currently, the "jest" section of my package.json file reads:
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"\\.(css|scss|sass|less)$": "<rootDir>/tests/js/config/cssLoader.js"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
}
}
Not sure where to go from here...
Update: Found the solution on Github.
The solution was to add the following snippet to package.json in the "jest" section:
"transformIgnorePatterns": [
"node_modules/(?!vue-picture-input)"
]
Now it works fine.
I was just getting this error because I accidentally put a . on the beginning of my jest.config.js file, so Jest was forgetting the transform mappings:
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': 'vue-jest',
},'
In this case, the config file wasn't registered properly but did exist.

Q: CodeceptJS "unknown error": call function result missing 'value'

This is my Test
Feature('Test');
Scenario('test something', (I) => {
I.amOnPage("");
I.see("Welcome");
I.fillField('j_username', 'xxxxxx');
I.wait(3);
});
This is my codeceptjs.JSON
{
"tests": "asd/*_test.js",
"timeout": 10000,
"output": "./output",
"smartwait":"1000",
"helpers": {
"WebDriverIO": {
"url": "http://localhost:8080/xxxx/",
"browser": "chrome"
}
},
"include": {
"I": "./steps_file.js"
},
"bootstrap": false,
"name": "yenideneme"
}
I am try CodeceptJS with Webdriverio helper for end-to-end tests. Connect to the server and I.see("") passed. But added I.fillField() taken this Error=
test something:
unknown error: call function result missing 'value'
I try to update chrome and chromedriver but not worked.
And other project taken Error=
2) e2e
"after each" hook: finalize codeceptjs for "welcome Page #fristBlank":
unknown error: call function result missing 'value'
It may be related to an issue with Chrome 65. After upgrading from Chrome 64, I started seeing the same issue. Downgrading to the version 64 should help temporarily.
A long-term solution is making sure that Chromedriver is upgraded to version 2.36, which is supposed to work with Chrome 65. However, a simple "npm install chromedriver" may not be sufficient. Your Selenium may still try to load the old version. The actual solution depends on your environment setup.
Got the same problem yesterday after a chrome update(v65).
Uninstalled and downloaded version 63 from this site.
http://www.geocities.jp/ecvcn/exam/chrome_installer.html
Problem Solved.