"module" in package.json not working for ESM import

[andreash]

Hi Lukas - great rework with a great API, congrats. I tried to import this in my React / TS project and it would only work when i remove the "type": "module" in project.json. Otherwise it gives me

ERROR in ../../node_modules/@headless-tree/core/lib/esm/index.js 28:0-45 Module not found: Error: Can't resolve './core/build-static-instance' in 'C:\Users\andreashe\Documents\Development\InSystem\node_modules\@headless-tree\core\lib\esm' Did you mean 'build-static-instance.js'? BREAKING CHANGE: The request './core/build-static-instance' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. @ ./src/components/Organization/Organization.tsx 8:0-118 101:15-36 101:38-54 101:56-74 101:76-94 @ ./src/components/HomeGrid/HomeGrid.tsx 28:0-60 105:44-56 @ ./src/components/Baseplate/Baseplate.tsx 25:0-48 195:58-66 198:17-25 @ ./src/components/Baseplate/index.tsx 4:0-28 4:0-28 @ ./src/App.tsx 21:0-51 47:612-621 @ ./src/index.tsx 8:0-24 16:102-105

It basically seems to require ".js" extensions in the imports with "type"="module".

My own project.json is as follows:
{ "name": "@globe/client", "version": "0.1.0", "private": true, "sideeffects": false, "main": "src/index.tsx", "type": "module", "scripts": { "version:bump": "npm run version:bump", "version:patch": "npm version patch", "start": "webpack serve --config webpack/webpack.dev.cjs", "build": "webpack --config webpack/webpack.prod.cjs", "build.standalone": "webpack --config webpack/webpack.prod.standalone.cjs", "build:cdn": "webpack --config webpack/webpack.prod.cdn.cjs", "extract:texts": "formatjs extract --ignore ./src/**/*.d.ts --out-file ./lang/dev.json --id-interpolation-pattern [sha512:contenthash:base64:6] ./src/**/*.{ts,tsx}", "sync:texts": "node ./sync_messages.cjs ./lang", "compile:texts": "formatjs compile-folder ./lang ./src/assets/lang && rimraf ./src/assets/lang/dev.json" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "dependencies": { "@blueprintjs/core": "^5.19.0", "@blueprintjs/docs-theme": "^5.3.32", "@blueprintjs/select": "^5.3.20", ... "react": "^18.3.1", "react-chartjs-2": "^5.3.0", "react-dom": "^18.3.1", "react-grid-layout": "^1.5.0", "react-hook-form": "^7.56.1", "react-intl": "^6.7.0", "react-router-dom": "^7.5.1", "react-select": "^5.10.0", "react-table": "^7.8.0", "sanitize-filename": "^1.6.3", "slate": "^0.112.0", "slate-history": "^0.113.1", "slate-react": "^0.112.1", "styled-components": "^6.1.17", "uuid": "^10.0.0", "websocket": "^1.0.35" }, "devDependencies": { "@babel/preset-env": "^7.26.9", "@babel/preset-react": "^7.26.3", "@babel/preset-typescript": "^7.27.0", "@formatjs/cli": "^6.6.4", "@formatjs/ts-transformer": "^3.13.34", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16", "@types/country-flag-icons": "^1.2.2", "@types/d3": "^7.4.3", "@types/d3-graphviz": "^2.6.10", "@types/file-saver": "^2.0.7", ... "style-loader": "^4.0.0", "ts-loader": "^9.5.1", "webpack": "^5.99.6", "webpack-cli": "^6.0.1", "webpack-dev-server": "^5.2.1", "webpack-merge": "^6.0.1" } }

[lukasbach]

Hi @andreash, thanks for the report! Can you share your tsconfig.json (it looks like you are using TypeScript), and also the import code line how you import from headless tree? That would help me to try to reproduce the issue. Thanks!

[andreash]

Hi @lukasbach - here comes my tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./build",
        "target": "es2020",
        "module": "ESNext",
        "lib": [
            "dom",
            "DOM.iterable",
            "es2020"
        ],
        "esModuleInterop": true,
        "jsx": "react-jsx",
        "allowJs": true,
        "moduleResolution": "bundler",
        "strict": true, 
        "noImplicitAny": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "resolveJsonModule": true,
        "composite": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
    },
    "include": [
        "./src/**/*.ts",
        "./src/**/*.tsx",
        "./src/**/*.json"
, "../shared/orgmodel/src/lib/colors.ts"    ],
    "exclude": [
        "build",
        "webpack",
        "node_modules",
    ]
}

and I import the package like so, right out of your simple example:

import {
    hotkeysCoreFeature,
    selectionFeature,
    syncDataLoaderFeature,
} from "@headless-tree/core";

When I tweat package.json in node_modules/@headless-tree/core/package.json and delete the line with "type":"modul" everything works fine.

Attached is a minimalistic project showing the problem

headlesstree.zip

[lukasbach]

Thanks for all the details. Just as a heads up, I might have to push this back a bit since I fell sick a few days ago and will be on vacation soon, and might not be able to fix this until early June, does the workaround that you mentioned work for you until then?

[andreash]

No problem. If I find time in my project, I might think about a solution as well.

[youcandanch]

For what it's worth, this can end up causing issues with Node getting crossed up and using the CJS expecting it's ESM:

error - Error [ERR_REQUIRE_ESM]: require() of ES Module /@headless-tree/core/lib/cjs/index.js 
@headless-tree/react/lib/cjs/assistive-tree-description.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in node_modules/@headless-tree/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Just wanted to throw it out there. Deleting the "type": "module" from package.json fixes this as well.

[destructodev]

Hi @lukasbach,

I'm also running into this issue when using Vitest. The error (Cannot read file 'node_modules/tsconfig.json'.ts) is preventing all my unit tests from running, not just the ones directly importing headless-tree. It seems the tsconfig.json in the package is extending a ../../tsconfig.json that doesn't exist, which causes the TypeScript transform in Vitest to fail globally.

As a workaround, I tried removing "type": "module" in the package’s package.json, which helped partially, but many tests still fail because of this config issue.

Would you consider providing a fully valid tsconfig.json that doesn’t rely on external paths?

[lukasbach]

I've made some changes to how the exports are defined in the package json. The change is released as snapshot in version 0.0.0-20250611231952, and can be pulled with npm i @headless-tree/core@snapshot @headless-tree/react@snapshot, if someone wants to try it out. I initially wanted to fix it properly by just migrating to pure ESM, but also don't want to drop commonjs support, so I hope I was able to fix it in a way that retains support for both.

@destructodev tests running vitest or any other testing framework shouldn't really depend on libraries build config or source files, and tbh I'm a bit confused that you get this error from vitest. Vitest should just use the prebuild library files the same way how the bundler for your production app will use those, and ignore any tsconfig or similar files in node_modules folders.

[andreash]

Seems to work now. Upgraded to 1.2 and got no issues. Thanks!

[lukasbach]

Great to hear! I actually made another change to the bundling logic in the last snapshot version since I got a similar issue report, if you don't mind, could you also test with the now latest snapshot version if it still works in your project? (0.0.0-20250726131941) There shouldn't be any errors from that, so you should be able to just pull that version into your project and trigger a test build, but if it fails for some reason, I would love to know about that to make sure that no regression is created from my last change. Thanks!

[lukasbach]

I'll close this for now, I hope no more issues regarding come up. Please reopen or create a new ticket if any ESM-related issues come up again. Thanks!