adding nuxt plugins

[furqon]

Hi, thanks for the work.

Im trying to add windicss to be added in the apps. But using the guide from the site to add nuxt-windicss in server/nuxt/nuxtjs.config.ts seems to not work.

 FATAL  A dynamic import callback was not specified.                                                                       16:10:53

  at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:34:9)
  at ModuleContainer.module.exports (node_modules/nuxt-windicss/module.cjs:3:3)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:34)
  at node_modules/@nuxt/utils/dist/utils.js:639:43
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)

[Nest] 9990  - 11/16/2021, 4:10:53 PM   ERROR [Bootstrap] A dynamic import callback was not specified.
[Nest] 9990  - 11/16/2021, 4:10:53 PM   ERROR [Bootstrap] undefined

Can you explain how to add nuxt plugins with this apps?

thanks.

[Goopil]

Hi @furqon,

thanks for opening this issue. The plugins should works as is. (i'm using a couple of the in this project)

• Which version of windicss are you using ? Are you not using the vue 3 version perhaps ?
• do you have a repository i could look in to ?
• Did you test it in a fresh nuxt v2 project ?

[furqon]

Hi @Goopil

I'm just clone directly from the repo

git clone https://github.com/Goopil/nest-nuxt-starter.git
cd nest-nuxt-starter
yarn install
yarn add nuxt-windicss -D

edit: server/nuxt/nuxt.config.js, add nuxt-windicss in buildModules buildModules: ['@nuxt/typescript-build', 'nuxt-windicss'],

edit: tsconfig.json, add nuxt-windicss

"types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "reflect-metadata",
      "jest",
      "nuxt-windicss"
]

here is the dependencies in package.json

  "dependencies": {
    "@nestjs/common": "8.1.2",
    "@nestjs/core": "8.1.2",
    "@nestjs/platform-express": "8.1.2",
    "@nestjs/platform-fastify": "8.1.2",
    "@nuxtjs/axios": "5.13.6",
    "nuxt": "2.15.8",
    "nuxt-precompress": "0.5.9",
    "nuxt-property-decorator": "2.9.1",
    "reflect-metadata": "0.1.13",
    "rxjs": "7.4.0",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@nestjs/cli": "8.1.4",
    "@nestjs/schematics": "8.0.4",
    "@nestjs/testing": "8.1.2",
    "@nuxt/types": "2.15.8",
    "@nuxt/typescript-build": "2.1.0",
    "@types/connect": "3.4.35",
    "@types/express": "4.17.13",
    "@types/jest": "27.0.2",
    "@types/node": "16.11.6",
    "@types/supertest": "2.0.11",
    "clean-webpack-plugin": "4.0.0",
    "concurrently": "6.3.0",
    "cross-env": "7.0.3",
    "jest": "27.3.1",
    "nuxt-windicss": "^2.0.12",
    "prettier": "2.4.1",
    "rimraf": "3.0.2",
    "run-script-webpack-plugin": "0.0.11",
    "sass": "1.43.4",
    "supertest": "6.1.6",
    "ts-jest": "27.0.7",
    "ts-loader": "8.3.0",
    "ts-node": "10.4.0",
    "tsconfig-paths": "3.11.0",
    "tslint": "6.1.3",
    "typescript": "4.4.4",
    "webpack": "4.46.0",
    "webpack-cli": "4.9.1",
    "webpack-node-externals": "3.0.0"
  },

[Goopil]

Hi again @furqon,

Looking a little deeper at your error. It seems that the problem lies in how nodejs import libraries.

What version of nodejs are you using ?

if you look at the client/tsconfig.json.

the module property is set to esnext. It means that the compilation will use the import in place of require to load module. If your node version is old. It won't work.

Could you try to set it up your client tsconfig file like this ?

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS", 
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "allowJs": true,
    "noEmit": true
  }
}

let me know if this solve your problem.

You may also update your nodejs version to lts ;)

[furqon]

You are right @Goopil

I'm using node version v14.17.6, changing the compilerOptions.module to CommonJS works! It's great.

I'm trying with fresh clone and upgraded node version to v16.13.0 problem still exist, using v17.1.0 returning different error and solved with this error ERR_OSSL_EVP_UNSUPPORTED, but the same error show up (A dynamic import callback was not specified)

Btw, Im using CommonJS for now. Thank you again @Goopil

[Goopil]

Hu ? strange. I'm also using node 16.13.0 but via nvm. The binary is perhaps compiled with others flags. In any case, As i do not specify a minimal supported version in the project (my bad i will) or at list indicate it.

Any way thank you for pointing that out :)

I will switch back to commonJs module for now