Implicit indexes are being written to output paths

[emmkimme]

Hi,

plugin is used to append 'index' to the module path of a require/import.
Adding 'index' to the path prevents browserify to work properly.

For instance, we have a local package module1 with such package.json

{
  "name": "module1",
  "browser": {
    "./env": "./env/index-browser.js",
    "./ipc": "./ipc/index-browser.js",

I have a module module2 using module1

import { ipcPubSub, IpcPubSub } from 'module1/ipc';
import { GetElectronEnvironment } from 'module1/env';

I remap module1 location to another path in 'module2 tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "module1/*": ["./build/module1/*"],
        },
    }
}

I compile and get

const env_1 = require("../../module1/env/index");
const ipc_1 = require("../../module1/ipc/index");

Browserify do not try to look at the module1 package as you have an explicit file 'index' mentioned in the require. Then it does not map module1/env to module1/env/index-browser.js and the generated bundle is wrong and most of the time failed to be generated as referencing api not compatible with a browser. I do not try with webpack but the resolution strategy is supposed to be the same.

Could it be possible to keep the path untouched, else, I'm afraid, such strategy, based on package.json 'browser' field, always failed.

Thanks

Issue summary

(Addendum by @nonara)

In cases like require('#path1'), where this resolves to /path1/index.js, the compiled output is require('/path1/index'). It should more preferably be require('/path1'), opting not to write the implicit index filename portion of the path.

As mentioned by OP, this seems to specifically also cause breaking issues with npm's browser config.

[emmkimme]

I did this ugly fix in \utils\resolve-path-update-node.js

        // Remove filename or extension if implicit
        if (extension && implicitExtensions.includes(extension))
            filePath = maybeGetExplicitFileNameAndExtension(filePath, extension);
            // filePath = filePath.slice(0, -extension.length) + maybeGetExplicitExtension(filePath, extension);
        return filePath[0] === "." || general_utils_1.isURL(filePath) ? filePath : `./${filePath}`;
    }
    // require('module1/myconfig.json');    => module1/myconfig.json
    // require('module1/file.bundle')       => module1/file.bundle.js or module1/file.bundle.ts, ...
    // require('module1/file.bundle.js')    => module1/file.bundle.js
    // require('module1')                   => module1/index.d.ts or module1/custom.d.ts (package.json)
    function maybeGetExplicitFileNameAndExtension(filePath, resolvedExtension) {
        const moduleBasename = path_1.default.basename(moduleName);
        // The resolution may add an extension, so test without or with
        if ((path_1.default.basename(filePath, resolvedExtension) === moduleBasename) || (path_1.default.basename(filePath) === moduleBasename)) {
            return filePath.slice(0, -resolvedExtension.length) + maybeGetExplicitExtension(filePath, resolvedExtension);
        }
        // Likely Typescript fallback to a *.d.ts
        else {
            return path_1.default.dirname(filePath);
        }
    }

[nonara]

Thanks for the report! Fixed in v2.2.4

Let me know if you can get me a basic repro for the other issue, and I'll have a look. My guess is you only need a similar project directory structure with two or three example files.

[emmkimme]

If you refer to the outdir issue, project is quite complex and have to manage legacy structures. No promise but will try to provide a a sample. And thanks a lot for the prompt fix !.

[nonara]

@emmkimme If it helps, I don't think the code is part of the issue. Probably can reproduce with the same relative source dir, project (tsconfig) dir, and output dir file structure.

[emmkimme]

Hi,
I did not check but we may face an issue when the module behind is not exporting a default index.js but a specific file.
It is very common to have a package.json with such declaration:

{
  name: mylib
  main: lib/main.js
  browser: lib/main-browser.js
}

when doing an require('mylib'), Typescript will return mylib/lib/main.js (and not index.js), so your code may fail.
I would suggest to find a way to stick to the original declaration perhaps doing the transformation by yourself and compare with the typescript resolution if base path are the same.
Regards

[nonara]

@emmkimme Thank you for pointing that out. That makes the situation a bit trickier! I believe I have a resolution in the works. I'll create an issue for this.

[nonara]

You were right about custom index files. Thanks again. Should be sorted in v3.0