Vuetify-module: 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?

[manniL]

Reopened

[jomskidoodle]

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

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

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