.js file extension not recognized in bundler for Typescript files

[ajwootto]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/affectionate-satoshi-xk5gqp

To Reproduce

1. Import a Typescript source file using the .js file extension required to conform with ES Modules syntax
2. next build
3. See error about "module not found"

Current vs. Expected behavior

• in order to write fully valid ES Module code, you are currently supposed to specify the file extension of the file you are importing
• Typescript decided that the file extension of a .ts import should be ".js" to reflect runtime import behaviour, so the current recommendation is to import Typescript files with .js extension in a project that must conform to ES modules spec (namely to run in Node properly)

current:

• following recommended import syntax results in a "module not found" error

expected:

• next should correctly resolve these imports

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.5-canary.17
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A


Done in 2.28s.

Which area(s) are affected? (Select all that apply)

App Router, TypeScript (plugin, built-in types)

Additional context

This is the same problem as reported in this issue:
#33056

which was closed as being a duplicate of a "discussion":
#32237

re-opening it as an issue since it's a bug in the build system that should be fixed

Some additional challenges with this:

• ES module 3rd party libraries that are imported into Next JS and used in Page router server functions like getServerSideProps are subject to working properly in the Node ESM resolver since that's what the Pages build system is using
• this means that those libraries must have .js extensions present in their source files in order to work correctly in Next
• the same restriction does not appear to apply to code imported in App Router, which I guess uses a different ESM resolver other than Node's. Files work either with or without that extension in 3rd party libs
• it's confusing when developing a Next library that the code must include .js extensions in order to work, while currently any application code must not include those extensions in order to work. It should work in both places.
• the .js extension isn't recognized in either App Router or Pages Router for serverside code

_NEXT-2779

[SanjoSolutions]

With Webpack this can be fixed with the following next.config.mjs:

/** @type {import("next").NextConfig} */
export default {
  webpack: webpackConfig => {
    webpackConfig.resolve.extensionAlias = {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
      '.cjs': ['.cts', '.cjs'],
      '.jsx': ['.tsx', '.jsx'],
    }

    return webpackConfig
  },
}