Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')

Question

I'm trying to build library with following command but get error "Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')":

$ vue-cli-service build --target lib --name login mod/login/Component/page.vue

Response:

⠴ Building for production as library (commonjs,umd,umd-min)... ERROR Failed to compile with 1 error 11:07:40 AM error in ./mod/login/Component/page.vue Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')

package.json, stripped

{ "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@tailwindcss/typography": "^0.5.10", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.7.1", "tailwindcss": "^3.4.10" }, "dependencies": { "axios": "^1.7.7", "core-js": "^3.8.3", "toastr": "^2.1.4", "vue": "^3.2.13", // installed 3.5 "vue-i18n": "^10.0.4", "vue-router": "^4.4.5" // derived dependencies // [email protected] // [email protected] }, ... }

page.vue:

<script> import {defineComponent} from "vue"; export default defineComponent((vars) => { return { displayName: 'Login', components: { }, data() { return { }; } }; }); </script> <template> <main> ... </main> </template>

I have tried to add to package.json resolutions to vue-loader 15, 16, 17 but no luck.

vue-cli being in maintenance mode, maybe try the recommended migration to vite which doesn't use any vue-loader. here also is documentation for library mode if needed — yoduh
– yoduh, Commented Oct 22, 2024 at 14:52

JohnSmith · Accepted Answer · 2024-10-24 12:32:13Z

Found the problem. Logical, although not too easy to spot.

The command I ran was:

$ vue-cli-service build --target lib --name login mod/login/Component/page.vue

...which used globally installed vue-cli-service (as instructed here https://cli.vuejs.org/guide/installation.html) which was different version than the one in the package.json, and which in turn had installed its own version of webpack, etc, etc.

I should have ran:

$ yarn build --target lib --name login mod/login/Component/page.vue

Excerpt from package.json:

"scripts": { "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

Uninstalled global vue-cli-service to avoid future confusions.

Hope this saves the time for somebody.

Collectives™ on Stack Overflow

Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related