I'm trying to use absolute path import form my custom modules and VSCode has no prob recognising them. The problem is that when I run firebase deploy which runs first eslint I get errors.
3:24 error Unable to resolve path to module '#src/stripe/lib/secret-key' import/no-unresolved
I have tried to set this
"import/resolver": {
"typescript": {}
}
in the eslintrc.js but I just get more and more errors. I have also tried to install some plugins but no luck.
Here is the line which throws the error.
import { stripe } from '#src/stripe/lib/secret-key'
tsconfig
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"#src/*": [
"./src/*"
]
}
},
"compileOnSave": true,
"include": [
"src"
]
}
eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
],
parser: "#typescript-eslint/parser",
parserOptions: {
project: "tsconfig.json",
sourceType: "module",
},
plugins: [
"#typescript-eslint",
"import",
],
rules: {
"#typescript-eslint/adjacent-overload-signatures": "error",
"#typescript-eslint/no-empty-function": "error",
"#typescript-eslint/no-empty-interface": "warn",
"#typescript-eslint/no-floating-promises": "error",
"#typescript-eslint/no-namespace": "error",
"#typescript-eslint/no-unnecessary-type-assertion": "error",
"#typescript-eslint/prefer-for-of": "warn",
"#typescript-eslint/triple-slash-reference": "error",
"#typescript-eslint/unified-signatures": "warn",
"constructor-super": "error",
eqeqeq: ["warn", "always"],
"import/no-deprecated": "warn",
"import/no-extraneous-dependencies": "error",
"import/no-unassigned-import": "warn",
"no-cond-assign": "error",
"no-duplicate-case": "error",
"no-duplicate-imports": "error",
"no-empty": [
"error",
{
allowEmptyCatch: true,
},
],
"no-invalid-this": "error",
"no-new-wrappers": "error",
"no-param-reassign": "error",
"no-redeclare": "error",
"no-sequences": "error",
"no-shadow": [
"error",
{
hoist: "all",
},
],
"no-throw-literal": "error",
"no-unsafe-finally": "error",
"no-unused-labels": "error",
"no-var": "warn",
"no-void": "error",
"prefer-const": "warn",
},
settings: {
jsdoc: {
tagNamePreference: {
returns: "return",
},
},
},
};
Any idea how to make this work?
Related
I need to execute seed file and when I execute the file this error appears. How can I solve it?
ERROR: Cannot use import statement outside a module
This is my tsconfig.js:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2019",
"lib": [
"dom",
"es2019"
],
// "baseUrl": "./src",
"moduleResolution": "node",
"outDir": "dist",
"sourceMap": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"./types",
"./node_modules/#types"
],
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
".vscode"
]
}
And this is my seeds:
'use strict';
import { Player } from "../../app/models/player";
module.exports = {
up: async (queryInterface, Sequelize) => {
return Player.bulkCreate(
[
{ name: "Inbal", email: "inbal#test.co.il",phone: "1111" },
{ name: "Tal", email: "tal#test.co.il",phone: "2222" },
{ name: "Sivan", email: "sivan#test.co.il" ,phone: "3333"}
],
{ hooks: true, individualHooks: true, validate: true }
);
},
down: async (queryInterface, Sequelize) => {
await queryInterface.bulkDelete("players", null, {});
}
};
When I run npx sequelize-cli-ts db:seed:all the error appears.
Either use require instead of import in your seed file or you could also try to set
"type": "module"
in your package.json
I have two projects:
App
A library (to share code)
On my app, I have one test using directly the source of my npm package library
import { mockAddress } from '#xxx/library/src/entities/address';
Issue
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.
What I tried
I tried to add the folder of my library to transformIgnorePatterns
transformIgnorePatterns: [
'<roodDir>/node_modules/(?!vee-validate/dist/rules)',
'<roodDir>/node_modules/(?!#xxx/library/src)',
],
I tried to add transform
'\\.(ts|js)x?$': 'ts-jest'
EDIT 1
transform: {
'vee-validate/dist/rules': 'babel-jest',
'\\.(ts|tsx)?$': 'ts-jest',
},
transformIgnorePatterns: [
'node_modules/(?!vee-validate/dist/rules|#xxx/lib/)',
],
jest.config
module.exports = {
globals: {
'ts-jest': {
isolatedModules: true,
},
},
verbose: true,
preset: '#vue/cli-plugin-unit-jest/presets/typescript-and-babel',
collectCoverage: false,
collectCoverageFrom: [
'**/entities/**/*.ts',
'**/services/**/*.ts',
'**/store/**/*.ts',
'**/ui/components/**/*.{js,vue}',
'**/ui/views/**/**.{js,vue}',
'!src/main.ts', // No need to cover bootstrap file
'!**/store.ts',
'!**/*.mock.ts',
'!**/*.types.ts',
'!**/index.ts',
],
transform: {
'vee-validate/dist/rules': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest',
},
transformIgnorePatterns: [
'<roodDir>/node_modules/(?!vee-validate/dist/rules)',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
testMatch: [
'**/*.(spec|test).(js|jsx|ts|tsx)',
],
roots: [
'<rootDir>/src',
],
testEnvironmentOptions: {
// Allow test environment to fire onload event
// See https://github.com/jsdom/jsdom/issues/1816#issuecomment-355188615
resources: 'usable',
},
reporters: [
'default',
[
'jest-trx-results-processor',
{
outputFile: './coverage/test-results.trx',
defaultUserName: 'user name to use if automatic detection fails',
},
],
],
};
tsconfig.json
{
"compilerOptions": {
"strictNullChecks": false,
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest",
"vuetify",
"vue-meta"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"es6",
"es2017",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx",
],
"exclude": [
"node_modules"
]
}
im using airbnb-eslint along with babel-plugin-module-resolver. I get this error in every js file where i've used an alias to import.
{
"extends": ["plugin:import/errors", "plugin:import/warnings", "airbnb", "airbnb/hooks", "prettier", "plugin:prettier/recommended", "prettier/react", "plugin:react/recommended"],
"plugins": ["import", "react", "jsx-a11y", "react-hooks", "babel", "module-resolver"],
"rules": {
"react/jsx-filename-extension": [
2,
{
"extensions": [".js", ".jsx"]
}
],
"react/prop-types": 0,
"implicit-arrow-linebreak": 0,
"prefer-destructuring": 1,
"react/no-unused-state": 1,
"react/destructuring-assignment": 1,
"react/no-array-index-key": 1,
"react/jsx-key": [2],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-no-duplicate-props": [2],
"react/jsx-uses-vars": [2],
"react/jsx-uses-react": [2],
"react/jsx-no-undef": ["error", { "allowGlobals": true}],
"react/no-direct-mutation-state": [2],
"react/require-optimization": [1],
"react/require-render-return": [2],
"jsx-a11y/img-has-alt": [0],
"jsx-a11y/img-redundant-alt": [2],
"no-nested-ternary": "off",
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
"no-underscore-dangle": ["error", { "allowAfterThis": true }],
"no-unused-expressions": ["error", {
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}],
"no-use-before-define": [
"error",
{ "functions": true, "classes": true, "variables": false }
],
"import/imports-first": ["error", "absolute-first"],
"import/no-unresolved": 0,
"import/newline-after-import": "error",
"import/prefer-default-export": 0,
"import/no-cycle": [2, { "maxDepth": 1, "ignoreExternal": true }],
"import/no-absolute-path": [2, { "esmodule": false, "commonjs": false, "amd": false }],
"prettier/prettier": ["error", {}, {
"usePrettierrc": true
}],
"quotes": [
"error",
"single",
{ "avoidEscape": true, "allowTemplateLiterals": false }
],
"max-len": ["error", {"code": 205, "ignoreUrls": true}],
"no-tabs": ["error", {"allowIndentationTabs": true}],
"babel/arrow-parens": [0, "as-needed"],
"babel/no-unused-expressions": 1,
"babel/valid-typeof": 1,
"module-resolver/use-alias": 2
},
"globals": {
"window": true,
"document": true,
"localStorage": true,
"FormData": true,
"FileReader": true,
"Blob": true,
"navigator": true
},
"env": {
"es2020": true,
"node": true,
"browser": true
},
"settings": {
"react": {
"version": "16.13.1"
},
"import/resolver": {
"babel-module": {
"root": ["."],
"alias": {
"#assets": "./src/assets",
"#config": "./src/config",
"#constants": "./src/constants",
"#hooks": "./src/hooks",
"#sharedComponents": "./src/sharedComponents",
"#commonActions": "./src/app/CommonActions",
"#pages":"./src/app/Pages",
"#utils": "./src/utils"
}
},
"node": {
"root": ["."],
"extensions": [
".js",
".jsx"
]
}
}
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
This error does not come when using on mac..... only when using Linux/Windows. Due to this error eslint stops working in VSCode.
Error: ESLINT Error: ESLint configuration in .........eslintrc is invalid: - Unexpected top-level property "import/extensions".
Try adding root: true, as this will stop eslint looking for Global configs outside of your project
I have file of types:
// #flow
export type RouteT = {
api: string,
method: string,
route: string
}
And estlint throwing error 'RouteT' is not defined.eslint(no-undef).
What is wrong?
My eslint config is:
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"plugins": [
"prefer-arrow",
"flowtype"
],
"env": {
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"classes": true
},
"sourceType": "module"
},
"rules": {
"flowtype/define-flow-type": 0,
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"eol-last": [
"error",
"always"
],
"prefer-const": "error",
"prefer-arrow-callback": 1,
"comma-dangle": [
"error",
"always-multiline"
],
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"no-else-return": "error",
"no-tabs": 0,
"no-var": "error",
"radix": "error",
"no-multiple-empty-lines": "error",
"brace-style": [
"error",
"1tbs"
],
"no-multi-spaces": [
"error"
],
"semi": [
"error",
"never"
],
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"no-console": 0
},
"globals": {
"logMsg": true
}
}
I don't understand what is wrong. Other types like string, number works correctly.
How can I fix it?
Thank you.
I have the following imports in my file:
import axios from "axios";
import lodash from "lodash";
import PropTypes from "prop-types";
import React from "react";
import renderInCustomHtmlTag from "react-render-custom-html-tag";
I am using v5.9.0 however for some reason I am getting an error for line 3 even though it appears to be alphabetical order.
My eslint is as follows:
{
"env": {
"browser": true,
"commonjs": true,
"es6" : true,
"jquery": true,
"node": true
},
"extends": [
"eslint:all",
"plugin:react/recommended"
],
"globals": {
"$cgx": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"import",
"jsx-a11y",
"react"
],
"rules": {
"indent": ["error", 2],
"max-len": [
"error",
{
"code": 120
}
]
}
}
The issue is probably the capital letters. It seems to be because they have a lower ASCII value A = 65, a = 97.
https://eslint.org/docs/2.0.0/rules/sort-imports