Package "imports" field not supported?

[zdm]

Hi,
"imports" field in package.json not works for me.
My package.json:

...
    "imports": {
        "#index": {
            "browser": "./lib/index/browser.mjs",
            "node": "./lib/index.js"
        },
        "#lib/*": "./lib/*.js",
        "#resources/*": "./resources/*"
    },
...

When I am trying to build project with the webpack I get this error:

Error: Can't resolve '#index'

Webpack version: 5.36.0

My question:
Is this feature currently supported?
Do I need to perform some additional setup to make it work?

Thank you.

[alexander-akait]

For questions, please prefer to use Dicussions, thanks.

Yes, supported https://github.com/webpack/enhanced-resolve/blob/main/lib/ImportsFieldPlugin.js, please provide example how you got this problem.

[zdm]

I created minimal webpack project:

mkdir -p test/lib
cd test
npm init -f
npm i webpack webpack-cli
touch lib/index.js

package.json:

{
    "name": "webpack-imports",
    "version": "1.0.0",
    "type": "module",
    "imports": {
        "#index": {
            "browser": "./lib/index.js"
        }
    },
    "devDependencies": {
        "webpack": "^5.36.0",
        "webpack-cli": "^4.6.0"
    }
}

lib/main.js

import "#index";

Then run:

npx webpack build --entry ./lib/main.js

Error:

assets by status 126 bytes [cached] 1 asset
./lib/main.js 17 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./lib/main.js 1:0-16
Module not found: Error: Can't resolve '#index' in '/mnt/hgfs/projects/work/tmp/webpack-imports/lib'
resolve '#index' in '/mnt/hgfs/projects/work/tmp/webpack-imports/lib'
  using description file: /mnt/hgfs/projects/work/tmp/webpack-imports/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration

webpack 5.36.0 compiled with 1 error and 1 warning in 200 ms

[zdm]

Unclear what does this error means.
It should load index.js according to the imports field in package.json like nodejs do.

[alexander-akait]

From Node.js:

internal/modules/esm/resolve.js:250
  if (RegExpPrototypeTest(encodedSepRegEx, resolved.pathname))
                                                    ^

TypeError: Cannot read property 'pathname' of undefined
    at finalizeResolution (internal/modules/esm/resolve.js:250:53)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:86:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36)

[zdm]

It was minimal example for webpack only.
For node pls use this pacage.json:

{
    "name": "webpack-imports",
    "version": "1.0.0",
    "type": "module",
    "imports": {
        "#index": {
            "browser": "./lib/index.js",
            "node": "./lib/index.js"
        }
    },
    "devDependencies": {
        "webpack": "^5.36.0",
        "webpack-cli": "^4.6.0"
    }
}

[alexander-akait]

imports is not exports, no browser/node, issue here webpack/enhanced-resolve#290