Coder Social home page Coder Social logo

webdenim / vue-cli-plugin-material Goto Github PK

View Code? Open in Web Editor NEW
15.0 15.0 2.0 211 KB

[UNMAINTAINED] Vue CLI 3 plugin for MDC Web and Vue MDC Adapter with Sass support

Home Page: https://www.npmjs.com/package/vue-cli-plugin-material

License: MIT License

JavaScript 26.19% Vue 73.81%
material material-components material-design mdc-web vue vue-cli vue-cli-plugin vue-mdc-adapter vuejs

vue-cli-plugin-material's People

Contributors

rustemgareev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

feluxmaj klementj

vue-cli-plugin-material's Issues

TypeError: Cannot read property 'options' of undefined index.js:11:30

Fresh install using vue cli, project fails to build right after executing vue add material
node v12.16.1
npm 6.13.4
@vue/cli 4.4.6

package.json

{
  "name": "chronos",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "material-components-web": "^0.35.0",
    "vue": "^2.6.11",
    "vue-mdc-adapter": "^0.15.0",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-cli-plugin-material": "~0.2.3",
    "vue-template-compiler": "^2.6.11"
  }
}

error stack

TypeError: Cannot read property 'options' of undefined
    at C:\Projects\ui\chronos\node_modules\vue-cli-plugin-material\index.js:11:30
    at C:\Projects\ui\chronos\node_modules\@vue\cli-service\lib\Service.js:251:21
    at Array.forEach (<anonymous>)
    at Service.resolveWebpackConfig (C:\Projects\ui\chronos\node_modules\@vue\cli-service\lib\Service.js:248:30)
    at PluginAPI.resolveWebpackConfig (C:\Projects\ui\chronos\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)
    at serve (C:\Projects\ui\chronos\node_modules\@vue\cli-service\lib\commands\serve.js:75:31)
    at Service.run (C:\Projects\ui\chronos\node_modules\@vue\cli-service\lib\Service.js:230:12)
    at Object.<anonymous> (C:\Projects\ui\chronos\node_modules\@vue\cli-service\bin\vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

"Unknown custom element: <mdc-layout-..." with Vue Typescript

Having created a Vue-project including typescript feature and then adding vue add material, the mdc-layout components are not found and the corresponding layout is of course broken. Here are the error messages in the console:

[Vue warn]: Unknown custom element: <mdc-layout-grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619

    warn35VueJS

    <anonym> main.ts:7 ts app.js:3257 __webpack_require__ app.js:767 fn app.js:130 0 app.js:3318 __webpack_require__ app.js:767 <anonym> app.js:902 <anonym> app.js:1 

[Vue warn]: Unknown custom element: <mdc-layout-cell> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619

    warn37VueJS

    <anonym> main.ts:7 ts app.js:3257 __webpack_require__ app.js:767 fn app.js:130 0 app.js:3318 __webpack_require__ app.js:767 <anonym> app.js:902 <anonym> app.js:1 

[Vue warn]: Unknown custom element: <mdc-layout-grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619

    warn35VueJS

    <anonym> main.ts:7 ts app.js:3257 __webpack_require__ app.js:767 fn app.js:130 0 app.js:3318 __webpack_require__ app.js:767 <anonym> app.js:902 <anonym> app.js:1 

[Vue warn]: Unknown custom element: <mdc-layout-cell> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619

    warn37VueJS

<anonym> main.ts:7 ts app.js:3257 __webpack_require__ app.js:767 fn app.js:130 0 app.js:3318 __webpack_require__ app.js:767 <anonym> app.js:902 <anonym> app.js:1

To replicate (be sure to select typescript in the first step):

vue create vue-material-missing-mdc
cd vue-material-missing-mdc
vue add material
npm run serve

Open browser at localhost:8080 and open devtools to see the console messages.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.