question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing TypeScript files with `?url` suffix result in the file not being transpiled

See original GitHub issue

Describe the bug

I’m using the ?url suffix to import a TypeScript file to use it in an AudioWorklet.

import workletUrl from './audio.worklet.ts?url';

const audioContext = new AudioContext();
audioContext.audioWorklet.addModule(workletUrl);

The problem is that Vite is not transpiling my TS file into a JS one, so the worklet fails because of it.

I think Vite should either transpile the files that it knows how to transpile, and return as URL the transpiled file, or a new option should be added to tell Vite to transpile it (e.g. ?url&transpile)

Reproduction

https://github.com/FezVrasta/vite-ts-url-import

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.36 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
    Watchman: 2022.05.16.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 104.1.42.97
    Chrome: 105.0.5195.52
    Firefox: 103.0.1
    Safari: 15.6.1
  npmPackages:
    vite: ^3.0.7 => 3.0.9 

Used Package Manager

npm

Logs

No response

Validations

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
bluwycommented, Sep 4, 2022

Looks like a bug that it should be transpiled by default, you can workaround it by using new URL('./path/to/file.ts', import.meta.url). Though for AudioWorklet, even if ?url works you might hit https://github.com/vitejs/vite/issues/9606

0reactions
sapphi-redcommented, Oct 17, 2022

Duplicate of #6979

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript – How to solve the problem with unresolved path ...
js file containing the line with the path alias. The actual cause of the issue is that the tsc compiler does not transpiles...
Read more >
node.js - Transpiling Typescript into Javascript results in a ...
I'm just getting into typescript and my tsconfig.json ... and when I import a module in my typescript file I import it as...
Read more >
TSConfig Reference - Docs on every TSConfig option
When set to true, allowUmdGlobalAccess lets you access UMD exports as globals from inside module files. A module file is a file that...
Read more >
Processing TypeScript using TypeScript - Convinced Coder
However, if you import the “typescript” module in your application code, ... if the file you transpile imports other TypeScript files, ...
Read more >
sass-loader - webpack - JS.ORG
It is natural to expect relative references to be resolved against the .sass / .scss file in which they are specified (like in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found