ForgeUI import is removed by IntelliJ IDEA with 'reformat code'

Forge
, ,
1

Hi all,

just a minor question regarding ForgeUI. I’m not very familiar with React/Forge as Backend Dev so this might be hopefully easy to solve for you. ^^

I’m using IntelliJ IDEA and frequently use ‘reformat code’ to optimize imports automatically and format code. This is also invoked when any code is committed.

But the automatic organize import keeps removing ForgeUI when I use:

import ForgeUI, {Button, Code, Fragment, Macro, Link, Em, render, Text, useProductContext, useState} from "@forge/ui";

and changes it to

import {Button, Code, Em, Fragment, Link, Macro, render, Text, useProductContext, useState} from "@forge/ui";

And this results in the error

App code snapshot error: ForgeUI is not defined

Any ideas?

2

Hi @LukasGotter,

Could it be an Optimize Imports feature? Please try turning it off and see whether it works for you? If it works, at may be worth exploring how to ignore some imports in IntelliJ if you really need that feature.

Thanks,
Vitalii

3

Hey @vpetrychuk, thanks for following up!
Yes exactly it’s reformat code + organize imports. This is standard to keep things organized and we enable it before any commit to do this automatically. Moreover, with the shortcut, I do this all the time during development.
Actually, I added a noinspection instruction on top and now it works fine, although not perfect since now unused imports are not removed automatically anymore. But at least they are still automatically ordered.
Example

// noinspection ES6UnusedImports
import ForgeUI, {Button, Fragment, Macro, render, Text, useConfig, useProductContext, useState} from "@forge/ui";

I wonder if there is a way to tell the IDE that ForgeUI is actually being used. Any ideas?
Greetings
Lukas

4

Unfortunately, I do not know how to make IntelliJ ignore ForgeUI import. Many projects resolve this issue in a different way - they switch to eslint + prettier to enforce formatting and additional rules for everyone, no matter what IDE they use. With a precommit hook (and CI/CD) these two tools would make sure everyone formats the code before it is pushed to remote.

Thanks,
Vitalii

5

Will this also order the imports alphabetically and remove unused imports? Can you share some details if yes? Thank You!

6

There is a import sort plugin for eslint: eslint-plugin-simple-import-sort - npm

1 Like
7

I’m not entirely happy with this solution but it kinda worked for me in the past so sharing it here:

import ForgeUI, { useConfig } from "@forge/ui";
import { pleaseDoNotOptimizeTheseUnusedImports } from "./utils";


pleaseDoNotOptimizeTheseUnusedImports(ForgeUI)

while the utils.js looks like this:

export const pleaseDoNotOptimizeTheseUnusedImports = function (...args) {
    // Requirement: The ForgeUI import must happen for UI-kit based modules to work
    // Problem: The "organize imports" operation will automatically get rid of ForgeUI import as it's not used
    // Solution: dummy pleaseDoNotOptimizeThisUnusedImport(ForgeUI) makes everyone happy...
    return args;
}

This stops IntelliJ from optimizing import as it’s used now, while that usage is not doing anything useful.

I prefer this over the noinspection but that’s personal preference.

1 Like
8

IDEA seems to use eslint so I guess this problem might apply to other IDEs as well? ESLint | IntelliJ IDEA Documentation

9

Wouldn’t then something like this be sufficient?

import ForgeUI, {Checkbox, CheckboxGroup, MacroConfig, render, TextField} from '@forge/ui';
ForgeUI // flagging lib as used import
10

ForgeUI // flagging lib as used import

Yes, it would be enough - that would disable the import optimization. But then you also need the // noinspection BadExpressionStatementJS on top of this line as it will be triggering the Expression statement is not assignment or call warning. I know that those comments can move around easily so I prefer the dummy function call instead, but as I said I’m not 100% happy with this workaround (it works but it ain’t pretty).

Side note: AFAIR IntelliJ IDEA somehow does not warn us about the unused React import (import React from "react";) so probably there is some other way to make it ignore ForgeUI. But I wouldn’t be too surprised if that’s hardcoded somewhere deep into React support for IDEA.

11

I think this is related to the file extension (JSX or TSX) as it detects that the import of React is required given that JSX/TSX will be translated to React.createElement().

1 Like
12

We were having the same problem with ForgeUI being removed by IntelliJ and reported by Eslint Typescript plugin as an ununsed-var.
The solution was to add this to our tsconfig.json under compilerOptions

"jsx": "react",
"jsxFactory": "ForgeUI.createElement",

And to adjust our .eslintrc file to include parserOptions for the @typescript-eslint/parser

"parserOptions": {
    "project": true,
    "tsconfigRootDir": "./src"
  },
1 Like