material-components / material-components/material-web

Quick Start is missing a few steps

Open
#5,224 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

Description

As someone who is relatively brand-new to this, I'm trying to follow the quick start guide at https://github.com/material-components/material-web/blob/main/docs/quick-start.md

As instructed, I've installed it by running npm install @material/web, then I've created index.js. Then I add the provided HTML to a file.

That's the end of the "Usage" section, which would imply that's all one needs to do in order to use this. However, when I open the resulting HTML file Firefox tells me Uncaught TypeError: The specifier “@material/web/button/filled-button.js” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

There is a subsequent section on "Building", which appears to be relevant. It says to install rollup @rollup/plugin-node-resolve and then run npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js.

I do get visible output if I change the sample HTML file from index.js to bundle.js.

Issues

There are two issues I find:

  1. The "Usage" section ends just before the interesting bit. How do I actually use it in practice?
  2. The file should be called bundle.js but the "Usage" section calls it index.js
Browser/OS Environment

Browser: Firefox
OS: Windows 11

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with docs/quick-start.md and compare the Usage and Building sections, following the documented npm install and Rollup commands in a minimal example. Verify the example in Firefox and clarify the required build step and whether the sample should reference index.js or bundle.js; done means a newcomer can follow the guide to working output.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, rollup
Domain
build-system, documentation, web-dev
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.