Repository navigation
ts-node tries to compile any imported file as Typescript (and fails when it's not) #175
Description
Activity
This is not
ts-node, this is just how node works. There isn't any way to do what you want in node except to use conditional requires.@JabX That looks like it could work. By default, any require will be execute by node and that's exactly (educated guess) what's happening here. You'd be running into a runtime error, not because of TypeScript, but because node is trying to evaluate your CSS and JavaScript.
I apologize for resurrecting this thread more than two years after its closing, but CSS file imports remain the primary reason why I have to resort to using Webpack on the server-side instead of being able to use
ts-node.My understanding is that a statement like
import 'style.css';will be converted by TypeScript torequire('style.css');. I am hoping for a way in mytsconfig.jsonto specify thatimport 'style.css';should be converted into a blank empty line instead.Reacted by xenoshiba, Arthaey Angosii, Vincent Néel, Yanlin and Andrii Oriekhov@onlywei That's out of scope for this module though, I'm sure there's projects well defined for this sort of things (it's really just doing
require.extensions['.css'] = () => undefined).Reacted by Homam Hosseini, ChenYong, Richard Scotten, Alexander Kachkaev and Adrian SchneiderReacted by xenoshiba, Brian Kim and Arthaey AngosiiReacted by Richard ScottenThere isn't any way to do what you want in node except to use conditional requires.
If you are using ESM modules (i.e.,
import) here's an example of doing that:export {}; (async function () { // eslint-disable-next-line no-constant-condition if (false) { await import('style.css'); } })().catch((reason) => { console.error(reason); });Since the import is wrapped in an
if (false), it will never execute in ts-node/node. That means no error at runtime. But here's the thing...My bundler (rollup) is smart enough to know that too. As a result, this code is removed during tree-shaking. And as a result of that, this CSS file isn't added to my bundle.
I'm importing this CSS file because I want it in my bundle, so if the conditional import removes it, I'm right back where I started. To put it another way, I need node to ignore this import and I need my bundler to recognize it.1
Without ts-node, this is relatively straightforward because you transpile and execute code as separate steps. Typescript ignores CSS imports out-of-the-box2, and after installing the appropriate rollup plugin, it bundles imported css files after a one line change to your config file.
I'm unclear on how to do the same with ts-node. Above, @blakeembrey said, "This is not
ts-node, this is just how node works," which is true. If I were to pass the output of tsc directly into node, I would get the same error ts-node gives me. As I mentioned earlier, I would need to postprocess the javascript before it's executed by node. But as far as I can tell,ts-nodedoesn't give me a way to do this because it transpiles and executes in the same step. If my understanding is correct, that meansts-nodealways errors if you use a typescript css import.After lots of trial and error, I've run out of ideas and it feels like I have to pick one of these two options:
- Stop using
ts-node - Stop using typescript css imports.
I'm hoping there's a solution I haven't thought of that allows me to use both.
Footnotes
-
It would probably help to add additional context to my use case. I want my unit tests to run as fast as possible.
ts-nodeallows me to skip the type checking and transpilation stage, giving me faster feedback loops.It's worked without issue until I noticed my bundle was missing css files from a dependency. I found what I considered to be the best way to solve this via typescript (i.e., css imports), but I ran into the problem I've described above. My unit tests no longer execute because they try to parse the css file as though it were javascript.
Keep in mind, I still need to type check and transpile my project at the end of my build pipeline: It's a client side app that runs in the browser. ↩
-
↩In TypeScript, this syntax has had a pretty strange quirk: if the import could be resolved to a valid source file, then TypeScript would load and check the file. On the other hand, if no source file could be found, TypeScript would silently ignore the import!
- Stop using
I am trying to setup some tests with ts-node and tape for my React components, but I am encountering some imports like
import 'style.css';which are meant to be processed by Webpack and ignored by Typescript. The problem is that ts-node attempts to parse it as Typescript and then (obviously) fails.Is there something we can do here so solve this?