Rmwc: issue with browserify and babelify

[namiwang]

import { Button } from 'rmwc';

will cause

somepath/node_modules/rmwc/index.js:1
export { default as Button } from './Button';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

While the build cmd is browserify -t babelify some.js

With .bablerc being

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }],
    "react"
  ]
}

I'm still not sure if this is a repo-related issue or a babel-wise one.

[jamesmfriedman]

@namiwang I'm not a browserify user, but this seems to be a well documented problem with certain versions of babelify and browserify.

I found theses threads which looks related

• https://github.com/babel/babelify/issues/157#issuecomment-188146766
• https://stackoverflow.com/questions/40029113/syntaxerror-import-and-export-may-appear-only-with-sourcetype-module-w
• https://stackoverflow.com/questions/41043032/browserify-parseerror-import-and-export-may-appear-only-with-sourcetype

Looks like in all cases the solution is adding preset es2015 to their babel config.

[jamesmfriedman]

Were you ever able to work this out?

[namiwang]

@jamesmfriedman

Sorry for the delay.

Actually I did search around and check out those pages before creating issue. None of them worked. All of those are pretty outdated, something has changed i guess.

I'll try to create a fresh repo as a re-pro case.

[varoot]

I also got the same error with create-react-app tests when I use rmwc.

From this comment https://github.com/facebookincubator/create-react-app/issues/2049#issuecomment-298321273:

Publishing untranspiled ES6 modules as an entry point is not recommended, as it doesn’t work in Node or with older bundlers.

Maybe we shouldn't publish the library as ES6?

[jamesmfriedman]

@varoot, the code is is transpired down to es5 when publishing to NPM. How are you importing the code?

[varoot]

@jamesmfriedman I installed it with Yarn.
This is the entry on my yarn.lock

rmwc@^0.0.1-rc4:
  version "0.0.1-rc4"
  resolved "https://registry.yarnpkg.com/rmwc/-/rmwc-0.0.1-rc4.tgz#8482d0e988a7490d98702fed5d605cd0933adf76"
  dependencies:
    classnames "^2.2.x"
    material-components-web "^0.25.0"
    prop-types "^15.6.0"

I checked the archive, index.js has export command in it.

[varoot]

Ah... I see that the lib folder is ES5. Maybe the main entry of package.json should point to that?

I changed it manually and now I got a different error message.

 TypeError: Cannot use 'in' operator to search for 'mdcRippleIsUnbounded' in undefined

[varoot]

I created a bare project with create-react-app so you can test it.
https://github.com/varoot/test-rmwc

[varoot]

So the later error was because these lines got removed when it's compiled to ES5
https://github.com/jamesmfriedman/rmwc/blob/11d25272a720b4507f36e7d2b4d3d39964f8c3db/src/Ripple/index.js#L54-L56

After I put it back to the compiled code, the test passes.

[jamesmfriedman]

@varoot, thank you so much for looking into this and for the test repo! I’ll use that to help debug.

Lib currently contains a UMD bundle that would work if you just dropped it in a browser script tag, but it’s not the recommended way to consume it. When it gets built, NODE_ENV gets set to production so it makes sense that code would be taken out during dead code removal.

The way the project is currently setup when published is optimized to support better tree shaking for people who don’t want to import the whole package. So if you imported from rmwc/Button it would only pull the button code.

This whole issue has me thinking that I’m transpiling down to es2015 but have accidentally left modules on. Interested to try your repro case though since I’ve been usin CRA in several projects without ever seeing that message. It’s possible that yarn is complaining when npm doesn’t.

Also, what node version are you using?

[varoot]

My node is 8.8.1. I use Windows btw. I also just tested with NPM and still got the same error message.

[jamesmfriedman]

@varoot and @namiwang,

Figured out the issue with Babel and was able to do a build where it completely removes es modules. Install rc5 and give it a shot npm i rmwc@latest

[namiwang]

Thanks! rc5 works fine <3

[jamesmfriedman]

Awesome! Glad I was able to resolve it. Thanks for your patience.

[namiwang]

and super thanks to @varoot !