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-webproject-commonBoth repos are written in Typescript.
project-webdepends onproject-commonso I decided to fetchproject-commongithub 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
allowTsInNodeModulesoption for ts-loader that, iftruedoes not perform the check that leads to throwing theYou should not need to recompile .ts files in node_modulesmessage 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 optionDon’t worry about fixing the tests; I can help with that.
Advice to any library authors shipping
.tsfiles 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.tsas 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+.jsand instead people should useoutDir+.d.ts+.js.Again for those interested reasons, the following bad things happen if you ship
.ts+.jsfiles :outDir, your package messes up other peoplesoutDiroption.Help wanted 🌹
We can provide an additional error message if path contains
node_modulesthat 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
typingspath 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
transpileOnlyflag 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/