bug: `moduleResolution` is not respected

[jgroth]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

3.2.0

Current Behavior

I have a library that is used by my component and the library has sub modules that is using the new exports syntax in package.json. My component is importing it something like this

import { foo } from 'my-lib/foo`;

To get it to work I have set moduleResolution in tsconfig.json to node16/nodenext, but when I build my project I get an error saying

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.tsx:3:21
           Cannot find module 'my-lib/foo' or its corresponding type declarations.

      L2:  import { myLib } from 'my-lib';
      L3:  import { foo } from 'my-lib/foo';

[28:31.4]  build failed, watching for changes... in 3 ms

VSCode can find the module when I set moduleResolution to node16, and I can run the TypeScript compiler manually and it will compile, but it seems Stencil is not respecting the moduleResolution setting in tsconfig.json

Expected Behavior

No build errors. Stencil should use the moduleResolution specified in tsconfig.json

System Info

System: node 16.10.0
    Platform: linux (5.19.0-38-generic)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz (8 cpus)
    Compiler: /home/foo/node_modules/@stencil/core/compiler/stencil.js
       Build: 1678807683
     Stencil: 3.2.0 🌷
  TypeScript: 4.9.5
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.6

Steps to Reproduce

Build the included Stencil project

Code Reproduction URL

https://github.com/jgroth/stencil-module-resolution

Additional Information

No response

[tanner-reits]

Hey @jgroth 👋

Thanks for reporting this problem! I was able to take a look at your reproduction case and confirm the problem you were seeing. I'll get this labeled accordingly to be ingested into our backlog for our team to work out a solution.

Thanks again for letting us know!

[HansClaasen]

I looked into this and happy to share my findings:

Currently Stencils compiler is tightly coupled to the following module settings:

/src/compiler/transpile/ts-config.ts#L29-L30

    module: ts.ModuleKind.ESNext,
    moduleResolution: ts.ModuleResolutionKind.Node10

These settings can't be changed and are ignored by the compiler. Updating the project to use a Node16 module resolution would likely break projects that use something different. So the bigger question here is: how can the Stencil compiler be decoupled from a certain module or moduleResolution setting.

[jrowlingson]

Node10 resolution will not resolve the newer exports package entry point.

For new packages targeting the currently supported versions of Node.js, the "exports" field is recommended. [1]

[rwaskiewicz]

@HansClaasen is correct here (well, in a few ways):

• Currently Stencils compiler is tightly coupled to the following module settings
• These settings can't be changed and are ignored by the compiler.

This is likely true, but we'll need to research to validate this:

• Updating the project to use a Node16 module resolution would likely break projects that use something different.

I've updated this ticket in our backlog to prioritize looking into it further for possible inclusion in v5

[jrowlingson]

@rwaskiewicz :+1: - fwiw, I ran into this after creating a package for some common utils and found I was unable to use the "exports" package entry point (recommended).

[huyit88]

Yeah, same for me.

[LRueckert]

I also ran into this issue.

[rwaskiewicz]

Hey folks,

Please do me a favor and add 👍's to the issue summary to upvote it instead of "+1" style comments. GitHub doesn't give us an easy way to track those types of comments, which makes them more likely to not be properly counted when we prioritize issues.

Thanks!