Vuetify-module: Errors with nuxt generate when using latest v1.10.2 of module

[manastalukdar]

Module version
1.10.2

Describe the bug
With the latest version of the module, nuxt generate results in TypeError: Cannot assign to read only property 'base' of object '#<Object>'.

To Reproduce
https://github.com/manastalukdar/manastalukdar.github.io/tree/issue89

1. Get _blog_metadata.json_ file from here.
2. Under the website/static folder, create a new folder called blogdata.
3. Under blogdata folder create a new folder called metadata and copy the _blog_metadata.json_ from step 1 into this new website/static/blogdata/metadata folder.
4. Copy the folder (along with all sub-folders) website/blog/2019 into website/static/blogdata. website/static/blogdata should now have 2 subfolders: 2019 and metadata.
5. Run npm install.
6. Run npm run generate.

Expected behavior
All pages get generated correctly.

Actual Behavior

TypeError: Cannot assign to read only property 'base' of object '#<Object>'
    at W (server.js:1:7914)
    at W (server.js:1:7898)
    at W (server.js:1:7898)
    at W (server.js:1:7898)
    at W (server.js:1:7898)
    at new We (server.js:1:749132)
    at Wo.use (server.js:1:768689)
    at new Wo (server.js:1:768382)
    at Go (server.js:1:770226)
    at hi (server.js:1:774607)
    at async e.default (server.js:1:775704)

[dwfee]

I experienced same error, when using custom names for colors, when you stick with the default names, primary, secondary etc. I will work, this is, I think not a generate issue, but a general issue. Please try it, to confirm my idea.
Greetings from dwfee, Bavaria

[manastalukdar]

@dwfee You are correct. I have verified that the custom color names are causing the problem.

[douira]

I'm getting the same error when running it normally with nuxt dev. Maybe it's some kind of cache issue? This error only pops up after reloading the page or navigating with some kind of new load. (not just a SPA navigation) I'm not using non-standard color names though.

[douira]

I can confirm this same error still happens on the 1.11.0 version of this module.

Edit: I have found a workaround/fix: Apparently the issue was that the color objects need to be more specified. This means you need to pass primary: colors.lightBlue.base instead of without .base. The error makes sense in this context since it mentions the property base.

This seems to be either a change in vuetify 2.2 or a change in the latest version of this module. One way or another this is an undocumented breaking change as it stands now. I suggest either documenting it and releasing it as part of a major version change or modifying the behavior in such a way that this error doesn't happen when the "old" way of specifying colors is used.

[dschreij]

I experienced the same problem. I noticed that if I set all config option in nuxt.config.js everything works correct, but once I place the vuetify settings in an external .js file using the optionsPath config option, then this error starts to occur.

When I add .base to each color entry, as suggested by , the nuxt generate process completes, but when loading the site, the following error occurs:

Uncaught ReferenceError: exports is not defined
    at Object.<anonymous> (7db537a5595104f6898b.js:2)
    at o (b56bee459507406e5fdb.js:1)
    at Object.49 (9c7f845e40b5922cb5c7.js:1)
    at o (b56bee459507406e5fdb.js:1)
    at Module.<anonymous> (9c7f845e40b5922cb5c7.js:1)
    at Module.236 (9c7f845e40b5922cb5c7.js:1)
    at o (b56bee459507406e5fdb.js:1)
    at Object.235 (9c7f845e40b5922cb5c7.js:1)
    at o (b56bee459507406e5fdb.js:1)
    at t (b56bee459507406e5fdb.js:1)

which relates to the color definitions again, as the error is marked at:

 Object.defineProperty(exports, "__esModule", {
        value: !0
    }),
    exports.default = void 0;
    var r = Object.freeze({
        base: "#f44336",
        lighten5: "#ffebee",
        lighten4: "#ffcdd2",
        lighten3: "#ef9a9a",
        lighten2: "#e57373",
        lighten1: "#ef5350",
        darken1: "#e53935",
        darken2: "#d32f2f",
        darken3: "#c62828",
        darken4: "#b71c1c",
        accent1: "#ff8a80",
        accent2: "#ff5252",
        accent3: "#ff1744",
        accent4: "#d50000"
    })

in the generated code.

[1isten]

Same here, cannot use optionsPath option to refer to my external config file..

[kevinmarrec]

Hi everyone,

I's cause :

{
  primary: colors.red
}

is not valid.

You need to use :

{
  primary: colors.red.base
}

[kevinmarrec]

See : https://github.com/nuxt-community/vuetify-module/blob/master/test/fixture/vuetify.options.ts#L9

[dschreij]

I think I tried this, but it didn't work, but maybe I did it wrong, so for the base colors you can do

{
  primary: colors.red.base
}

but what about the colors with modifiers?
Is it

{
  primary: colors.red.lighten1.base
}

or simply

{
  primary: colors.red.lighten1
}