I am using webdriverio v7.5.7. While writing test, browser keyword not getting identified. It is auto correcting to Bhxbrowser. Any idea ?
I also face the same problem but found the solution on their official site.
You need to create jsconfig.json file and save it in your project folder.
Mocha:
{
"compilerOptions": {
"types": [
"node",
"webdriverio/sync",
"#wdio/mocha-framework"
]
}
}
Cucumber:
{
"compilerOptions": {
"types": [
"node",
"webdriverio/async",
"#wdio/cucumber-framework"
]
}
}
Reference to the solution:
https://webdriver.io/docs/autocompletion/#visual-studio-code-vscode
Related
I have an application created using the create-react-app.
I need to disable one rule from the default CRA Lint rules:
"react-hooks/exhaustive-deps": 0
After checking all of the resources about the topic and I'm still failing to disable that rule. I made an .env file with EXTEND_ESLINT=true
and I've included the following in my .eslintrc in the root directory
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"rules": {
"react-hooks/exhaustive-deps": 0
}
}
]
}
}
EDIT based on the comments suggestions:
Aditionally, moving the .eslintrc conents to package.json is not working either.
Package.json
"eslintConfig": {
"extends": [
"react-app",
"shared-config"
],
"rules": {
"react-hooks/exhaustive-deps": 0
}
},
Am i missing something ? Please advice if possible :)
General jist:
import Image from '#/assets/default-profile-picture.svg'
//ERROR: Cannot find module '#/assets/default-profile-picture.svg'.Vetur(2307)
I have spent the better part of today trying to find a solution to this. I know there are a lot of other posts like this one, but they are all outdated (all over a year old).
I've just generated a clean Vue CLI app, and still have the same issue.
I'm using Vue CLI Version 4.2.3, and just attempted using Vue CLI Version 4.3.1, but ran into the same issue.
I have checked that the file is in assets.
I have checked that the filename is spelled correctly.
I have a feeling this is a webpack issue, as require() would not work when called using typescript.
I have tried creating vue.config.js and manually setting the path for assets.
Project setup configuration:
Features: Babel, TS, Router, ESLint
not class-style syntax
Babel used alongside Typescript
No history mode for router
eslint with error prevention only
Lint on save
Configs placed in package.json.
Error in Component.vue
<script lang="ts">
import Vue from 'vue'
/* Cannot find module '#/assets/default-profile-picture.svg'.Vetur(2307) */
import Image from '#/assets/default-profile-picture.svg'
export default Vue.extend({
components: {
},
props: [
'employeeImage',
'employeeName',
'employeeAge',
'employeeSalary'
],
data () {
return {
marked: false,
result: [],
name: this.employeeName,
age: this.employeeAge,
salary: this.employeeSalary
}
},
computed: {
compClasses: function () {
return {
marked: this.marked
}
},
imageDefault: function () {
if (this.employeeImage === '') {
console.log('employee image empty: ' + this.employeeImage)
return '#/assets/default-profile-picture.svg'
} else {
console.log('employee image set: ' + this.employeeImage)
return this.employeeImage
}
}
}
})
</script>
Typescript Config
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"/src/**/*.*",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
What am I doing wrong?
Thanks in advance!
Please keep this in mind, that this answer is not a solution but more like a work-around for this issue by the time this question has been asked/answered for vue-svg-loader(#vue/cli Version: 4.2.3 and 4.3.1).
You can use absolute path instead of using # to reference the file when you want to import .vue components. Here is an example:
Instead of this:
Read more about this issue and any possible solutions on official repository for this issue on GitHub:
Typescript Cannot find module '#/assets/svg/register.svg?inline' #92
Typescript does not support svg files.
Create a svg.d.ts file in your project source folder with the following content:
declare module '*.svg';
and restart your editor
I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
Description of the project: My project is downloading to node_module via package.json
Package.json
....
dependencies:{
....
"#myllc/application-core": "git+ssh://git#bitbucket.org/myllc/application-core.git",
"#myllc/application-shared":"git+ssh://git#bitbucket.org/myllc/application-shared.git",
}
....
Gotting error when doing "npm build":
ERROR in ./node_modules/#myllc/application-core/index.ts Module
build failed: Error:
/var/www/frontend-skeleton/node_modules/#myllc/application-core/index.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property. The missing file
seems to be part of a third party library. TS files in published
libraries are often a sign of a badly packaged library. Please open an
issue in the library repository to alert its author and ask them to
package the library using the Angular Package Form at
(https:// goo.gl/jB3GVv).
This appear after upgrade from Angular4 to Angular5:
Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/#types"
]
}
}
I tried to add
"include": [
"./node_modules/#myllc/**/*"
]
but there appear same error at deeper folder .ts file. Also founding
https://github.com/angular/angular-cli/issues/8284
but nothing solved this error.
What is the solution?
The solution is found in index.ts is not part of the compilation. #8284 by tapaz1 :
2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file.
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}