How to hide or Fix; `typescript: File is a CommonJS module; it may be converted to an ES module.`
Tags: typescript
Published: 2023-07-09 00:20:35

In the case of a file written in the CommonJS syntax, TypeScript may display the following message:

```bash
File is a CommonJS module; it may be converted to an ES module.
```

This message is neither an error nor a warning, but simply indicates that TypeScript may convert the file written in CommonJS syntax to ES syntax.

Therefore, there is no need to make any modifications, but you may not necessarily want to see this message.

How can you hide it or resolve it completely? Here are the steps:

---

- VSCode
    - Converting from CJS to ES
        - When you hover over the three dots, the following QuickFix should appear.
        
          ![Mouse over the three dots and click bulb button to convert CJS to ES](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ihtpnzp5uigwskron2a.png)

        - Click on the light bulb icon to convert to ES syntax.
        
          ```bash
          //-- CommonJS --//
          module.exports = {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          }
          
          //-- ES --//
          export const plugins = {
            tailwindcss: {},
            autoprefixer: {},
          };
          ```
        
        - Note
            - Converting to ES syntax may cause the code to stop working.
            - For example, a file named `next.config.js` will not start Next's development server in ES syntax.
            - [Please refer to the official explanation](https://nextjs.org/docs/messages/next-config-error)
    - Disabling the feature
        - If you simply want to hide the message, set the following configuration to `False`. [From Stack Overflow](https://stackoverflow.com/a/49693760/18116695).
        
        
          ![How to hide messages on VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h93y2w97ldxo96h4u9r7.png)


---
        
- Neovim
    - Converting from CJS to ES
        - Use the LSP code action. The following screenshot is from my environment.
        
          ![Use code action to convert CJS to ES](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyyzr0tx2hcpf3dkn8hg.png)

        - It will convert from CommonJS to ES.
        
          ```bash
          //-- CommonJS --//
          module.exports = {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          }
          
          //-- ES --//
          export const plugins = {
            tailwindcss: {},
            autoprefixer: {},
          };
          ```
        
        - Note when converting
            - Converting to ES syntax may cause the code to stop working.
            - For example, a file named `next.config.js` will not start Next's development server in ES syntax.
            - [Please refer to the official explanation](https://nextjs.org/docs/messages/next-config-error)
    - Disabling the feature
        - I couldn't find if there is a feature to disable the message like in VSCode.

---

- Summary
    - I explained how to resolve the message: `typescript: File is a CommonJS module; it may be converted to an ES module.`
    - There are two ways to resolve this message:
        - Convert from CommonJS to ES.
        - Disable the message display (VSCode only).
    - However, since it is not a critical message that requires immediate action, ignoring it and continuing would be the best approach in the end.