Skip to content

Module build failed, TypeError: Cannot read properties of undefined (reading 'styles') #4813

@HeadStudios

Description

@HeadStudios
  • Laravel Version: 9
  • Nova Version: 4
  • PHP Version: 9
  • Database Driver & Version: MySQL
  • Operating System and Version: Localhost
  • Browser type and version: Chrome
  • Reproduction Repository: https://github.com/###/###

So... anyone getting all these weird errors when they go to do a create new field option (php artisan nova:field kostasmatrix/vue-repeater)... looks like compiling so I could "watch" Vue fields and update is not going to play nice, not sure why as it was working before. Please have a look at screenshot:
https://share.getcloudapp.com/9ZugB4BN

Complete error after running command is below:
`kostakondratenko@Kostas-MacBook-Pro larapi % php artisan nova:field kostasmatrix/vue-repeater
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 1364 packages, and audited 1365 packages in 49s

98 packages are looking for funding
run npm fund for details

1 high severity vulnerability

To address all issues, run:
npm audit fix

Run npm audit for details.

Would you like to update your Composer packages? (yes/no) [yes]:

yes

Loading composer repositories with package information

In PathRepository.php line 167:

The url supplied for the path (./nova-components/nova-flexible-content) repository does not exist

update [--with WITH] [--prefer-source] [--prefer-dist] [--prefer-install PREFER-INSTALL] [--dry-run] [--dev] [--no-dev] [--lock] [--no-install] [--no-autoloader] [--no-suggest] [--no-progress] [-w|--with-dependencies] [-W|--with-all-dependencies] [-v|vv|vvv|--verbose] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--apcu-autoloader] [--apcu-autoloader-prefix APCU-AUTOLOADER-PREFIX] [--ignore-platform-req IGNORE-PLATFORM-REQ] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [-i|--interactive] [--root-reqs] [--] [...]

Would you like to install the field's NPM dependencies? (yes/no) [yes]:

yes

npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 759 packages, and audited 760 packages in 46s

76 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

Would you like to compile the field's assets? (yes/no) [yes]:

yes

dev
npm run development

development
mix

✖ Mix
Compiled with some errors in 328.83ms

ERROR in ./resources/js/components/DetailField.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (/Users/kostakondratenko/Dropbox/larapi/nova-components/VueRepeater/node_modules/vue-loader/dist/index.js:70:34)

ERROR in ./resources/js/components/FormField.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (/Users/kostakondratenko/Dropbox/larapi/nova-components/VueRepeater/node_modules/vue-loader/dist/index.js:70:34)

ERROR in ./resources/js/components/IndexField.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (/Users/kostakondratenko/Dropbox/larapi/nova-components/VueRepeater/node_modules/vue-loader/dist/index.js:70:34)

webpack compiled with 3 errors
`

Any input much appreciated, thanks!

Detailed steps to reproduce the issue on a fresh Nova installation:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions