Material-components-web: Import error in browser console on import { drawer as MDCDrawer } from 'material-components-web';

[krishnaxv]

Material Design Components with React (bootstrapped with create-react-app).

import { drawer as MDCDrawer } from 'material-components-web'; throws following error in browser console.

Uncaught SyntaxError: Unexpected token import

import { drawer as MDCDrawer } from 'material-components-web/dist/material-components-web'; works fine.

I also tried to import drawer component individually with import { MDCTemporaryDrawer } from '@material/drawer';. It also throws the same error.

I have installed both material-components-web and @material/drawer with yarn.

OS: Ubuntu 14.04 LTS

Steps to reproduce bug:

1. Run yarn start in your project directory
2. Go to URL http://localhost:8080/ on the browser
3. Check error on browser console

[traviskaufman]

AFAICT, the dist/ versions of the components are the ones you should use if you're using CRA with an out-of-the-box configuration.

You are getting the errors described because our packages use the raw ES2015 source files as their main export. So when you do the following:

import {drawer as mdcDrawer} from 'material-components-web';

You are directly importing the _ES2015 source file_ for material-components-web.js.

If you do

import {drawer as mdcDrawer} from 'material-components-web/dist/material-components-web';

Then you are importing the UMD version, which will work in a browser environment.

If you want to use our ES2015 files, you could run npm run eject in your create-react-app application, and then modify your webpack config to tell babel-loader to include all js files within node_modules/@material. You can see a similar example of that within our react example.