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?

Guy Nachshon · Accepted Answer · 2022-04-26 17:57:03Z

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:

upgrade esbuild (npm update esbuild)

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

answered Apr 26, 2022 at 17:57

Guy Nachshon

2,7017 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Samball Over a year ago

When adding nuxt-vite to the project it does not add a vite.config.js file also when I create one it does nothing. In the documentation for nuxt-vite it says that all the configuration should be in nuxt.config.js. So I added it there, but still get the same warnings.

Guy Nachshon Over a year ago

I'll look at it, did it solve your second error though?

Guy Nachshon Over a year ago

can you share your css? or just make sure all your import declaration there are at the top of the file?

Samball Over a year ago

The postcss-preset-env update did not work. But downgrading it to version 7 did. Also I don't have any CSS of my own. Just the default CSS from creating a Nuxt project with vuetify.

Collectives™ on Stack Overflow

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

The problem:

Package versions:

What I have tried so far:

Using yarn to add older modules:

Downgrading nuxt-vite

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem:

Package versions:

What I have tried so far:

Using yarn to add older modules:

Downgrading nuxt-vite

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related