BUG: ESLINT / TS error when importing type

[C2dricLeroy]

Description

ESLint reports Meta as unused despite its clear usage in const meta: Meta

There might be a misalignment between ESLint and TypeScript, causing incorrect linting behavior for imported types.

Related Tickets & Documents

• An exemple of this issue can be found here

Error message :

3:15 warning 'Meta' is defined but never used no-unused-vars

[C2dricLeroy]

The error occurs because we are using TS but the ESLint config is set up with Babel parser

Maybe should we replace:
parser: '@babel/eslint-parser',
With
parser: '@typescript-eslint/parser',

And add
plugins: [ '@typescript-eslint' ]
and
extends: [ 'plugin:@typescript-eslint/recommended' ],

With these changes, we should be able to import properly types.

I still need to investigate the potential side effects, let me know if you see anything.

[kotAPI]

Good find! I think you can raise a pr for this. Once these changes are made, can you check the Meta issue we had on the storybook, if this resolves it, we can merge.

To give you a context, this was a JS project before - so there might be JS related config still lying around

[chromium-52]

Hi @C2dricLeroy are you looking into this atm?

[C2dricLeroy]

Hello @chromium-52 , no I'm not,

You can look at it if you want ;)

[Dagdon]

As a MERN stack developer, I'm well-versed in working with both TypeScript and ESLint in real-world projects. I've encountered and resolved similar issues in both frontend (React) and backend (Node/NestJS) environments — especially around type-only imports and module resolution.

For this bug, I’ll:
Identify where and why the import is triggering ESLint/TS errors.
Adjust the config (tsconfig.json, ESLint rules, or import paths) as needed.
Ensure clean, type-safe imports that won’t break your build or linter.
Test and document the fix to keep the dev experience smooth for others.

I’m comfortable navigating complex codebases and keeping things clean and readable. I’d love to take this one on.

[kotAPI]

As a MERN stack developer, I'm well-versed in working with both TypeScript and ESLint in real-world projects. I've encountered and resolved similar issues in both frontend (React) and backend (Node/NestJS) environments — especially around type-only imports and module resolution.

For this bug, I’ll: Identify where and why the import is triggering ESLint/TS errors. Adjust the config (tsconfig.json, ESLint rules, or import paths) as needed. Ensure clean, type-safe imports that won’t break your build or linter. Test and document the fix to keep the dev experience smooth for others.

I’m comfortable navigating complex codebases and keeping things clean and readable. I’d love to take this one on.

Sure, you can help with how we can structure the storybook files, specifically the Meta type in stories

[Dagdon]

I will appreciate that.
Assign me the issue so I can be begin working on it immediately.

[kotAPI]

I will appreciate that. Assign me the issue so I can be begin working on it immediately.

You can reply to the issue on your findings and let me know what the problem is and suggest a fix, based on the discussion we can proceed further

[Dagdon]

From what I’ve seen, the issue might be related to the use of Babel’s ESLint parser, which doesn’t always handle TypeScript’s type-only imports properly, especially in files like stories where types like Meta are only used for type annotation. This might be why ESLint is mistakenly flagging Meta as unused.

Switching to the TypeScript ESLint parser and enabling the recommended plugin/config could potentially resolve this, as it’s more aligned with TypeScript’s syntax and usage patterns. Also, marking imports as type-only could help clarify intent to the linter.

[kotAPI]

From what I’ve seen, the issue might be related to the use of Babel’s ESLint parser, which doesn’t always handle TypeScript’s type-only imports properly, especially in files like stories where types like Meta are only used for type annotation. This might be why ESLint is mistakenly flagging Meta as unused.

Switching to the TypeScript ESLint parser and enabling the recommended plugin/config could potentially resolve this, as it’s more aligned with TypeScript’s syntax and usage patterns. Also, marking imports as type-only could help clarify intent to the linter.

Sure, feel free to raise a PR with a fix

[Dagdon]

From what I’ve seen, the issue might be related to the use of Babel’s ESLint parser, which doesn’t always handle TypeScript’s type-only imports properly, especially in files like stories where types like Meta are only used for type annotation. This might be why ESLint is mistakenly flagging Meta as unused.
Switching to the TypeScript ESLint parser and enabling the recommended plugin/config could potentially resolve this, as it’s more aligned with TypeScript’s syntax and usage patterns. Also, marking imports as type-only could help clarify intent to the linter.

Sure, feel free to raise a PR with a fix

Okay, assign me the issue so that I can begin working on it.

[Dagdon]

Hello, apologies for my silence. I worked on it but trying to test it and it has been showing more problems so I’ll let you know when I’m done. Thank you.