Cannot resolve imports with subpaths

[OnkelTem]

I cannot get it working with any subpath imports, e.g.

some-file.tsx:

import { item } from 'package/subpath'

leads to an error:

ESLint: Unable to resolve path to module 'package/subpath'.(import/no-unresolved)

At the same time, TypeScript works and doesn't find any issues.

ESLint config:

.eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  settings: {
    'import/extensions': ['.ts', '.tsx', '.mts', '.js', '.jsx', '.mjs'],
    'import/resolver': {
      typescript: true,
    },
  },
  plugins: ['@typescript-eslint', 'react-hooks', 'only-warn'],
  extends: ['airbnb', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'prettier'],

This is a part of package.json of package:

  "exports": {
    "require": "./dist/cjs/index.js",
    "import": "./dist/mjs/index.js",
    "default": "./dist/mjs/index.js"
  },
  "main": "./dist/cjs/index.js",
  "module": "./dist/mjs/index.js",
  "types": "./dist/types/index.d.ts",

ESLint: 8.x

[ljharb]

That's because we don't support exports yet - since resolve also doesn't. When resolve does, so will we.

Separately, your exports field there HAS no subpaths, so nothing should resolve a subpath anyways.

[zdm]

Just a question - I get similar error, but related to package imports:

import/no-unresolved, Unable to resolve path to module '#lib/result'.

Seems that package imports also not supported by the node resolver?

[ljharb]

@zdm yes, imports uses and depends on exports.

[zdm]

Webpack uses https://github.com/webpack/enhanced-resolve. It highly configurable and fully supports all possible features. Maybe it can replace current node resolver. (And current webpack resolver too)

[zdm]

Or use built-in possibilities: This will work for node projects, and will work better than handmade resolver.

const { createRequire } = require( "node:module" );
const url = require( "node:url" );

function resolve ( name, from ) {
    try {
        return createRequire( url.pathToFileURL( from ) ).resolve( name );
    }
    catch {}
}

[dahaca]

@ljharb hey! So would you recommend simply disabling the rule locally for those imports until exports is supported?

[ljharb]

@dahaca if you can't persuade the package maintainer to add main and be backwards compatible, then yes.

[dahaca]

@ljharb appreciate such a swift reply! Understood! ✌

Although I've checked the package.json of the library causing the lint error and it seems to be backwards compatible :/ Will disable the rule for those imports for now but out of curiosity would be glad if you are able to provide any more insight! I suppose it could also be caused by the fact that I am importing from a .mjs file...

[ljharb]

what subpath? that package doesn't have any subpaths available anyways - so you can't import anything but @pandacss/eslint-plugin or its package.json.

[dahaca]

@ljharb Yes, this is an unrelated error. I thought this have happened due to there being an another package under the @pandacss domain installed.

Including .mjs files in settings like so made the error go away! Thanks for your time :)

      "import/resolver": {
        typescript: {
          typescript: true,
          node: true,
          project: "./tsconfig.json",
        },
        node: {
          extensions: [".js", ".jsx", ".mjs"],
        },
      },

[maxhsu-da]

what about for imports? I have a import { useGetWallets } from '#hooks/investor/useGetWallets', and I'm getting the import/extension error

[ljharb]

@maxhsu-da imports support requires exports support first.

[JounQin]

Duplicate of https://github.com/import-js/eslint-plugin-import/issues/1810

Try https://github.com/import-js/eslint-import-resolver-typescript or https://github.com/un-ts/eslint-plugin-import-x.