ts-loader: Build fails if importing a component from node_modules library
I added a custom library from node_modules (something like: node_modules/@my-lib) imported a typescript component from this library in my code with:
import { MyComponent } from '@my-lib/component/my-component';
The typescript loader fails with the following message:
Module build failed: Error: Typescript emitted no output for /Users/.../my-app/node_modules/@my-lib/component/my-component.ts at Object.loader (/Users/.../my-app/node_modules/ts-loader/index.js:456:15)
.
ts-loader version: 0.8.2 webpack version: 1.13.1 tsc version: 1.8.10
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 21
- Comments: 48 (27 by maintainers)
Unfortunately shipping js/d.ts files is not a solution for me. I have 2 private repositories:
project-web
project-common
Both repos are written in Typescript.
project-web
depends onproject-common
so I decided to fetchproject-common
github repository by using npm and just do something like this inproject-web
:import { CommonComponents } from 'project-common'
The problem is that I can’t provide precompiled js/d.ts (mainly because of inlining sass files in ts files which is handled by webpack like:
{ styles: [require('sample.sass')] }
so I need to bundle/compile two pure TS repos together to one bundle file (one comes from node_modules). Of course error occurs. The funny thing is that it occurs randomly… Any solutions?I get so many issues on this I’m wondering about enabling this behaviour behind an opt-in flag
Execute the foowing command line :
It will install typescript v1.8.10 as global package, dev dependencies package and local package.
OK - if someone wants to put together a PR which enables this I’ll happily take a look.
Ideal implementation:
New
allowTsInNodeModules
option for ts-loader that, iftrue
does not perform the check that leads to throwing theYou should not need to recompile .ts files in node_modules
message hereSuffix the existing
You should not need to recompile .ts files in node_modules...
message with advice on how to opt into using this. Something suitably “warning-y” likeBut if you really want to do this; use the allowTsInNodeModules option
Don’t worry about fixing the tests; I can help with that.
Advice to any library authors shipping
.ts
files as the main way for ts consumption: I did the same for typestyle as an experiment and the results were not satisfactory and will never go there again. Reasons covered here : https://github.com/typestyle/typestyle/releases/tag/v0.7.0 Suggest you useoutDir
+.js
+.d.ts
as well 🌹 ❤️@johnnyreilly https://github.com/skysteve/ts-bug-example-2 is about the simplest example I could get. Let me know if you need any more details, but certainly on my mac on node v 6.6 I can replicate the issue.
Update
If I update the tsconfig.json file to remove the “allowJS” flag, the error seems to go away (branch https://github.com/skysteve/ts-bug-example-2/tree/disallow-js). Which is fine in this simple project, but in my real world project I need to mix JS and TS so that’s not a proper fix
I have the lost the will to implement it and would not recommend anyone to write a package that ships
.ts
+.js
and instead people should useoutDir
+.d.ts
+.js
.Again for those interested reasons, the following bad things happen if you ship
.ts
+.js
files :outDir
, your package messes up other peoplesoutDir
option.Help wanted 🌹
We can provide an additional error message if path contains
node_modules
that says:@ritmos yes, something similar ended up being the issue for me, not a bug with ts-loader after all
Hello dear typescripters. The issue is not because of ts-loader, but because tsc defaults to exclude node_modules folder (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). They have a bad example showing how to exclude files with “node_modules” in it which leads to confusion. I have oppened an issue for that.
In any case, in order to allow ts-loader consume typescript source files directly from node_modules: edit tsconfig.json and add all the needed packages there. Like for example:
tsconfig.json
Another option that also worked in my case is to set ts-loader option transpileOnly to true
No. Be sure to add
typings
path to yourpackage.json
🌹I’m not sure if it is relevant. But https://github.com/laco0416/light-ts-loader 's approach is quite interesting. It skips all type checking at build time. (Checking is done in editor or separate tsc call).
Maybe you can try the
transpileOnly
flag in ts-loader.FWIW it might be worth turning your findings into a blog post (if you’re so minded). It’s always an idea to spread the word when it comes to good practice and it seems like this is still new territory. Have you any idea if the TypeScript team have published any thoughts on this?
Can’t stop thinking of this:
Somewhat overplayed I’m sure 😄
@johnnyreilly the lesson was painful. But the setup isn’t:
src/
lib/