TypeScript ESLint Errors

[cacooper16]

Hi,

I have followed the setup for NextJS, adding UntitledUI to a pre-existing (but very basic) pre-existing project.

When I run the next build command, I get a number of errors relating to code quality, especially relating to TypeScript.

For example:

./src/components/base/input/input.tsx
42:5  Error: 'isRequired' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/base/tooltip/tooltip.tsx
145:51  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
145:56  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
162:22  Error: '_' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/components/providers/route-provider.tsx
20:6  Error: 'router' is never reassigned. Use 'const' instead.  prefer-const

./src/hooks/use-clipboard.ts
81:13  Error: 'err' is defined but never used.  @typescript-eslint/no-unused-vars

./src/utils/is-react-component.ts
3:32  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
3:60  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
3:65  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
8:48  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
8:76  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
15:45  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
15:85  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
15:90  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
22:50  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
22:101  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
29:45  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

These errors are appearing in unchanged files that have been added by utilising components or during setup.

I guess my question would be: is this expected behaviour?

Of course, I could just disable some ESLint rules, but that does not feel sustainable.

I appreciate that this is a new project. This is a genuine question rather than any sort of complaint.

Cheers,
Colin

[deebov]

Hey @cacooper16, thanks for reporting this. What was the last time you have pulled the components? Because 90% of these issues should have been fixed by now.

[cacooper16]

Hi @deebov,

Thanks for your further feedback.

I have implemented the suggested changes, which seem to be a mixture of genuine corrections and then alterations to the ESLint config to just get it to work.

That said, it's still throwing up build errors regarding Type errors within the component code. For example:

./src/components/base/buttons/button.tsx:235:80
Type error: Type '{ "data-icon": string; className: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'className' does not exist on type 'IntrinsicAttributes'.

  233 |             {/* Leading icon */}
  234 |             {isValidElement(IconLeading) && IconLeading}
> 235 |             {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
      |                                                                                ^
  236 |
  237 |             {loading && (
  238 |                 <svg

I don't want to fiddle with this too much myself, because I imagine any changes could be overwritten with updates or removing/adding components.

I would really like this to work, and work well, since we like the Figma library. That said, there seems to be a lot of errors, which is making it difficult to view it as a realistic option... at least in the immediate term.

Beyond the understandable fact that this is very recently released, what am I missing?

[deebov]

Hey @cacooper16, mind sending me your esling and tsconfig files? These issues don't seem to come up on our end. I will check it with your config as well.

[cacooper16]

Hi @deebov,

Sure. Thanks for looking into it.

I took much of the eslint.config.mjs that you shared above:

import nextPlugin from "@next/eslint-plugin-next";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
import prettierPlugin from "eslint-plugin-prettier";
import reactPlugin from "eslint-plugin-react";
import reactHooksPlugin from "eslint-plugin-react-hooks";
import unusedImports from "eslint-plugin-unused-imports";

export default [
	{ ignores: ["node_modules/*"] },
	{
		files: ["**/*.{js,jsx,ts,tsx}"],
		...reactPlugin.configs.flat.recommended,
	},
	{
		settings: {
			react: {
				version: "detect",
			},
		},
		files: ["**/*.{js,jsx,ts,tsx}"],
		languageOptions: {
			parser: tsParser,
			parserOptions: {
				ecmaVersion: "latest",
				sourceType: "module",
				ecmaFeatures: {
					jsx: true,
				},
			},
		},
		plugins: {
			"@typescript-eslint": tsPlugin,
			prettier: prettierPlugin,
			"unused-imports": unusedImports,
			react: reactPlugin,
			"react-hooks": reactHooksPlugin,
			"jsx-a11y": jsxA11yPlugin,
			"@next/next": nextPlugin,
		},
		rules: {
			"unused-imports/no-unused-imports": "error",

			"@typescript-eslint/consistent-type-imports": [
				"error",
				{
					prefer: "type-imports",
					fixStyle: "separate-type-imports",
					disallowTypeAnnotations: true,
				},
			],

			// React Hooks rules
			"react-hooks/rules-of-hooks": "error",
			"react-hooks/exhaustive-deps": "warn",

			// Next.js rules
			"@next/next/no-img-element": "off", // This will turn off the <img> warnings
			"@next/next/no-html-link-for-pages": "off",

			"prettier/prettier": [
				"warn",
				{},
				{
					usePrettierrc: true,
				},
			],
			"react/react-in-jsx-scope": "off",
			"react/display-name": "off",
			"react/jsx-key": "warn",
			"react/prop-types": "off",
			"react/no-unescaped-entities": "off",
			"react/no-unknown-property": ["error", { ignore: ["fill"] }],
			"no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
			"@typescript-eslint/no-unused-vars": [
				"warn",
				{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
			],
			"no-undef": "off",
			"no-redeclare": "warn",
			"max-len": "off",
			"jsx-a11y/alt-text": "error",

			// Added to address the specific error you were getting
			"@typescript-eslint/no-empty-object-type": "off",
		},
	},
];

The tsconfig.json is as follows:

{
	"compilerOptions": {
		"target": "ES2017",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "bundler",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"incremental": true,
		"plugins": [
			{
				"name": "next"
			}
		],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": [
		"next-env.d.ts",
		"**/*.ts",
		"**/*.tsx",
		".next/types/**/*.ts"
	],
	"exclude": ["node_modules"]
}

For context, this is pretty much out of the box NextJS /app router create-next-app, setup a few weeks ago.

The project existed already, so I have attempted to add UntitledUI to it.

Hope that makes sense.

Cheers,
Colin

[deebov]

Okay I see the issue. The error you're showing was a byproduct of us changing type any to unknown in is-react-component.ts which was used to assert a given value to a valid React component. For this, at least for now, we need to leave any in is-react-component.ts so it can continue correctly asserting given values to valid React components. I'll be looking into reverting it back to any.

[deebov]

Besides that, so that I understand your concern better, is there anything that makes it feel this way to you?

alterations to the ESLint config to just get it to work

[cacooper16]

Thanks for the updated commit. I have removed Untitled UI from the project, but I will do a clean install of this tomorrow and let you know how it goes 👍🏼

Besides that, so that I understand your concern better, is there anything that makes it feel this way to you?

It's just stability. I have only used a handful of components so far and I am already running into challenges. In an ideal world this will work really well, I will happily pay for the Pro version and enjoy massive efficiency gains 🥹 Just need to get there! Appreciate it will take some trial & improvement. It is early days...

[deebov]

I get it 💯!

It's been less than a week since we launched this massive library and there might be some places in early days where we have overlooked. That being said, if you just look at the speed at which we're shipping — closing issues and PRs within minutes and already have made a lot of minor improvements with the last 7 days. It's just a matter of getting a few more people to try it out alongside us and help us make it even better 💜.

If it's a barrier for you to try it at all, I'm happy to send you a discount so you feel you're getting your time's worth and hopefully help us make it better 🫶

[cacooper16]

Hi @deebov, just to confirm that the clean install - and some tweaking - worked. I was able to get it to produce a build without an error! This is with just a couple of components added - inputs and tooltips.

I will continue to try different components and see how it goes. Hopefully well.

Thanks a lot for your help and responsiveness 🫶🏼