Importing a `.ts` file from a rollup-bundled `.ts` file?

Development
, ,
1

Summary

CodeMirror.ts is being bundled by rollup and built by yarn watch.

The yarn watch build rebuilds TypeScript files when changed and is much faster than the rollup build. Only the output of the rollup build is being used. Even so, the yarn watch build is useful for type checking.

Unfortunately, however, while the following import works with yarn watch, it does not work with rollup if EditorType.js exists:

import { SelectionFormatting } from './EditorType';

yarn watch creates EditorType.js if it doesn't exist.

With this, rollup tries to import SelectionFormatting from EditorType.js (generated by yarn watch). The yarn watch build of CodeMirror.ts, however, imports SelectionFormatting from EditorType.ts.

EditorType.js lacks type information and exports SelectionFormatting as a CommonJS module (not recongnized by rollup).

What (somewhat) works

The following import does work with rollup

 12 // We need to specify the file extension (.ts) here.
 13 // If we don't, rollup tries to import from the .js file generated
 14 // by `yarn watch`, which fails.
 15 import { SelectionFormatting } from './EditorType.ts';

Unfortunately, this generates errors when built with yarn watch:

components/NoteEditor/CodeMirror.ts:15:37 - error TS2691: An import
path cannot end with a '.ts' extension. Consider importing './EditorType'
instead.

15 import { SelectionFormatting } from './EditorType.ts';
                                       ~~~~~~~~~~~~~~~~~

These errors are also generated by yarn install, but not yarn build.

Because everything else compiles successfully, the app can be deployed. The code also passes the pre-commit tests (I don't know why).

Options

  • Ignore the build errors — most things still work
  • Exclude CodeMirror.ts from the list of files built by yarn watch, but do include it when bundling with rollup. (This might be tricky — rollup reads the same tsconfig.json files used by yarn watch/yarn install).
  • Delete EditorType.js when bundling (may cause issues if yarn watch notices that EditorType.ts needs to be rebuilt while rollup is building).
    • Rollup will import from .ts files, just not if a .js file is present.

I think I prefer the second option. Has anyone else encountered similar issues in the past/have suggestions on how to fix this?

2

This has been resolved by telling rollup to ignore all .js files in the ${mobileDir}/components/NoteEditor/ directory.

1 Like