Generated code imports not compatible with types generated using "target=ts"

[Johannes Byle]

I may just be missing a configuration option, but it seems that the generated "_connectquery.ts" files always try to import the types from a ".js" file, which makes them incompatible with types files generated using "target=ts". Here's the relevant section from my buf.gen.yaml

  - plugin: es
    out: react_app/src
    opt: target=ts
  - plugin: connect-query
    out: react_app/src
    opt: target=ts

For now I've simply dropped the target=ts option from the es plugin to get it to work, but I assume that simply dropping the ".js" extension from the import would allow it to work in both places (at least it does for me using webpack).

[Timo Stamm]

Hey Johannes, it's a bit confusing for sure, but the .js extension is actually valid.

If you compile the code with tsc, you'll find that it does not emit an error. And with "moduleResolution": "node16", the .js extension becomes mandatory. Webpack does not support the extension out of the box yet. It's being worked on though, see webpack/webpack#17288.

You have two simple options to work around the issue:

1. Add an extensionAlias your webpack.config.js:

module.exports = {
  ...
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
+   extensionAlias: { '.js': ['.ts', '.js'] },
  },
  ...
};

2. Add import_extension=none in buf.gen.yaml:

version: v1
plugins:
  - plugin: es
    out: react_app/src
-   opt: target=ts
+   opt: target=ts,import_extension=none
  - plugin: connect-query
    out: react_app/src
-   opt: target=ts
+   opt: target=ts,import_extension=none

[Johannes Byle]

Thanks, that worked. I appreciate the quick response.