Loading custom file leads to TS2307 (Cannot find module)

[Lotes]

I posted a question here. But then I realized, that this repo is the better match for it.

I created a domain-specific language XYZ and I would like to import it like normal JS, like this:

import { Type1, Type2 } from "./myfile.xyz";

For the IDE I was able to create a Typescript plugin, so that I can see the members of myfile.xyz. What I am actually doing is transpiling the XYZ file to Typescript.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: [".xyz", ".ts", ".tsx", ".js"],
    extensionAlias: {
     ".js": [".js", ".ts"],
     ".cjs": [".cjs", ".cts"],
     ".mjs": [".mjs", ".mts"]
    }
  },
  module: {
    rules: [
      { test: /\.xyz$/, use: ["ts-loader", "xyz-loader"] },
      { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" }
    ]
  }
};

As you can see, I am using the ts-loader to process the transpiled code.

For an entry file like below I still get errors:

import { XXXX } from "./Blog.xyz"; // TS2307: Cannot find module './Blog.xyz' or its corresponding type declarations.

console.log(JSON.stringify(XXXX, null, 2));

What am I doing wrong? Did I miss some configuration? Do I have a wrong imagination of Webpack? How to debug this? Do I maybe need to save the output as a file somewhere? If yes, how?

As far as I can see, the custom loader is transforming correctly to TS (It is noticeable when I remove the ts-loader from the loader-pair above). Webpack version is 5.90.2.

[johnnyreilly]

Without having looked at this in depth, I suspect typescript doesn't know what to do with "./Blog.xyz" as a suffix. Might be worth looking at how something like Vue is handled for inspiration. Best of luck!

[Lotes]

I could not find out yet, how to tell Typescript that it should handle .xyz differently.
Typescript plugins are just for the IDE, not the build… Thanks for the hint, I will have a look.

[Lotes]

After some research and debugging it turned out that the result of my loader looks as expected (thanks to inspect-loader). But the ts-loader does something very weird: instead of using the output of my loader it takes the file where the import of my custom file was made:

import { XXXX } from "./Blog.xyz";

console.log(JSON.stringify(XXXX, null, 2));

Here is my project (npm i && npm run build && npm run build -w packages/example).
Do you have any idea what goes wrong? I will try to dive into your documentation...

[Lotes]

I found a working setup: transpileOnly: true and making sure that the transpiled output is free from syntax errors.