I'm trying to configure jest/babel to do react component testing in my app. So far I'm facing some difficulties, in imports.
It throws this error:
Here is my babel.config.json:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
],
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
]
}
I've trying adding "type": "module" in the package.json and it brings different problems upon itself. I would appreciate any help!
Related
This is a question similar to Why eslint consider class as variable in naming-convention rule?, but that one is pretty old and I see no consistency in the handling now.
When I statically import a class type then ESLint recognizes it as such and applies the class naming rule, for example:
import { PieGraphLayout } from import("../console.worker-types");
When I do this with a dynamic import, however, I get an error:
const { PieGraphLayout } = await import("../console.worker-types");
leads to:
Variable name PieGraphLayout must match one of the following formats: camelCase eslint#typescript-eslint/naming-convention
I have to suppress this warning, but would like to modify my ESLint rules instead, if possible. My current naming-convention rule is:
"#typescript-eslint/naming-convention": [
"error",
{
"selector": "default",
"format": [
"camelCase"
],
"filter": {
"regex": "^_",
"match": false
}
},
{
"selector": "class",
"format": [
"PascalCase"
]
},
{
"selector": "typeParameter",
"format": [
"PascalCase"
]
},
{
"selector": "enum",
"format": [
"PascalCase"
]
},
{
"selector": "enumMember",
"format": [
"PascalCase"
]
},
{
"selector": "typeAlias",
"format": [
"PascalCase"
]
},
{
"selector": "interface",
"format": [
"PascalCase"
],
"prefix": [
"I"
]
}
],
What needs to be changed so that ESLint no longer gives a warning for such dynamic imports?
You don't have defined formats for variable entities, and ESLint uses your default selector format, which is camelCase in the provided configuration.
To provide formats for a variable, please configure variable selector.
In your case, there should be something like
{
"selector": "variable",
"format": [
"PascalCase"
]
},
Here is a doc for all available selectors.
**I have next stylelint configuration:**
{
"extends": [
"stylelint-config-recommended",
"stylelint-config-recommended-less",
"stylelint-config-rational-order",
"stylelint-prettier/recommended"
],
"plugins": ["stylelint-order", "stylelint-less"]
}
In my app.less:
I have a app that created by react-native init command.
My app import websocket package which in turn require http package and cause error said "Unable to resolve module http".
i.e: myApp -> 3rd-module -> ws -> http
I try to work-around by install "#tradle/react-native-http", and added follow lines to my app's package json file:
"browser": { "http": "#tradle/react-native-http" },
"react-native": { "http": "#tradle/react-native-http" },
but it doesn't work.
I also try using babel-plugin-module-resolver but unluck either. Here is my .babelrc :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["module-resolver", {
"alias": {
"#tradle/react-native-http": "http"
}
}]
]
}
How to do alias for my case? I research to fixing this problem by using webpack configuration, but don't know where is the configure file. After google, i think project created by react-native init use metro config instead of webpack.
try
["module-resolver", {
"alias": {
"http":"#tradle/react-native-http"
}
}]
I'm using Webdriver IO as the e2e testing framework. But this autocomplete issue is really slowing me down. VS Code doesn't auto complete the global variable browser and it's methods.
.eslintrc
{
"extends": ["eslint:recommended", "standard"],
"parser": "babel-eslint",
"plugins": [
"mocha",
"webdriverio"
],
"env": {
"webdriverio/wdio": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4]
}
}
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"polyfill": false
}]
]
}
I think you can use TypeScript typings.
Add 2 dependencies to package.json:
"#types/node": "^8.5.2",
"#types/webdriverio": "^4.8.7",
Install them, reload project. If autocomplete does not yet works, create
tsconfig.json in root of your project:
{
"compilerOptions": {
"allowJs": true,
"outDir": "./.built/"
}
}
You don't need to use typescript compiler, it will just provide autocomplete. Continue writing your js code as usual.
But if you wish to use typescript, here is small beginner guide:
http://webdriver.io/guide/getstarted/configuration.html#Setup-TypeScript
I'd like to prevent src/config.js to be bundled in scripts/app-bundle.js
I saw that previously the syntax was:
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text",
"cloneya",
"dexie",
"jquery",
"jquery-ui",
"medium-editor-webpack",
"moment",
"polymer/mutationobservers",
"safe-json-stringify"
],
excludes: [
"config.js" // So our wildcard globbing doesn't include this config file
],
...
However the new syntax is different: aurelia.json:
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
],
"excludes" : [
"**/config.js"
]
},
My temptative 'exclude' statement doesn't do the trick
Solution is actually given on the GitHub page: https://github.com/aurelia/cli
Optionally, you can define an exclude list by setting the source
property to be an object containing both an include and exclude array
of patterns. This is helpful when you're trying to define multiple
bundles from your source code.
{
"name": "app-bundle.js",
"source": {
"include": [
"[**/*.js]",
"**/*.{css,html}"
],
"exclude": [
"**/sub-module/**/*",
]
}
},
{
"name": "sub-module-bundle.js",
"source": [
"**/sub-module/**/*",
]
}
Make sure you have version > 0.19.0