Updating to 4.1.1 caused import error

[fitted-dru]

I upgraded from 4.0.0 to 4.1.1, and got the following error when building my project:

import { createMakeStyles } from "./makeStyles";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/dru/code/fitted/frontend-retailer-portal-test/frontend-retailer-portal/node_modules/@fitted/shared/dist/utils/make-styles.js:4:21)
    at Module._compile (node:internal/modules/cjs/loader:1120:14) {
  type: 'SyntaxError'
}

Node.js v18.6.0

I did not try 4.1.0

[garronej]

Oh no 😢
Related to #105 and #106

@fitted-dru,
Could you give me more context?
What framwork are you using?
Can you go to the source, the actual makeStyles.ts file.

If would help a great deal if you could come up with a minimal repo that would enable me to reproduce.

[dvdprrsh]

@garronej I believe this is due to the module being removed from the tsconfig.json. This would change the value from "CommonJS" to the default (which is "ES6"/"ES2015" for when the target is not "ES3" or "ES5").

So, I think to solve, the commonjs build just needs to set the module option back to "CommonJS"

[garronej]

Thanks for helping me solve this @dvprrsh.
Can you try with "tss-react": "4.1.2-beta.0" and see if it solves the problem?
@jiby-aurum Can you confirm it still works for you?

[garronej]

Dosen't work with vite. Damn it module format are a nightmare.

@dvprrsh can you detail your setup so I can reproduce.

[dvdprrsh]

@garronej not working for me, I think you set the module to commonjs on the esm output not the commonjs output. :)

[jiby-aurum]

@garronej @dvprrsh IMHO I don't see how changing tsconfig.json in this project is gonna solve the issue. Its only used for generating the build, we generate the builds properly, the problem is in consumption.

Seemingly looking at the error, the cjs loader seems to have taken the esm version, based on exports it should have just took the cjs version, weird

[garronej]

IMHO I don't see how changing tsconfig.json in this project is gonna solve the issue.

@jiby-gh You are right of course. I'm trying to solve the issue while in a audiocall but yes, obviously.

Seemingly looking at the error, the cjs loader seems to have taken the esm version, based on exports it should have just took the cjs version, weird

Correct, @dvprrsh or @fitted-dru could you give me enough info on your setup so that I can reproduce and figure out what's going on?

[jiby-aurum]

@fitted-dru is @fitted/shared an es or cjs module, would you be able to share @fitted/shared/dist/utils/make-styles.js:4:21 or the relevant parts that import from tss-react.

[jiby-aurum]

ah stupid me, well, the built files are not fine, we build only esm version, the cjs version we were supposed to build as cjs is actually build as esm

[jiby-aurum]

@garronej should not have removed "module": "CommonJS", from tsconfig.json

[jiby-aurum]

@garronej sorry, I did not fully look at your PR, I added comment in the PR (https://github.com/garronej/tss-react/pull/106/files#r964897025), we need to put back the "module": "CommonJS", that should fix the issue.

I would also suggest we release a fix soon with this fix, as 4.1.1 would be broken for everyone who was using the library from a cjs context, which I think is all given it was just cjs earlier 😨

[jiby-aurum]

this was what @dvprrsh was mentioning and he was correct, I just assumed the build was generated properly, my bad

[jiby-aurum]

@dvprrsh ignore my previous request, already know the issue :), as soon as @garronej checks and releases a new version this should work for you

[garronej]

ah stupid me, well, the built files are not fine, we build only esm version, the cjs version we were supposed to build as cjs is actually build as esm

Yes you are correct, obviously, I check if it wasn't the case but got confused for some reason and it led me to the wrong conclusion.

Thank you very much for your help!

[garronej]

@jiby-aurum and @dvprrsh Do you confirm it's working with v4.1.2?

[garronej]

Still not working

[garronej]

I see the problem, it's something else

[garronej]

Sorry, @edikamy & @Thebarda and everyone else affected by this issue,

It's fixed in 4.1.3

[Thebarda]

Thank you @garronej. Downgrading to 4.0.0 works too but it's better to update a library ;)

[dvdprrsh]

@garronej @jiby-aurum No problem, and thank you for fixing it so quick! 😊

[edikamy]

Sorry, @edikamy & @Thebarda and everyone else affected by this issue,

It's fixed in 4.1.3

Thanks for your quick response @garronej