Nuxt.js using Vuetify and Vite causes "__createCJSModule__(...) is not a function" error

Question

The problem:

When creating a new Nuxt.js project using Yarn as the package manager and using Vuetify and Vite as build modules I get the following error in the browser (Google Chrome):

__createCJSModule__(...) is not a function

Also in my terminal I get the following warnings:

• WARN [vite:css] @charset must precede all other statements
• This version of postcss-preset-env is not optimised to work with PostCSS 8.

These warnings repeat multiple times.

I created my project like so:

yarn create nuxt-app testapp

Output:

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in testapp
? Project name: testapp
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules:
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? sam
? Version control system: Git

When this is completed I run yarn add nuxt-vite to add Vite to the project and add it under buildModules inside nuxt.config.js.

nuxt.config.js:

export default {
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    'nuxt-vite'
  ],
}

Then I cd into the project and run yarn dev. This then results in the multiple warnings and error message.

Screenshot of the warnings inside terminal
Screenshot of error message in browser

Package versions:

These are the (dev)dependencies im using and their versions (copied from package.json):

"dependencies": {
  "@nuxtjs/axios": "^5.13.6",
  "core-js": "^3.19.3",
  "nuxt": "^2.15.8",
  "vue": "^2.6.14",
  "vue-server-renderer": "^2.6.14",
  "vue-template-compiler": "^2.6.14",
  "vuetify": "^2.6.1",
  "webpack": "^4.46.0"
},
"devDependencies": {
  "@nuxtjs/vuetify": "^1.12.3",
  "nuxt-vite": "0.3.5"
}

What I have tried so far:

Using yarn to add older modules:

After some searching on Google I found this comment on an issue in the Nuxt.js Github repository. When using the yarn fix:

yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

This gets rid of the first warning @charset must precede all other statements but the second warning and error are still there.

Downgrading nuxt-vite

I've also tried to downgrade the nuxt-vite version by changing to version number in package.json from 0.3.5 to 0.2. After a yarn install this solution removes the error and I can visit the page, but the warnings in the console stay the same.

What is causing this error and how can I fix it?

Answer 1

I believe that those two errors are unrelated, so for that matter, keep nuxt-vite downgraded as it solved the first error.

Regarding your two other errors.

WARN [vite:css] @charset must precede all other statements

This error means that Vite has an @import declaration that is not at the top of their file. That was restricted in previous esbuilds. so to solve this, you can do one of two things:

1. upgrade esbuild (npm update esbuild)

2. disable these restrictions in your vite.config.js by adding the code attached below to your file.

   css: {
   preprocessorOptions: {
     scss: {
       charset: false
     },
     less: {
       charset: false,
     },
   },
   charset: false,
   postcss: {
     plugins: [{
       postcssPlugin: 'internal:charset-removal',
       AtRule: {
         charset: (atRule) => {
           if (atRule.name === 'charset') {
             atRule.remove();
           }
         }
       }
     }],
   },
   }
   

and to fix

This version of postcss-preset-env is not optimised to work with PostCSS 8.

you need to update postcss-preset-env as it has been fixed in one of their latest releases