Next.js: Webpack won't resolve absolute imports to root level index.js files + Hot-dev-client warning

[mattcarlotta]

Bug report

Describe the bug

When aliasing folders, Webpack won't resolve root level index.js files.

Doesn't resolve:

import "~store";

Resolves:

import "~store/index";

To Reproduce

Steps to reproduce the behavior:

1. Create a jsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "baseUrl": "src",
    "paths": {
      "~store/*": ["store/*"]
    }
  }
}

1. Create an IIFE in an index.js file within src/store

(() => console.log("Hello"))();

1. Attempt to import the file within a page file:

import "~store";

export default () => <h1>Test Page</h1>

Results in:

If you change the import to include index, then it works:

import "~store/index";

export default () => <h1>Test Page</h1>

Results in:

Expected behavior

Webpack should automatically resolve root-level index.js imports.

System information

• OS: LMDE 4
• Version of Next.js: v9.4.0
• Version of Node.js: 10

Other

Possibly unrelated to the above, but I also found a warning being thrown from hot-dev-client when changing and saving the Test Page text to Test (and vice-versa) for some reason:

[Timer]

We'll look into this! I opened a PR to clarify those console messages you were seeing: #12745.

[PeterWolfframm]

I have got the same issue.

[timneutkens]

Verified with tsc that the config is working as expected based on your reproduction.

yarn tsc        
yarn run v1.21.1
$ /Users/timneutkens/projects/sandbox/hello-hello/node_modules/.bin/tsc
pages/index.tsx:1:23 - error TS2307: Cannot find module '~design-system'.

1 import Something from '~design-system'
                        ~~~~~~~~~~~~~~~~


Found 1 error.

error Command failed with exit code 1.

With this config:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~design-system/*": [
        "components/design-system/*"
      ]
    }
  }
}

I think it's a misconception on how the paths key works.
If you give the paths config ~design-system/* is only matches ~design-system/something (because /* in your matching pattern) and never matches ~design-system.

If you want ~design-system to resolve the solution is to also add a pattern for that exact match:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~design-system/*": [
        "components/design-system/*"
      ],
      "~design-system": [
        "components/design-system/index"
      ]
    }
  }
}

Then it resolves correctly 👍

[mattcarlotta]

Hmmm 🤔, perhaps the jsconfig.js config is not quite a drop-in replacement for the babel-plugin-module-resolver since the plugin will automatically alias root-level index.js files.

If this feature doesn't land in 9.4.1, then adding a note to the documentation about importing aliased root-level index.js files should be included.

On that note, this issue has been mentioned before (with several claiming working solutions):
#26859

[Timer]

Happy to take a docs update.

[timneutkens]

If this feature doesn't land in 9.4.1, then adding a note to the documentation about importing aliased root-level index.js files should be included.

We can't add features that TypeScript doesn't support as I just mirrored the implementation that TypeScript has. And we'd diverge from that type checking will always fail with no resolution for that.

The correct way to handle it is like I said just adding another entry.
That's a good thing btw as it speeds up resolving of that path.