TypeError: globalStyle is not a function

[zhangjing007]

[Jogai]

Probably forgot the change in vite.config.js

[aaron-romanick]

Probably forgot the change in vite.config.js

It happens with content too from within vite.config.js

[PeterAlfredLee]

Hi @zhangjing007 and @aaron-romanick
Could you provide more detailed information? It will be good if you can provide a repo that reproduces this problem.

[DaoOqu]

Following this thread as I am also having issues with content not being recognized as a function. See my discussion here: #175

My repo (https://github.com/DaoOqu/googleFormClone) reproduces the issue in question. Please advise

[DaoOqu]

Fixed the issue on my end by deleting the line "type": "module" from my package.json but that's probably not something you want to mess with as it affects how import is handled

Instead try setting (content as any).default(). This worked for me as well and much better work around.

[PeterAlfredLee]

Hi @DaoOqu
Thank you for your detailed report!
I will try to figure this out.

[PeterAlfredLee]

I successfully reproduce this problem. You are setting type: "module" in your package.json, which means you are loading all .js files in ESM way. On the other hand, vite-plugin-content is compiled as a commonjs package - which is mostly used in packages for nodejs environment - and a commonjs package must be used with some .default() syntax.

To fix this, I need to configure type: "module" in vite-plugin-content, and republish it in ESM module. I tested this solution in my local environment and it works. But this may lead to some other problems: for projects NOT configuring type: "module", they may receive error like this:

require() of ES modules is not supported.
require() of /xxx/vite-plugin-content/dist/index.js from /xxx/googleFormClone/vite.config.ts is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /xxx/vite-plugin-content/package.json.

This means all vite-plugin-content users must configure type: "module" in their projects to use ESM. This is not what I'm expecting - cause most users choose commonjs instead of ESM as their module style.

Currently I do not have other solutions for your problem. Feel free to give me some advices if you have.

In short words, I do not have a good enough solution for your problem for now. My suggestion is to use (content as any).default() as a workarount.

Update: I managed to find a solution from here. I just published vite-plugin-content 1.0.3 and vite-plugin-global-style 1.0.3. Could you have a try? @zhangjing007 @DaoOqu @aaron-romanick

[PeterAlfredLee]

I will add this workaround in README for now.