Trying to install Material Web Components but never works. #5214
-
|
Hello to y'all. I try to install Material Web Components to be used in my website. But no matter how I install it, it always doesn't work. Tried installing using node.js doesn't work, manually downloading all the modules, doesn't work. Using CDN, doesn't work. Using frameworks like lit.dev works using their playground, but installing locally than use from that doesn't work. I don't know what works. Hopefully you all can help me here. I'm not pro, but I'm learning rn. OS (1st try): Windows 11 IoT Enterprise Idk how to print verbosely, but what i do know, no elements of MWC is displaying. It just shows normal HTML tag/ text. Edit: I just realized there is same discussion like mine discussions/4427. I'll try that first, then I'll let y'all know if it fixes. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
Nope, it doesn't work. |
Beta Was this translation helpful? Give feedback.
-
|
when you try installing it via nodejs, what output do you get? |
Beta Was this translation helpful? Give feedback.
-
|
Given my OS rn is Windows 11 IoT Enterprise, below is the output. PS C:\Users\user> node -v
v20.9.0
PS C:\Users\user> npm -v
10.2.2
PS C:\Users\user> cd .\my-website\
PS C:\Users\user\my-website> ls
PS C:\Users\user\my-website> npm install @material/web
up to date, audited 9 packages in 3s
found 0 vulnerabilities |
Beta Was this translation helpful? Give feedback.
-
|
Ok, Npm doesn't seem to be the issue. From the limited information available, it looks like you may be trying to use material web without a build tool. Try The thing with material web is you need some sort of build tool that transforms it's code into code understandable by a browser. Vite is one of those build tools, and it usually just works. After that, you can just create a JavaScript file, import it in the html (e.g. import '@material/web/button/elevated-button.js';
import '@material/web/button/filled-button.js';After that, you can just use those components in the html file. (e.g. |
Beta Was this translation helpful? Give feedback.
-
|
Your solution works! Thank you very much. Marked it as answer. I will later publish my own ways on using MWC within my repository. Thank you again! |
Beta Was this translation helpful? Give feedback.
-
|
Our quick start guide also has a section on building! Those docs use rollup as an example bundler. Any javascript bundlers should work, including Vite and Webpack! |
Beta Was this translation helpful? Give feedback.
-
|
Does this work for you? https://github.com/datvm/mdc-start-template Just clone that one, run |
Beta Was this translation helpful? Give feedback.
-
|
Hi, thanks for the reply. Unfortunately I only know javascript (not typescript). Very sorry :( |
Beta Was this translation helpful? Give feedback.
Ok, Npm doesn't seem to be the issue. From the limited information available, it looks like you may be trying to use material web without a build tool.
Try
npm install vite, create anindex.html(if you don't have one), then runnpx vite, which will start up a server.The thing with material web is you need some sort of build tool that transforms it's code into code understandable by a browser. Vite is one of those build tools, and it usually just works.
After that, you can just create a JavaScript file, import it in the html (e.g.
<script type="module" src="./main.js">), and import the components you need in that js file: