Module not found when using raw-loader and project references

[trbabb]

Expected Behavior

When using Webpack's raw-loader with TypeScript project references— For any given module X.ts, I'd expect import paths relative to X.ts to refer to the same resources whether X is imported from within its own project, or from a module in a different project.

Specifically, if X.ts successfully finds a resource Y, both contained in project Z when Z is compiled separately, then I wouldn't expect Y to suddenly be considered missing when Z is imported or referenced by another project.

Clone https://github.com/trbabb/rawloader-repro.git, and after npm install, run npx webpack. I'd expect src/Foo.ts to find ./shad/foo.frg and import it normally.

Actual Behavior

npx webpack in the above repo yields:

ERROR in /project/path/src/Foo.ts
./src/Foo.ts
[tsl] ERROR in /project/path/src/Foo.ts(1,19)
      TS2307: Cannot find module './shad/foo.frg' or its corresponding type declarations.

This is not the case if src/Foo.ts is compiled from within its own project. This can be seen if you:

> mv webpack.config.js webpack.config.js-broken
> mv webpack.config.js-working webpack.config.js
> npx webpack

This compiles normally, and the contents of foo.frg can be found inside the bundle as expected.

Somehow, the existence of project reference breaks the relative path in src/Foo.ts.

Code / How to reproduce

git clone https://github.com/trbabb/rawloader-repro.git
npm install
npx run webpack

The raw-loader team informs me that this is likely a ts-loader issue. I'm not well versed in how different loaders interact with each other— please let me know if there's relevant information to pass back to the raw-loader team, or if there's anything I need to configure differently to get this to work.

Thanks!

[appzuka]

You are not actually using project references in this example. You are just building using webpack and the first command fails because in test/tsconfig.json you only include "*". If you change the include statement to:

    "include" : ["*", "../src/**/*"],

then it builds as expected.

If you want to use project references you will set it up so that when the project builds ts-loader will cause tsc to build dependent projects. Then webpack will use the output of those projects in its build without rebuilding them, unless necessary.

In your repo, src is the referenced project. Test is not a project reference; it references src. tsconfig in src should look something like:

{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "outDir": "./out",
        "composite": true,
   },
    "include": [
        "./**/*", 
    ],
}

When you run

npx tsc -b src

tsc will build the project src and the output will be in src/out. Your test project can then import the files from src/out. ts-loader should automatically rebuild referenced projects if they change (although there is currently an issue with this. See #1114).

This will only happen if you set projectReferences: true in the ts-loader options in your webpack config.

When you build src with the tsc command above it does build the project and put the output in src/out. However, tsc does not know about raw-loader so it just includes the import statement

import stuff from './shad/foo.frg';

in the emitted file. It ignores the .frg and .vtx files as tsc does not understand these. Then, when webpack builds test using the pre-built output in src/out it throws an error because ./shad/foo.frg is not in src/out.

If you want to use webpack loaders in dependent projects you will need to build them as sub-projects using webpack.

You can see a simple repo using project references at the repo in issue 1114:

https://github.com/jedster1111/ts-loader-project-references

This shows how project references work with ts-loader. There is currently an issue where the project needs to be built twice to succeed although that is being worked on.

[tom-spalding]

@trbabb @appzuka this appears like a solution https://stackoverflow.com/questions/50469875/configuring-typescript-to-work-with-html-modules

edit: actually it would be nice to have a solution that doesnt require naming the imported modules differently.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tom-spalding]

afaik still an issue stale-bot.

[appzuka]

@nebulousdog, please explain what is still an issue, with a minimal repo if possible.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing as stale. Please reopen if you'd like to work on this further.