Skip to main content
SimilarExport ZIP
100%

Issue for path cli resolving when migrating CommonJS to ES6

✓ Published0🌍 Public
TThomasG77
Last edited Sep 23, 2022
Created on Sep 23, 2022

This example tracks a path-resolution error that occurs when migrating a command-line tool from CommonJS to ES6 modules. It shows the same `require('..')` call working in CommonJS while its ES6 equivalent, `import {parse} from '../index.js'`, fails with `ERR_MODULE_NOT_FOUND` because the ES6 resolver does not search the `lib` directory. The visualization documents the failing command, the package.json configuration that sets `"main": "./lib"`, and the proposed fix of writing the import as `'../lib/index.js'` instead. The data comes directly from the user’s error trace and file contents.

AI-generated description

Path issue when migrating CommonJS to ES6

Context: migrating to ES6 syntax because some upcoming deps ES6 based (want to avoid transpiling)

Command used to fail

Root of the repo myrepo then running

In CommonJS cli

./bin/cli.js < myinput => working

With migrated ES6 version, same command and get the following error

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/myhome/git/myrepo/index.js' imported from /home/myhome/git/myrepo/bin/cli.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Could solve issue with import {parse} from '../lib/index.js' instead of import {parse} from '../index.js' as my main entry point is in lib/index.js but I do not like to not understand why CommonJS syntax can solve the path to lib and ES6 can't. FYI, CommonJS syntax was const {parse} = require('..')

Content of bin/cli.js file

Syntax in bin/cli.js (CommonJS)

const {parse} = require('..')

Syntax in bin/cli.js (ES6)

import {parse} from '../index.js'

package.json section content

package.json section in CommonJS

  "main": "./lib",
  "type": "module",
  "bin": {
    "mybinaryalias": "bin/cli.js"
  },

ES6 case

  "main": "./lib",
  "exports": "./lib", //Tried adding exports
  "type": "module",
  "bin": {
    "mybinaryalias": "bin/cli.js"
  },

Similar vizzes

Loading thumbnail…

Native ES6 Modules Test

This example tests native ES6 module support in browsers without a bundler. It imports a constant from `bar.js` and logs it using `console.log`, while also demonstrating an import map that aliases `./utils.mjs` to an inline data URL for a logging function. The code uses the native `type="module"` script tag and the browser’s import map API, with a React starter link for comparison.

CCurran Kelleher
60% match
Loading thumbnail…

Issue with geobucket package

This example demonstrates a reproducible issue with the geobuckets package, where importing the `jenksBuckets` function and running it on a small array of numbers produces an `ERR_MODULE_NOT_FOUND` runtime error. The problem stems from the compiled JavaScript in `dist/src/index.js` missing explicit `.js` extensions in its relative import statements for classifiers like `arithmeticProgression`. The code uses the `jenksBuckets` API from geobuckets 0.0.3, with data processed through a TypeScript file compiled via `tsc` to ES2022 modules, then executed with Node.js.

TThomasG77
57% match
Loading thumbnail…

Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

This example shows how Babel’s default interop behavior can make ES6 module imports behave unexpectedly, producing a value where the spec would yield `undefined`. The code defines `export.js` with a default export object, then in `module-b.js` imports a named `x` via `import {x} from './module-a'`. With default Babel settings, `console.log(x)` outputs `8`, because Babel sets both `module.exports` and `exports["default"]`. The example contrasts this with vanilla ES6, where the import would fail, and shows the explicit double export needed for spec-compliant behavior.

RRestuta
54% match
Loading thumbnail…

Gist b1b8262cf9aa34d7d4a1724f262868a1

This example shows a terminal-based error message from a Node.js project setup using the choo framework and the Bankai build tool. The code walks through creating a project directory, installing Bankai as a dev dependency, and configuring npm scripts for starting, building, and inspecting the app. When the user runs `npm start`, the system fails with a module resolution error, as the browser-resolve module cannot locate the choo package path, illustrating a common dependency installation pitfall. The visible API is the npm command-line interface and the package.json script configuration.

TTBD
53% match
Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado
53% match
Loading thumbnail…

Gist e9ca6a4ec4fe6c3bee98

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

HHypercubed
52% match
Loading thumbnail…

Importing D3 Function Using ES6

A red SVG canvas demonstrates ES6 module imports in D3 v6, loading the library from UNPKG and styling the backdrop with `d3.select` and `style`. The example highlights how to use `import` statements for D3 functions while rendering a fixed 960×500 viewport, with `index.html` linking the script and bundled JavaScript.

Gguinessjulie
52% match
Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules and dependencies are handled within an HTML page, highlighting the contrast between traditional script tags and ES6 module imports. It shows the console output of a string concatenated from variables exported across separate files, including `GetRekt.js` and `lmfao.js`, using named exports. The code uses ES6 `import` and `export` statements, which are bundled by Vizhub’s internal Rollup process when the file is named `index.js`. It visualizes the concept of topological sorting for script dependencies, though the actual rendering is limited to a plain HTML text display.

JJaga-droid
51% match