In my project, I am working with two files named a.ts and b.ts. The interesting part is that file b exports something for file a to use. While the TypeScript compiler handles this setup perfectly, it fails to generate valid output for a browser environment. Here's an example of my code:
import { test } from "./b";
console.log(test);
b.ts
export const test = "quest";
During compilation, I encountered the following error:
$ tsc --lib dom,es2018 --target ES2018 --out test.js a.ts b.ts
b.ts:1:1 - error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.
1 export const test = "quest";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error.
After trying different options like setting the module using --module amd or --module system, I realized that they didn't work properly in a browser environment.
At this point, I decided to explore other alternatives, such as not specifying a single output file with --out, but this approach also resulted in errors related to import and export declarations within the modules.
Based on my observations and experiments, it seems like my options with TypeScript are limited to:
- Combining all code into a single file
- Utilizing external libraries like require.js or webpack
- Understanding modules and their usage in a browser environment
However, before settling on any of these options, I wonder if there's another way to compile TypeScript with imports without relying on additional libraries or modules?
TypeScript version used: 3.8.3