Material-components-web: To use MDC we always required the webpack??

[16rajumane]

* PLEASE READ THIS BEFORE FILING AN ISSUE *

Bugs

Follow the template below and include a codepen to ensure the quickest and most accurate response to your issue.

What MDC Web Version are you using?

Please be specific, e.g. _major.minor.patch_

What browser(s) is this bug affecting?

Please include the browser version. A user-agent string is also quite helpful.

What OS are you using?

Please include the OS version.

What are the steps to reproduce the bug?

Please write the steps which need to be taken in order to reproduce the bug. These steps should be
as detailed as possible, e.g.

1. Run the demo server
2. Go to localhost:8080/textfield.html
3. Tab-focus on the first text field
4. Observe the component's behavior

We also have a template on CodePen which we encourage you to use to create a reproduction of
the issue. The less time it takes for us to reproduce the issue, the less time it takes to verify and
fix it!

What is the expected behavior?

Please describe what the component/code should be doing that it's not.

What is the actual behavior?

Please describe what the component/code is actually doing that's different from what it should be
doing.

Any other information you believe would be useful?

Feature Requests

If you're interested in requesting a new component or proposing UX changes to an existing
component, please read our Component Request Policy before opening an issue.

If you have an idea for a new feature, we'd love to hear about it! Please provide enough
information regarding the feature such that we'll be able to evaluate the appropriateness and
feasibility of your request. Try to be as specific as possible regarding your motivation, use-case,
and potential API or affects on other APIs (where applicable). The more detailed your proposal is,
the easier it will be for us to understand and evaluate it. This Meta.SE answer also contains great general guidelines for writing
feature requests.

If you'd like to work on a component, please ensure that you submit an Engineering Outline before
submitting a pull request. You can read more about this in our contributing docs.

MDC Web is still under active development. You can see our current progress on master as well as an overview of our architecture and practices.

Our team prioritizes responding to as many engineering and user experience questions as possible. We do not support responses to questions outside of these areas at this time.

[BhavyaSingh2611]

nope you can use unpkg to use on webpage directly
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js
are the links just add as script and stylesheets and you are ready to go !!😃

[kfranqueiro]

There are multiple tools you can use if you're interested in incorporating MDC Web's JS and CSS in your own toolchain. Webpack is probably the most common. Other alternatives could include parcel.js and rollup.js. (For example, this stackblitz relies on parcel.js.)

However, you don't strictly need to set up your own build toolchain just to make use of MDC Web. As @BhavyaSingh2611 said, you can use resources from unpkg, or install those same resources locally via npm. Both of these options are outlined at the top of our getting started guide.

[dman777]

The getting started guide is mainly focused on webpack and does not venture out of that scope. I am attempting to use rollup.js but it is complaining:

[!] Error: 'default' is not exported by node_modules/focus-trap/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@material/drawer/util.js (23:9)
21:  * THE SOFTWARE.
22:  */
23: import { default as createFocusTrap } from 'focus-trap';
             ^
24: export function createFocusTrapInstance(surfaceEl, focusTrapFactory) {
25:     if (focusTrapFactory === void 0) { focusTrapFactory = createFocusTrap; }
Error: 'default' is not exported by node_modules/focus-trap/index.js
    at error (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:5365:30)
    at Module.error (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:9708:9)
    at handleMissingExport (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:9625:21)
    at Module.traceVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:10018:17)
    at ModuleScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:8685:39)
    at FunctionScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
    at ChildScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
    at BlockScope.findVariable (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3056:38)
    at Identifier$1.bind (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:4394:40)
    at AssignmentExpression.bind (/home/one/.nvm/versions/node/v12.7.0/lib/node_modules/rollup/dist/rollup.js:3143:23)