web: [dev-server-esbuild] Unable to resolve packages with correct extensions when imported in an .ts file using node's `exports`

When files being imported in an .ts file, the resolver automatically assumes all the imports must be ended with .ts when some could be .js. It seems like the dev server does not support node’s exports quite well.

Actual behavior

Packages that use exports in node resolves with .ts when it gets imported in a .ts file.

Expected behavior

Packages that use exports in node must be resolved with the correct extensions when it gets imported in a .ts file

Steps to reproduce

Clone this repo and run the project to reproduce the stated problem.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 18 (13 by maintainers)

Most upvoted comments

@LarsDenBakker @motss I think I am running into the same or similar issue when using Lit 2.x directives. I have created a small test repo: https://github.com/peschee/wds-esbuild-lit-test

I think this issue blocks users from upgrading to Lit 2.x when using TypeScript and the recommended esbuild setup in wds.

Fixed in @web/dev-server@0.1.18! 👏


Edit: Reverted in new version: https://github.com/modernweb-dev/web/pull/1569. 😢

return {
          body: result.outputText,
          type: 'js'
        };

for anyone looking for a more complete quick workaround example:

if (context.path.includes('node_modules/lit') && context.path.endsWith('.ts')) {
      const path = `${__dirname}/../../..${context.request.url}`.replace(/\.ts$/,'.js')
      console.log(path)
      const body = fs.readFileSync(path)
      return { body, type: 'js' };
    }

@LarsDenBakker @motss I think I am running into the same or similar issue when using Lit 2.x directives. I have created a small test repo: https://github.com/peschee/wds-esbuild-lit-test

I have the exactly same problem!

@thescientist13 that’s a different issues, you need to serve your files as JS. This might work:

        return {
          body: result.outputText,
          type: 'js'
        };

but it might be that your plugin runs after node resolve. So then you might need to add a mimeTypes option to your config instead:

{
  mimeTypes: {
    '**/*.ts': 'js',
},

@abdonrd The issue is in rollup node resolve, as I expected. We need to make this behavior of the rollup plugin configurable, so that we can turn it off.