@chakra-ui/cli tokens resolves to a wrong tsconfig path resulting in JSON5 error parse

Description

When running @chakra-ui/cli tokens it resolves to a wrong tsconfig path resulting in a JSON5 error crash

Link to Reproduction

N/A

Steps to reproduce

The error:

$ chakra-cli tokens ./src/components/ui/styles/theme.ts

 Chakra UI CLI  v1.5.1 by chakra UI
Generate theme typings for autocomplete


✖ An error occurred
SyntaxError: JSON5: invalid character 'i' at 1:1

This is what I was able to find during a debug session:

The bug is a result of https://github.com/chakra-ui/chakra-ui/pull/4725 which tries to load the related tsconfig using tsconfig-paths. However instead of it resolving to a tsconfig.json file it uses the exact same file path from the specified theme file.

It all goes wrong on the following line: https://github.com/chakra-ui/chakra-ui/blob/main/tooling/cli/src/scripts/read-theme-file.worker.ts#L34

By calling: tsConfigPaths.loadConfig directly with the absoluteThemePath it will eventually result in tsconfig-paths thinking that the tsconfig is exactly the path that was given (which is a TS file, not a config file).

The argument of tsConfigPaths.loadConfig expects a cwd. (see: https://github.com/dividab/tsconfig-paths/blob/master/src/config-loader.ts#L41) if this cwd is a file that exists it will default to thinking it is the tsconfig file (see: https://github.com/dividab/tsconfig-paths/blob/6dc51e43111bea24c847f24d8c13debe305b58bd/src/tsconfig-loader.ts#L74). This results in the CLI crashing.

Chakra UI Version

@chakra-ui/cli@1.5.1

Browser

N/A

Operating System

• macOS
• Windows
• Linux

Additional Information

Currently keeping our cli version at 1.5.0 as I don’t see any way to get around this.

[kasim444]

Hi everyone.

I used the latest version of chakra in my new project. When I run the “chakra-cli tokens” command, I get an error. A new version was released yesterday that the bug here has been fixed. But still this problem persists. Anyone else encountering this issue with the new version? ( @TimKolberger @segunadebayo )

Have a good day.

My chakra-ui versions:

"@chakra-ui/cli": "^1.5.2",
"@chakra-ui/react": "^1.6.9",

Error detail:

yarn postinstall
yarn run v1.22.10
$ yarn run gen:theme-typings
$ chakra-cli tokens ./src/styles/theme/index.ts

 Chakra UI CLI  v1.5.2 by chakra UI
Generate theme typings for autocomplete


✖ An error occurred
SyntaxError: Cannot use import statement outside a module
✨  Done in 4.97s.

[igorwessel]

Hey guys!

I think I managed to solve the problem, in your fix was reading the project’s tsconfig.json but if tsconfig.json didn’t have the settings for ts-node it ended up giving this error because it could only use CommonJS. I just override one of the user project settings to be able to use CommonJS.

I will branch now with a fix, but I still haven’t been able to write tests for it, I created a pull request with this fix #4818

Sorry for bad english!