Cannot find module 'filenamify/browser' or its corresponding type declarations.ts

[sagar-gavhane]

Hey @sindresorhus,

I'm new to this library and want to use filenamify in the TypeScript based React project. As per README.md file, I'm importing filenamify from filenamify/browser but it throwing a Cannot find module 'filenamify/browser' error.

Is there any workaround to this issue?

[sindresorhus]

This is a problem with your build tool. It needs to support the exports property:

filenamify/package.json

Lines 14 to 17 in 43f3f32

	"exports": {
	".": "./index.js",
	"./browser": "./filenamify.js"
	},

[DavidSchillinger]

I don't intend to resurrect this issue, I just want to provide some more context for anyone visiting, which I hope is ok:

TypeScript is working on support for exports: microsoft/TypeScript#33079

That said, as a workaround, the only way I've been able to get it to work in my TS projects is to:
import filenamify from 'filenamify/filenamify';

I only do this because I understand the risks.
e.g. I don't get to complain if the path to it changes in a non-major version bump and breaks my setup!

Thank you for filenamify 😃

[crucialfelix]

Granted, this may be something not correctly configured with my build tool or with ts-node, but I am unable to import this in a Node TypeScript project

❯ /usr/bin/env ts-node "/Users/crucialfelix/github/scanner/cli.ts"
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/crucialfelix/github/scanner/node_modules/filenamify/index.js from /Users/crucialfelix/github/scanner/src/lib/storage.ts not supported.
Instead change the require of index.js in /Users/crucialfelix/github/scanner/src/lib/storage.ts to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/crucialfelix/github/scanner/src/lib/storage.ts:10:38)
    at Module.m._compile (/Users/crucialfelix/.nvm/versions/node/v16.6.2/lib/node_modules/ts-node/dist/index.js:704:29)

[Primajin]

I could get it to run dirtily 🙈

with

// @ts-ignore TS2307: Cannot find module 'filenamify/browser' or its corresponding type declarations.
import filenamify from "filenamify/browser";

and for the tests:

// src/__mocks__/filenamify/browser/index.js
module.exports = {
  filenamify: () => jest.fn(),
};

[hseager]

You can add this to your tsconfig to point the import to the correct type definitions:

{
  "compilerOptions": {
    "paths": {
      "filenamify/browser": ["./node_modules/filenamify/filenamify.d.ts"]
    }
  }
}