ajitid / fzf-for-js

Do fuzzy matching using FZF algorithm in JavaScript
https://fzf.netlify.app
BSD 3-Clause "New" or "Revised" License
887 stars 21 forks source link

Error [ERR_REQUIRE_ESM]: require() of ES Module #85

Closed Vanderscycle closed 3 years ago

Vanderscycle commented 3 years ago

Hey,

Thank you for making this npm package. I use fzf all the time in neovim and so I wanted to add the search ease and speed given by fzf into my ts projects. My issue at the moment is simple, I can't get it to run and I don't know why. I am working on a data structure hence why I am currently using ts-node, before implementing inside a svelte app.

Describe the bug Can't compile the js code

To Reproduce test code

import { Fzf } from 'fzf'

function fastFuzzySearch(key: string) {
  let fzf = new Fzf(['Hello', 'there', 'General', 'kenobi'])
  const answer = fzf.find(key)
  return answer
}

console.log(fastFuzzySearch('hel'))

Expected behavior TS compiles and run

Additional context my package.json

{
  "name": "Tri-DS-implementation",
  "version": "1.0.0",
  "description": "",
  "main": "src/trieXtended.ts",
  "scripts": {
    "watch": "tsc --watch",
    "dev": "nodemon",
    "tests": "jest --env=node --colors --coverage"
  },
  "devDependencies": {
    "@types/jest": "^27.0.2",
    "jest": "^27.2.3",
    "nodemon": "^2.0.13",
    "ts-jest": "^27.0.5",
    "ts-node": "^10.2.1",
    "typescript": "^4.4.3"
  },
  "dependencies": {
    "fzf": "^0.4.1"
  }
}

Environment Browser name and version: using ts-node to develop a node env 16.10

[nodemon] 2.0.13
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: js,ts,json
[nodemon] starting `ts-node ./src/fzfTest.ts`
sh: line 1: cls: command not found
/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/index.js:698
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/henri/Documents/portal/trieDataStructure/node_modules/fzf/dist/fzf.umd.js from /home/henri/Documents/portal/trieDataStructure/src/fzfTest.ts not supported.
fzf.umd.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 rename fzf.umd.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 /home/henri/Documents/portal/trieDataStructure/node_modules/fzf/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.require.extensions.<computed> [as .js] (/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/index.js:698:20)
    at Object.<anonymous> (/home/henri/Documents/portal/trieDataStructure/src/fzfTest.ts:3:15)
    at Module.m._compile (/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/index.js:704:29)
    at Object.require.extensions.<computed> [as .ts] (/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/index.js:706:16)
    at main (/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/bin.js:237:16)
    at Object.<anonymous> (/home/henri/Documents/portal/trieDataStructure/node_modules/ts-node/dist/bin.js:350:5) {
  code: 'ERR_REQUIRE_ESM'
}
[nodemon] app crashed - waiting for file changes before starting...

Any help is appreciated thanks

ajitid commented 3 years ago

Heya! You are trying to use FZF as a CommonJS module, but FZF exports itself as an ES and a UMD module. If you don't care about this module business, here are the steps you could follow to resolve the issue:

  1. Add a line "type": "module" to package.json
  2. Open tsconfig.json. You would see a line mentioning "module": "commonjs". Change it to "module": "ES2020".
  3. Cancel both watch and dev commands and run them again

Just for reference, here is the tsconfig.json that I used:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
ajitid commented 3 years ago

Hopefully that solves it. Closing this issue for now.

Vanderscycle commented 3 years ago

Hey, sorry the notification went unnoticed for me. Yeah, the changes made fzf work.