Why is --isolatedModules error fixed by any import?

Question

In a create-react-app typescript project, I tried to write this just to test some stuff quickly:

// experiment.test.ts
it('experiment', () => {
  console.log('test');
});

But it gives me the following error, with a red squiggly beneath it:

All files must be modules when the '--isolatedModules' flag is provided.

However, if I change the file to the following, then everything apparently is fine (except for the unused import of course):

// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it

it('test', () => {
  console.log('test');
});

Why? What is happening here? What does --isolatedModules actually mean/do?

Answer 1

Typescript treats files without import/exports as legacy script files. As such files are not modules and any definitions they have get merged in the global namespace. isolatedModules forbids such files.

Adding any import or export to a file makes it a module and the error disappears.

Also export {} is a handy way to make a file a module without importing anything.

Answer 2

The correct way is to tell TypeScript what you want. If you don't want isolatedModules create tsconfig.json inside your test directory and add:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false
  },
}

Adding "isolatedModules": true to the config and then cheating TypeScript checker by adding empty export {} smells bad code to me.

Answer 3

Still having error despite you exporting things from that "error file"?

1. Check if you don't export same name that you already export in another file (conflict)
2. After your fix try to stop and start your npm/yarn runner (I experienced it cannot recover itself even after hard reload of the page especially when you have another error somewhere else)

Answer 4

In case you don't want to add the unnecessary

export {}

everywhere and don't want to ruin the compiler option for other files.

If you have a separate tests/ directory, you can extend the root directory tsconfig file and create a new one in the tests/ directory.

Then add this to it:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "isolatedModules": false
    },
}

This turns off the isolatedModules flag only for test files. Restart your code-editor to sync the changes.

Answer 5

Let's try to check isolated modules. When I checked Google, there is no direct context of it.

It basically means that you allow Typescript to compile modules in isolation.

But it comes from Typescript and has something to do with Typescript preferring modules over namespaces.

Modules also have a dependency on a module loader (such as CommonJs/Require.js) or a runtime which supports ES Modules. Modules provide for better code reuse, stronger isolation and better tooling support for bundling.

Source 1

Using a create-react-app typescript project, you should have installed typescript and ts-jest (or the create-react-app should handle the dependencies based on wether you ejected the app or not).

Also ts-jest has some information about it:

By default ts-jest uses TypeScript compiler in the context of a project (yours), with full type-checking and features. But it can also be used to compile each file separately, what TypeScript calls an ‘isolated module’. That’s what the isolatedModules option (which defaults to false) does.

Source 2

As soon as you use the export command you are creating a module out of what is being exported.

If you are using ts-jest, you can add these settings without affecting your other modules, which the create-react-app will consist off.

"ts-jest": {
  "isolatedModules": false
}

And checkout the ts-jest page (second source) for the pro's and con's.

Answer 6

In my case adding export {}; was not enough.

I met this error in the webpack.config.ts file. The error message looked like this:

'webpack.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.ts(1208)

When I added export {}; I got another error:

SyntaxError: Unexpected token ‘export' at Object.compileFunction (node:vm:352:18)…

I tried to change tsconfig.json module option from:

{
  "compilerOptions": {
    "module": "EsNext",
    "isolatedModules": true
  },

to:

{
  "compilerOptions": {
    "module": "CommonJS",
    "isolatedModules": true
  },

,because webpack.config.ts had commonjs syntax like module.export ={}. Unfortunately, it didn't work too. I discovered that there were no type definitions added to the project, so I run:

npm install --save-dev ts-node @types/node @types/webpack

and everything was fine. The file was recognized as a module thanks to export {};.

Of course, using export {}; to make the file a module is just a workaround, not a solution. I could

• change webpack.config file extension to .js instead of .ts and stay with the commonJS module format
• change to import/export statements in ES modules format and use the .mjs file extension, because Node.js has stable support for ES modules since version 13.2.0 was introduced. Nevertheless, that would trigger other problems with changing commonJS syntax Can I use as es-modules for webpack config?
• leave .ts file extension, follow the webpack configuration guide for typescript and use ES modules link

I chose the third option and had to add import 'webpack-dev-server'; to avoid type errors. My configuration changed from this:

export {};

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = (env) => {...}

to this:

import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = (env: { [x: string]: any; }): webpack.Configuration => {...}
export default config;

Answer 7

That's because you haven't imported the function to be tested yet. Once you do that, the error will disappear. The accepted answer explains why.

Answer 8

how about just do .eslintignore add the file folder where u need to ignore from eslint so no errors on that --isolatedModules error fixed by any imports and u can test your logics their

Answer 9

Problem solving, see article https://blog.csdn.net/qingfeng812/article/details/120510673

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}