TypeError: content is not a function

[DaoOqu]

I currently have a project where I'm using vite + react. I have the vite.config.ts file set up like so:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
import content from '@originjs/vite-plugin-content'

export default defineConfig({
  plugins: [checker({ typescript: true }), content(), react()],
})

but get this error whenever I try to run the program:

failed to load config from C:\Users\PC\GitHub Repos\googleFormClone\vite.config.ts
error when starting dev server:
TypeError: content is not a function
    at file:///C:/Users/PC/GitHub%20Repos/googleFormClone/vite.config.ts.timestamp-1674935335874.mjs:7:44
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadConfigFromBundledFile (file:///C:/Users/PC/GitHub%20Repos/googleFormClone/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62084:21)
    at async loadConfigFromFile (file:///C:/Users/PC/GitHub%20Repos/googleFormClone/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61969:28)
    at async resolveConfig (file:///C:/Users/PC/GitHub%20Repos/googleFormClone/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:61590:28)
    at async createServer (file:///C:/Users/PC/GitHub%20Repos/googleFormClone/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:60910:20)
    at async CAC.<anonymous> (file:///C:/Users/PC/GitHub%20Repos/googleFormClone/node_modules/vite/dist/node/cli.js:729:24)

I've tried other solutions to similar issues that pertain to different plugins but none seem to help.
Note: the code will run just fine when content() is left out.

It may be a version clash issue of some sort but I can't be certain. In any case, here are my module versions:

  "dependencies": {
    "nanoid": "^4.0.0",
    "papercss": "^1.9.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@originjs/vite-plugin-content": "^1.0.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "prettier": "^2.8.3",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-checker": "^0.5.4"
  }

Thanks in advance!

[AaronBeaudoin]

Same issue here. Looks like it occurs as a result of me now needing to specify type: "module"in my package.json.

[AaronBeaudoin]

It looks like using content.default() instead works, but now my type checking in my IDE complains.

[DaoOqu]

This is my full package.json:

{
  "name": "googleformclone",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit",
    "prettier": "prettier src --write",
    "nanoid": "nanoid --alphabet 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz --size 11"
  },
  "dependencies": {
    "nanoid": "^4.0.0",
    "papercss": "^1.9.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@originjs/vite-plugin-content": "^1.0.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "prettier": "^2.8.3",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-checker": "^0.5.4"
  }
}

Notice the "type": "module" at the top. Interestingly enough, without changing anything else, I deleted this line out of curiosity and it ran without issues, which I wasn't expecting. I'm not sure what the correlation is but it seemed to work

[AaronBeaudoin]

That happens because the presence of type: "module" impacts how import statements work. My understanding is that if you add type: "module", import statements will be treated the "ESM" way instead of the "CJS" way.

I'm not sure of all the little details of what the differences are, but it looks like vite-plugin-content has not been updated to use the "ESM" way. To get around that, just can just use (content as any).default() until the maintainer of this repo fixes the plugin. Or obviously, as you have discovered, you can also remove type: "module", but I would personally be very careful with changes like that because you have no idea what other packages in your project could also end up being affected by such a change.

[DaoOqu]

I was originally under the impression that without type: module my imports wouldn't work. I didn't expect it to run but it did, which was interesting to note.

But yeah, not something I want to mess with. Setting content as default will have to do for now.

Thanks for the back and forth!

[PeterAlfredLee]

Hi @DaoOqu and @AaronBeaudoin
Thank you for your detailed reports!
I will try to solve this soon.

[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.

[PeterAlfredLee]

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.

[DaoOqu]

I appreciate your attention towards this issue, Peter! Thank you!

[PeterAlfredLee]

Hi @DaoOqu
Is this issue fixed in recently published version 1.0.3?
BTW thanks for your reporting. :)

[DaoOqu]

Yes! All good on my end now, thanks again 👍