ERR_UNSUPPORTED_DIR_IMPORT in web3-eth-abi/lib/esm/coders/encode.js with node >18

[CelestialCrafter]

Expected behavior

web3-eth-abi/lib/esm/coders/encode.js should be able to import from web3-eth-abi/lib/esm/coders/base

Actual behavior

web3-eth-abi/lib/esm/coders/encode.js errors with ERR_UNSUPPORTED_DIR_IMPORT in nodejs versions above or equal to 18

Steps to reproduce the behavior

1. install nodejs 18
2. npm install on an environment that has web3-eth-abi/lib/esm/coders/encode.js included
3. invoke something from web3-eth-abi/lib/esm/coders/encode.js

Logs

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/web3-eth-abi/lib/esm/coders/base' is not supported resolving ES modules imported from /app/node_modules/web3-eth-abi/lib/esm/coders/encode.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:320:17)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:300:10)
    at [kOnMessage] (node:internal/worker:311:37)
    at MessagePort.<anonymous> (node:internal/worker:212:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:757:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///app/node_modules/web3-eth-abi/lib/esm/coders/base'
}

Node.js v18.18.2
10.69 error Command failed with exit code 1.
10.69 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

Node: v18.18.2
Yarn: 1.22.19
web3-eth-abi: 4.1.2
OS: ubuntu 22.04

[CelestialCrafter]

sorry, apparently this error happens on versions below 18, checking which one works now

[CelestialCrafter]

looks like the earliest version this error was:

node v14.2.0 commit
web3-eth-abi v4.1.3 commit

[remixzy]

same error here, any workaround guys?

*I downgraded to 1.9.0 to solve the problem for now, had the error even installing the 4.0.3

[jacksonrayhamilton]

I think the problem is that the code is written using the CommonJS style of importing an “index.js” file (which it’s calling a “directory import”):

import { encodeTuple } from './base';

However, Node.js is not resolving import specifiers like that any more (at least not without optional flags): https://nodejs.org/docs/latest-v18.x/api/esm.html#mandatory-file-extensions

Mandatory file extensions

A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified.

This behavior matches how import behaves in browser environments, assuming a typically configured server.

The workaround for Node 18 users is to start your program with a flag:

$ node --experimental-specifier-resolution=node program.js

I think the fix for the library is to import the module using the full file path instead:

import { encodeTuple } from './base/index.js';

[kmlcnclk]

This problem is not happening because of you. I was getting same error and I delete ^ on package version.

from "web3": "^4.1.1-dev.86f0cdb.0",
to "web3": "4.1.1-dev.86f0cdb.0",

So, You can use previous versions. I am sure somebody will fix it later.

[luu-alex]

Thanks for pointing out this issue, @jacksonrayhamilton if you would like to contribute and add this edit in a PR that would be great. otherwise one of our devs will help get on this.

[FiskPay]

try this:

https://github.com/web3/web3.js/blob/4.x/packages/web3-eth-abi/src/coders/base/array.ts ->line 21 ->
from - import { decodeParamFromAbiParameter, encodeNumber, encodeParamFromAbiParameter } from '.';
to - import { decodeParamFromAbiParameter, encodeNumber, encodeParamFromAbiParameter } from './index.ts';

https://github.com/web3/web3.js/blob/4.x/packages/web3-eth-abi/src/coders/base/tuple.ts ->line 22 ->
from - import { decodeParamFromAbiParameter, encodeParamFromAbiParameter } from '.';
to - import { decodeParamFromAbiParameter, encodeParamFromAbiParameter } from './index.ts';

https://github.com/web3/web3.js/blob/4.x/packages/web3-eth-abi/src/coders/encode.ts -> line 20 ->
from - import { encodeTuple } from './base';
to - import { encodeTuple } from './base/tuple.ts';

***Caution about the extentions (.ts and .js). I have tried this on the .js version of web3 4.2.0

[luu-alex]

PR has been merged for this, you can use this for now until we release a patch. thank you everyone web3@4.2.1-dev.a0d6730.0