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

jscottsf · 2019-08-06T06:42:48Z

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.

The text was updated successfully, but these errors were encountered:

kevinmarrec · 2019-08-06T08:41:54Z

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 · 2019-08-06T08:55:04Z

@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 · 2019-08-06T15:29:51Z

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 · 2019-08-23T15:55:57Z

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 · 2019-08-23T16:12:15Z

@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 · 2019-08-23T16:13:49Z

@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 · 2019-08-23T16:21:59Z

@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 · 2019-09-10T05:52:34Z

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

MarkSonn · 2019-12-22T12:46:14Z

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

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

agustiinlombardo · 2020-01-17T03:35:29Z

@MarkSonn

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

Update @nuxtjs/vuetify to the lastest version

In your package.json: move @nuxtjs/vuetify from devDependencies to dependencies

Thnks!
Your answers helped me 👍

kevinmarrec · 2020-01-17T07:29:51Z

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 · 2020-07-01T13:06:37Z

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?

manniL · 2020-07-03T11:51:04Z

Reopened

jomellelastrilla · 2020-08-14T10:10:09Z

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 · 2020-09-03T03:45:21Z

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 · 2020-10-03T05:27:16Z

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

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
      }
    }
  }
}

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

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

See: nuxt-community/vuetify-module#101

CrazyUmka · 2020-11-09T15:39:18Z

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

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,
      },
    },
  },
}

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 · 2021-01-01T07:43:19Z

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

StanleyMasinde · 2021-02-21T18:44:50Z

@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 · 2021-03-17T01:55:09Z

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!

Fix this error: Cannot find module 'vuetify/es5/util/colors' in /nuxt.config.js More info: nuxt-community/vuetify-module#101 (comment)

chiragparekh · 2021-04-27T09:29:09Z

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"
}
}

--> Due to nuxt-community/vuetify-module#101

narthkings · 2021-05-03T06:01:22Z

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 · 2021-11-02T16:30:26Z

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

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
      }
    }
  }
}
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 · 2022-04-04T15:15:24Z

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 · 2022-10-11T09:52:54Z

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 · 2023-06-08T04:39:34Z

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 · 2023-07-12T21:30:07Z

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

jscottsf closed this as completed Aug 6, 2019

PandaWhisperer mentioned this issue Jan 25, 2020

502: Bad Gateway after deploying nuxt/vercel-builder#178

Closed

kishorsharma mentioned this issue Jun 22, 2020

Unable to deploy NuxtJs 2.13.0 on Google App engine nuxt/nuxt#7578

Closed

manniL reopened this Jul 3, 2020

roschaefer added a commit to tactilenews/journcoin that referenced this issue Oct 15, 2020

fix: issue with nuxt-vuetify+vercel

08b0b3e

See: nuxt-community/vuetify-module#101

roschaefer added a commit to tactilenews/journcoin that referenced this issue Oct 15, 2020

fix: issue with nuxt-vuetify+vercel

4181a65

See: nuxt-community/vuetify-module#101

valentinoli added a commit to valentinoli/epfl-coursenet that referenced this issue Apr 30, 2021

Move vuetify from devDependencies

ab2909a

--> Due to nuxt-community/vuetify-module#101

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jscottsf commented Aug 6, 2019

kevinmarrec commented Aug 6, 2019 •

edited

Loading

kevinmarrec commented Aug 6, 2019 •

edited

Loading

jscottsf commented Aug 6, 2019

morficus commented Aug 23, 2019

kevinmarrec commented Aug 23, 2019 •

edited

Loading

morficus commented Aug 23, 2019

kevinmarrec commented Aug 23, 2019

N1t35h commented Sep 10, 2019

MarkSonn commented Dec 22, 2019

agustiinlombardo commented Jan 17, 2020 •

edited

Loading

kevinmarrec commented Jan 17, 2020 •

edited

Loading

MarkSonn commented Jul 1, 2020

manniL commented Jul 3, 2020

jomellelastrilla commented Aug 14, 2020

agustiinlombardo commented Sep 3, 2020

cdleon commented Oct 3, 2020

CrazyUmka commented Nov 9, 2020 •

edited

Loading

pomcho555 commented Jan 1, 2021

StanleyMasinde commented Feb 21, 2021

ffxsam commented Mar 17, 2021

chiragparekh commented Apr 27, 2021

narthkings commented May 3, 2021

Nechitadi commented Nov 2, 2021

Reeska commented Apr 4, 2022

SerDroide commented Oct 11, 2022 •

edited

Loading

Shujee commented Jun 8, 2023

agersea commented Jul 12, 2023

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

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

Comments

jscottsf commented Aug 6, 2019

kevinmarrec commented Aug 6, 2019 • edited Loading

kevinmarrec commented Aug 6, 2019 • edited Loading

jscottsf commented Aug 6, 2019

morficus commented Aug 23, 2019

kevinmarrec commented Aug 23, 2019 • edited Loading

morficus commented Aug 23, 2019

kevinmarrec commented Aug 23, 2019

N1t35h commented Sep 10, 2019

MarkSonn commented Dec 22, 2019

agustiinlombardo commented Jan 17, 2020 • edited Loading

kevinmarrec commented Jan 17, 2020 • edited Loading

MarkSonn commented Jul 1, 2020

manniL commented Jul 3, 2020

jomellelastrilla commented Aug 14, 2020

agustiinlombardo commented Sep 3, 2020

cdleon commented Oct 3, 2020

CrazyUmka commented Nov 9, 2020 • edited Loading

pomcho555 commented Jan 1, 2021

StanleyMasinde commented Feb 21, 2021

ffxsam commented Mar 17, 2021

chiragparekh commented Apr 27, 2021

narthkings commented May 3, 2021

Nechitadi commented Nov 2, 2021

Reeska commented Apr 4, 2022

SerDroide commented Oct 11, 2022 • edited Loading

Shujee commented Jun 8, 2023

agersea commented Jul 12, 2023

kevinmarrec commented Aug 6, 2019 •

edited

Loading

kevinmarrec commented Aug 6, 2019 •

edited

Loading

kevinmarrec commented Aug 23, 2019 •

edited

Loading

agustiinlombardo commented Jan 17, 2020 •

edited

Loading

kevinmarrec commented Jan 17, 2020 •

edited

Loading

CrazyUmka commented Nov 9, 2020 •

edited

Loading

SerDroide commented Oct 11, 2022 •

edited

Loading