Cannot find module 'vuetify/lib/util/colors' in nuxt.config.js

[jscottsf]

Module version 1.0.2

Describe the bug Production app throws Cannot find module 'vuetify/lib/util/colors' in nuxt.config.js.

To Reproduce Specify the following in next.config.js for custom colors:

import colors from 'vuetify/es5/util/colors'

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

Works in dev since the dev dependencies are available. If you build for production in a Docker container, throws the error Cannot find module 'vuetify/lib/util/colors' since dev dependencies are not loaded when NODE_ENV is production.

[kevinmarrec]

Hi @jscottsf ,

~~I think that in your case it's totally fine having the module in dependencies, as you indeed need your production Docker container to install the dependency to build your application.~~

~~You can still let the module as a devModule around your configuration, so that the module is not registered when using nuxt start :).~~

EDIT : Check my last comment

Also, please update to the last version of the module (1.2.0) 😉

[kevinmarrec]

@jscottsf See this new option (if you upgrade the module to 1.2.0) : https://github.com/nuxt-community/vuetify-module#optionspath

Defining options like this will make the Vuetify colors will be bundled by Webpack at build step, it should fix your issue.

Ultimate solution would be moving @nuxtjs/vuetify to dependencies.

[jscottsf]

Thank you for the fast reply.

Yes, for the short term I moved @nuxtjs/vuetify to dependencies.

I will definitely update and check out optionsPath.

Thx! 👍

[morficus]

I feel like this should be more prominent in the README. when using the Nuxt project generator, it automatically installs this module as a dev-dependency and places all the vuetify config in nuxt.config.js.

So any user who does not dig in to the issues section will be blind to the issue until they try to do a production deployment.

[kevinmarrec]

@morficus You're right but it's more likely create-nuxt-app that needs to be updated, could you please an issue there ? Thanks.

[morficus]

@kevinmarrec fair point. I noticed create-nuxt-app is also still using v1.0.0 of this module. So they certainly do need to update.

[kevinmarrec]

@morficus Well AFAIK, ^1.0.0 in package.json should install 1.x.x so it should install last version for fresh projects if i'm right.

[N1t35h]

@jscottsf hey brother, did you find solution for that missing package ? i am facing the same problem in nuxt/vuetify.

[MarkSonn]

Still not fixed by default. I got mine working using the above solutions:

1. Update @nuxtjs/vuetify to the lastest version
2. In your package.json: move @nuxtjs/vuetify from devDependencies to dependencies

[agustiinlombardo]

@MarkSonn

Still not fixed by default. I got mine working using the above solutions:

1. Update @nuxtjs/vuetify to the lastest version
2. In your package.json: move @nuxtjs/vuetify from devDependencies to dependencies

Thnks! Your answers helped me 👍

[kevinmarrec]

Using optionsPath is the way to go to not have Vuetify needed in dependencies. If you keep Vuetify imports in nuxt.config.js it's obvious you need Vuetify at runtime (so in dependencies)

[MarkSonn]

Can someone please reopen this issue. It is not fixed by default. I think making a new issue is counter-intuitive.

@manniL you seem quite active on here. Are you able to help please?

[TheAlexLichter]

Reopened

[jomellelastrilla]

I'm having a same problem too hoping they have a fix for here. Mine was NuxtJS + Vuetify tryiing to deploy to Firebase Hosting

https://prnt.sc/tzgyq2

[agustiinlombardo]

I'm having a same problem too hoping they have a fix for here. Mine was NuxtJS + Vuetify tryiing to deploy to Firebase Hosting

https://prnt.sc/tzgyq2

You need replace the "export default { ... }" to "module.exports = { ... }"

[cdleon]

This is the alternate solution that doesn't need @nuxtjs/vuetify to be moved from devDependencies to dependencies (currently working with Vercel).

1. Create a vuetify.options.js in the root dir of the project and copy the vuetify settings from nuxt.config.js as follows

/*
vuetify.config.js
*/

import colors from 'vuetify/es5/util/colors'

export default {
  customVariables: ['~/assets/variables.scss'],
  optionsPath: './vuetify.options.js',
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: colors.blue.darken2,
        accent: colors.grey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3
      }
    }
  }
}

2. Replace the vuetify entry in nuxt.config.js with the following

...
vuetify: {
  optionsPath: './vuetify.options.js'
},
...

[CrazyUmka]

The simple solution to fix the problem without moving this dependency to dev. It perfectly works on javascript and typescript.

1. Example vuetify.options.ts

import colors from 'vuetify/src/util/colors'
import ru from 'vuetify/src/locale/ru'

export default {
  lang: {
    locales: { ru },
    current: 'ru',
  },
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: colors.blue.darken2,
        accent: colors.grey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3,
      },
    },
  },
}

2. Add vuetify dependency to transpile array in nuxt.config.js. It should look like this:

{
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    optionsPath: '~/vuetify.options.ts',
  },
  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: [/vuetify/],
  },
}

P.S. You can try to check it via a docker multi-staging build.

FROM node:latest as builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

FROM node:alpine
WORKDIR /app
COPY package.json yarn.lock ./
ENV NODE_ENV=production
RUN yarn
COPY nuxt.config.js ./
COPY --from=builder /app/.nuxt ./.nuxt/
COPY --from=builder /app/static ./static/
EXPOSE 3000
ENV NUXT_HOST=0.0.0.0
ENTRYPOINT [ "yarn", "run" ]
CMD [ "start" ]

[pomcho555]

I can develop the environment by converting docker base image node:14.15.3-alpine3.10 into node:14.15.3-buster.

[StanleyMasinde]

@jscottsf See this new option (if you upgrade the module to 1.2.0) : https://github.com/nuxt-community/vuetify-module#optionspath

Defining options like this will make the Vuetify colors will be bundled by Webpack at build step, it should fix your issue.

Ultimate solution would be moving @nuxtjs/vuetify to dependencies.

Moving all @nuxtjs dependencies from devDependencies to dependencies helped. I don't understand why they were in dev in the first place.

[ffxsam]

Still not fixed. Just created a fresh Nuxt project w/ Vuetify and it's busted when you deploy to production. 🤔

But many thanks to @MarkSonn for the easy & quick fix!

[chiragparekh]

Hi I am having same issue when I try to deploy site on netlify but its working fine on my local machine. Here is my package.json

{ "name": "dashboard-nuxt-app", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@nuxtjs/axios": "^5.13.1", "@nuxtjs/vuetify": "^1.11.3", "chart.js": "^2.9.4", "core-js": "^3.9.1", "js-cookie": "^2.2.1", "nuxt": "^2.15.3", "sweetalert2": "^10.16.4", "vee-validate": "^3.4.5", "vue-chartjs": "^3.5.1", "vuex-map-fields": "^1.4.1", "vuex-persistedstate": "^4.0.0-beta.3" }, "devDependencies": { "eslint-config-prettier": "^8.1.0", "eslint-plugin-prettier": "^3.3.1", "prettier": "^2.2.1", "sass": "^1.32.8", "sass-loader": "^10.1.1" } }

[narthkings]

hello guys, I tried moving the @nuxtjs/vuetify module to the dependency from devDependency, it works quite well on netlify but on digital ocean provisioned server I have it gives me an error still stating cannot find module 'vuetify/es5/util/colors'. any help pls

[Nechitadi]

This is the alternate solution that doesn't need @nuxtjs/vuetify to be moved from devDependencies to dependencies (currently working with Vercel).

1. Create a vuetify.options.js in the root dir of the project and copy the vuetify settings from nuxt.config.js as follows

/*
vuetify.config.js
*/

import colors from 'vuetify/es5/util/colors'

export default {
  customVariables: ['~/assets/variables.scss'],
  optionsPath: './vuetify.options.js',
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: colors.blue.darken2,
        accent: colors.grey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3
      }
    }
  }
}

1. Replace the vuetify entry in nuxt.config.js with the following

...
vuetify: {
  optionsPath: './vuetify.options.js'
},
...

It worked for me. I think this is the best solution. Thanks a lot! 👏🏼

[Reeska]

It sill an issue for me, I try to move from devDependencies to dependencies, try to use ~/ instead of ./, try to use last version of @nuxtjs/vuetify, try to use options directly in buildModules ['@nuxtjs/vuetify', {optionsPath: './vuetify.options.js'}. Nothing works :(

[SerDroide]

I'm not sure if it is a good practice but setting NPM_CONFIG_PRODUCTION=false before install solved the issue for me. This tell npm to install also devDependencies.

btw I'm using an old version of nuxt, maybe is not needed anymore:

"dependencies": {
        "@nuxtjs/auth": "^4.9.1",
        "@nuxtjs/axios": "^5.3.6",
        "chart.js": "^2.9.4",
        "nuxt": "^2.0.0",
        "vue-chartjs": "^3.5.1"
    },
    "devDependencies": {
        "@nuxtjs/eslint-config": "^2.0.0",
        "@nuxtjs/eslint-module": "^1.0.0",
        "@nuxtjs/moment": "^1.6.1",
        "@nuxtjs/vuetify": "^1.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^6.1.0",
        "eslint-plugin-nuxt": ">=0.4.2"
    },

My multistage Dockerfile:

# build_or_develop
FROM node:14-bullseye as build_or_develop

ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
ENV NUXT_HOST=0.0.0.0
ENV NPM_CONFIG_PRODUCTION=false

RUN mkdir -p /home/node/nuxt/app && \
    chown -R node:node /home/node/nuxt

USER node
WORKDIR /home/node/nuxt

COPY ./package.json ./yarn.lock ./
RUN yarn install
ENV PATH /home/node/nuxt/node_modules/.bin:$PATH

WORKDIR /home/node/nuxt/app
EXPOSE 3000
CMD ["yarn", "dev"]

# production
FROM node:14-bullseye

ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
ENV NUXT_HOST=0.0.0.0

RUN mkdir -p /home/node/nuxt/app && \
    chown -R node:node /home/node/nuxt

USER node
WORKDIR /home/node/nuxt

COPY --from=build_or_develop /home/node/nuxt/node_modules ./node_modules
ENV PATH /home/node/nuxt/node_modules/.bin:$PATH

WORKDIR /home/node/nuxt/app
COPY ./ .
RUN yarn build
EXPOSE 3000
CMD ["yarn", "start"]

[Shujee]

I'm seeing this problem in vite+typescript-based vuetify 3 project. I'm using latest vue and vuetify. Also vite adds vuetify to dependencies section, not devDependencies, and tsconfig.json does contain "types": ["vuetify"] entry in it, but VSCode keeps complaining about it:

Cannot find module 'vuetify/lib/util/colors' or its corresponding type declarations.

Interestingly, colors.orange.base work correctly in my project.

[agersea]

+1 to @Shujee comment. I have the same setup vite, TS, vue3, vuetify3, and I'm seeing the same behavior. I also have vuetify added to the TSConfig types array.

TS complains about the import path, but all of the colors resolve.