Resolve error typescript with invalid interface loaded as resolver

I’m having ESLint in my project and getting an error Resolve Error: typescript with invalid interface loaded as resolver : import-no-restricted-paths when I add the rule import/no-restricted-paths

tsconfig.json

{
    "include": [
        "./src/**/*",
        "./generated/**/*"
    ],
    "compilerOptions": {
        "resolveJsonModule": true,
        "target": "es5",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es6"
        ],
        "downlevelIteration": true,
        "jsx": "react",
        "declaration": false,
        "sourceMap": true,
        "baseUrl": "src",
        "outDir": "./dist/js",
        "paths": {
            "@generated/*": ["../generated/*"],
            "api": ["lib/api"],
            "api/*": ["lib/api/*"],
            "asset/*": ["lib/asset/*"],
            "base/*": ["lib/base/*"]
        },
        // Rules
        "noImplicitAny": false,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "isolatedModules": true
    }
}

.eslint.json

module.exports = {
    env: {
        browser: true
    },
    settings: {
        "import/parsers": {
            "@typescript-eslint/parser": [".ts", ".tsx"]
        },
        "import/resolver": {
            "typescript": {
                paths: "./tsconfig.json",
                alwaysTryTypes: true
            }
        },
    },
    parser: "@typescript-eslint/parser",
    parserOptions: {
        tsconfigRootDir: ".",
        sourceType: "module",
        project: "./tsconfig.json"
    },
    extends: [
        "plugin:import/recommended",
        "plugin:import/typescript"
    ],
    plugins: [
        "@typescript-eslint",
        "import"
    ],
    overrides: [
        {
            files: [
                "src/_migration/**"
            ],
            rules: {
                "import/no-restricted-paths": [
                    "error",
                    {
                        basePath: "./src",
                        zones: [
                            { target: "./_migration", from: "./", except: ['./_migration'] }
                        ],
                    },
                ]
            }
        },
    ],
    rules: {
        "import/no-unresolved": "off",
        "@typescript-eslint/typedef": [
            "error",
            {
                parameter: true
            }
        ]
    }
};

[Regression] eslint-module-utils@2.3.0 causes invalid «Resolve error: webpack with invalid interface loaded as resolver» #1269

See minimal reproduction case with script and pre-run output at ronjouch/repro-eslint-bug-cra .

As demonstrated by the demo script, reverting to 2.2.0 inside eslint-plugin-import ( cd node_modules/eslint-plugin-import && npm install eslint-module-utils@2.2.0 ) fixes the issue.

Reproduced and fixed on many machines (node 10.15.0 & npm 6.7.0 on Linux, node 8 on macOS, and in a CI Docker). I’m available for more debug info if necessary.

The text was updated successfully, but these errors were encountered:

@ronjouch what version of eslint-import-resolver-webpack are you using? I don’t see it referenced in either the package-lock.json or the package.json .

what version of eslint-import-resolver-webpack are you using? I don’t see it referenced in either the package-lock.json or the package.json .

@benmosher thanks for the fast reply 👍 . Uh, from what I understand, I’m not using eslint-import-resolver-webpack , neither in the minimal scenario, nor in the production web app I extracted it from.

Here’s an npm ls | grep eslint for the production web app:

Does that make sense to not depend on eslint-import-resolver-webpack ? Did we miss migration steps at some point? Should I add it as dependency? If so, is new configuration needed?

Note: all that stuff is pretty obscure to me, so sorry for the noise. I just happen to be the engineer at $WORK most comfortable narrowing down on the broken package to make our build pass again. My point of view is simple: 2.3.0 broke the build and pinning 2.2.0 fixes it. Is this a regression, or was it already ineffective/useless and it just started being vocal about it?

Sounds like it was silently failing over to the node resolver before. Makes sense it would look like a regression 🙂

If you don’t have the webpack resolver installed, you have two solid options:

• remove this block from your package.json:

• install eslint-import-resolver-webpack and see if that works better.

The former is fewer dependencies so I’d try that first, but up to you. Is a little strange you’d end up with the config pointing to it without it in your dependencies.

@benmosher makes sense! Removing the settings block worked 🙂 (and happily started complaining about errors accumulated over the last months 😄 ).

Is a little strange you’d end up with the config pointing to it without it in your dependencies.

Yup, traced to a bad initial commit copy-pastaed / badly adjusted from an example.

Источник

TypeScript With Invalid Interface Loaded As Resolver

TypeScript uses an invalid interface to load itself. This type of error is often associated with the use of a language that is not compatible with it. It can occur in a program using the NodeJS programming language or in any other programming language. It can also occur in a script written in another language. In this article, we will discuss the problem and offer some possible solutions. The first step in the resolution of this error is to find the exact cause of this problem.

This error occurs when a library contains an outdated typescript version. If the error is caused by an older version of the language, you may want to upgrade your browser. This will help you fix the problem in the future. In the meantime, here are some methods you can use to avoid this problem: (1) VSCode’s format on save feature. (2) Prettier, eslint, and Husky.

If you’re using a browser that doesn’t support TypeScript, you might want to upgrade. In particular, try using Firefox’s watch mode. This mode caches the files it needs, and prevents it from being downloaded to your computer. This method is not supported by older versions of this browser. Instead, update your browser to the latest stable version to fix the issue. You can also try a different type of browser, such as Chrome or Firefox.

As an alternative to eslint, you can also use prettier or VSCode’s format on save feature. Alternatively, you can use a scripting tool like Husky to run your Git commands. This method may be time consuming and may not be appropriate for your project. Aside from this, some projects don’t require typescript code checking. This method is not suitable for all types of code.

Using watch mode allows you to avoid this error and keep a clean code structure. In addition, this option makes it easier to maintain code in an OO environment, because every file access will be cached. And every time you need to perform a file operation, you can set a cache before you execute. And when you’re done, you’ll get a stack trace of the entire project.

To resolve this error, you can either use a different type of interface or use a watch mode. This mode will allow you to configure the interface of your application and prevent it from crashing. If you have two different interfaces, you can simply rename the files. But if you’d rather have a single, then watch mode is the best option. With this method, you can create a new class based on your existing one.

To resolve this error, use watch mode. The watch mode will let you use watch mode. This mode will enable you to create a nested tree of promises. As a result, a single promise will be loaded with every other one. A chain of promises is an arbitrary set of objects. A single resolution will always cause the other to crash. This method will be asynchronous, but it will allow you to work with it without a break.

You can use watch mode to prevent this error. It will automatically purge the cache of files that are modified. When you use watch mode, you should not worry about the old version of the browser as it will not be affected. This is because the watch mode will prevent the code from being corrupted. It will prevent errors from occurring if it isn’t working in the same way as the previous one.

To resolve this error, use VSCode. Its format on save feature will make your code more readable. You can also use eslint, prettier, and Husky to run your Git commands. But this process will take some time, and some projects might not need it. Then, you can try other solutions that are more efficient. When you need more time to check your code, you can check the code with VSCode.

Источник

Ver 3.2.2 Resolve error: typescript with invalid interface loaded as resolver about eslint-import-resolver-typescript HOT 1 CLOSED

• feat: add `externsionAlias` option
• docs: document `enhanced-resolve` options
• [HELP] Can not get plugin to work with path aliases HOT 7
• feat: better cache support via hashobject for example HOT 7
• import/resolver with rules from import/errors and using @typescript-esint/parser causes VSCode to hang while saving files HOT 5
• synckit dependency breaks usage of this plugin with Yarn PnP in VSCode HOT 1
• try `resolve.exports`
• Incorrect path resolved when monorepo project contains multiple tsconfig.json HOT 1
• not working with js files HOT 2
• Performance degradation since version 3.1.0 HOT 1
• Adapt `get-tsconfig`’s `TsConfigJsonResolved` to TypeScript’s `ParsedCommandLine`
• `no-cycle` not working with import resolver HOT 3
• statSync without `throwIfNoEntry: false` causes great performance impact when processing typescript imports HOT 4
• question: resolution order of `project` HOT 1
• Invitation to move to official `eslint-community` org HOT 4
• iconv-lite not found in imported namespace HOT 6
• «Unable to resolve path to module» in monorepo, after Angular 13 upgrade HOT 7
• Typescript NodeNext path alias with extension HOT 3
• Incorrect «engines» declaration — not actually working with node 12 HOT 1
• declare module and import/no-unresolved HOT 1

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Источник

Вложенный псевдоним TS Config для абсолютного пути не работает

Я пытаюсь настроить псевдонимы путей в моем tsconfig.json для приложения React в комплекте с Vite. Вот соответствующая часть моего tsconfig.json :

Единственная проблема связана с NestedFolder . Когда я импортирую таким образом, все работает:

Однако вложенный псевдоним не работает:

Я хотел бы сделать вложенные компоненты, потому что у меня есть несколько папок, которые вложены 3-4 уровня, и было бы неплохо иметь более четкое представление о моем импорте. Есть ли способ сделать это?

4 ответа

Вам необходимо установить плагин vite-tsconfig-paths для настройки псевдонимов путей. используя TypeScript и Vite. Если ничего не изменилось и вы используете VSCode, обязательно перезапустите сервер TypeScript, нажав Ctrl+Shift+P или Cmd+Shift+P , введя restart , а затем выбрав команду: TypeScript: Restart TS server

Принятый ответ не сработал для меня. Я обнаружил, что мне нужно установить следующие пакеты:

npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript

Затем добавьте следующие конфигурации, важным компонентом которых являются строго определенные пути псевдонимов:

Я думаю, что это можно улучшить, согласовав псевдонимы между .eslintrc и vite.config, поэтому псевдонимы нужно определять только один раз, используя тактику, подобную той, что определена здесь: https://stackoverflow.com/a/68908814/14198287

Если vite-tsconfig-paths не работает. Убедитесь, что вы не установили v4.0.0 . В этой версии есть ошибка.

Источник

Resolve error typescript with invalid interface loaded as resolver

When a path includes # , it seems that enhanced-resolve replaces it with # (https://github.com/webpack/enhanced-resolve#escaping). Unfortunately further up this causes a failure in eslint-plugin-import :

Why this library?

I could report this to enhanced-resolve , but their escape seems to be well documented and by design. Happy to report there if you think that’s the best option.

I could report this to eslint-plugin-import , however the problem depends on details resolver implementation, and eslint-plugin-import seems resolver-agnostic.

Proposed solution

Path returned by enhanced-resolve can be post-processed to replace # with # , which is the correct representation of the filesystem path.

Created at 19 hours ago

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency size-limit to ^8.1.1
• fix(deps): update dependency globby to ^13.1.3
• chore(deps): update dependency @changesets/cli to ^2.26.0
• chore(deps): update dependency prettier to ^2.8.3
• chore(deps): update dependency size-limit-preset-node-lib to ^0.2.0
• chore(deps): update dependency type-coverage to ^2.24.1
• chore(deps): update dependency typescript to ^4.9.4
• chore(deps): update pnpm to v7.25.0
• fix(deps): update dependency enhanced-resolve to ^5.12.0
• fix(deps): update dependency get-tsconfig to ^4.3.0
• fix(deps): update dependency is-core-module to ^2.11.0

Источник

I’m having ESLint in my project and getting an error Resolve Error: typescript with invalid interface loaded as resolver : import-no-restricted-paths when I add the rule import/no-restricted-paths

tsconfig.json

{
    "include": [
        "./src/**/*",
        "./generated/**/*"
    ],
    "compilerOptions": {
        "resolveJsonModule": true,
        "target": "es5",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es6"
        ],
        "downlevelIteration": true,
        "jsx": "react",
        "declaration": false,
        "sourceMap": true,
        "baseUrl": "src",
        "outDir": "./dist/js",
        "paths": {
            "@generated/*": ["../generated/*"],
            "api": ["lib/api"],
            "api/*": ["lib/api/*"],
            "asset/*": ["lib/asset/*"],
            "base/*": ["lib/base/*"]
        },
        // Rules
        "noImplicitAny": false,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "isolatedModules": true
    }
}

.eslint.json

module.exports = {
    env: {
        browser: true
    },
    settings: {
        "import/parsers": {
            "@typescript-eslint/parser": [".ts", ".tsx"]
        },
        "import/resolver": {
            "typescript": {
                paths: "./tsconfig.json",
                alwaysTryTypes: true
            }
        },
    },
    parser: "@typescript-eslint/parser",
    parserOptions: {
        tsconfigRootDir: ".",
        sourceType: "module",
        project: "./tsconfig.json"
    },
    extends: [
        "plugin:import/recommended",
        "plugin:import/typescript"
    ],
    plugins: [
        "@typescript-eslint",
        "import"
    ],
    overrides: [
        {
            files: [
                "src/_migration/**"
            ],
            rules: {
                "import/no-restricted-paths": [
                    "error",
                    {
                        basePath: "./src",
                        zones: [
                            { target: "./_migration", from: "./", except: ['./_migration'] }
                        ],
                    },
                ]
            }
        },
    ],
    rules: {
        "import/no-unresolved": "off",
        "@typescript-eslint/typedef": [
            "error",
            {
                parameter: true
            }
        ]
    }
};

TypeScript uses an invalid interface to load itself. This type of error is often associated with the use of a language that is not compatible with it. It can occur in a program using the NodeJS programming language or in any other programming language. It can also occur in a script written in another language. In this article, we will discuss the problem and offer some possible solutions. The first step in the resolution of this error is to find the exact cause of this problem.

This error occurs when a library contains an outdated typescript version. If the error is caused by an older version of the language, you may want to upgrade your browser. This will help you fix the problem in the future. In the meantime, here are some methods you can use to avoid this problem: (1) VSCode’s format on save feature. (2) Prettier, eslint, and Husky.

If you’re using a browser that doesn’t support TypeScript, you might want to upgrade. In particular, try using Firefox’s watch mode. This mode caches the files it needs, and prevents it from being downloaded to your computer. This method is not supported by older versions of this browser. Instead, update your browser to the latest stable version to fix the issue. You can also try a different type of browser, such as Chrome or Firefox.

As an alternative to eslint, you can also use prettier or VSCode’s format on save feature. Alternatively, you can use a scripting tool like Husky to run your Git commands. This method may be time consuming and may not be appropriate for your project. Aside from this, some projects don’t require typescript code checking. This method is not suitable for all types of code.

Using watch mode allows you to avoid this error and keep a clean code structure. In addition, this option makes it easier to maintain code in an OO environment, because every file access will be cached. And every time you need to perform a file operation, you can set a cache before you execute. And when you’re done, you’ll get a stack trace of the entire project.

To resolve this error, you can either use a different type of interface or use a watch mode. This mode will allow you to configure the interface of your application and prevent it from crashing. If you have two different interfaces, you can simply rename the files. But if you’d rather have a single, then watch mode is the best option. With this method, you can create a new class based on your existing one.

To resolve this error, use watch mode. The watch mode will let you use watch mode. This mode will enable you to create a nested tree of promises. As a result, a single promise will be loaded with every other one. A chain of promises is an arbitrary set of objects. A single resolution will always cause the other to crash. This method will be asynchronous, but it will allow you to work with it without a break.

You can use watch mode to prevent this error. It will automatically purge the cache of files that are modified. When you use watch mode, you should not worry about the old version of the browser as it will not be affected. This is because the watch mode will prevent the code from being corrupted. It will prevent errors from occurring if it isn’t working in the same way as the previous one.

To resolve this error, use VSCode. Its format on save feature will make your code more readable. You can also use eslint, prettier, and Husky to run your Git commands. But this process will take some time, and some projects might not need it. Then, you can try other solutions that are more efficient. When you need more time to check your code, you can check the code with VSCode.