Main inside package.json is referencing to es6 modules

Bug Main inside package.json is referencing to es6 modules

What MDC-Web Version are you using?

This happens with all components which have different versions, for instance the TextField is in version 0.3.1

What are the steps to reproduce the bug?

1. Create a project with npm init
2. Install the TextField component

npm i --save  @material/textfield

1. Configure rollup or webpack to bundle the project and set babel to exclude ‘node_modules/**’
2. Somewhere in your project use the textfield:

import * as textfield from '@material/textfield';
mdcComponent = new textfield.MDCTextfield(element)

1. Check that the bundled app has the TextField component written in es6
2. Go to node_modules/@material/textfield
3. Change “main” from “index.js” to “dist/mdc.textfield.min.js”
4. Create the bundle again, note that this time it will not find the module
5. Change “main” back to “index.js”
6. Stop excluding ‘node_modules/**’ in the babel configuration
7. Should work fine this time

What is the expected behavior?

The “main” property inside the package.json should reference to the transpiled and bundled module instead of the es6 version so developers don’t have to transpile it in order to avoid incompatibilities. For example the TextField component should be pointing to dist/mdc.textfield.min.js instead of index.js.

There’s actually another problem because the dist versions are exporting the utilities differently. The following snippet should work equally in the original and the minified/transpiled version:

import * as textfield from '@material/textfield';
mdcComponent = new textfield.MDCTextfield(element)

but using the later i get the following error: ‘MDCTextfield’ is not exported by ‘node_modules@material\textfield\dist\mdc.textfield.min.js’

What is the actual behavior?

The “main” is pointing to index.js which contains the es6 module, and if I don’t transpile it some things won’t work, for example I cannot use Uglify.

(uglify plugin) Error transforming bundle with ‘uglify’ plugin: Unexpected token: name (MDCFoundation)

That’s because it finds MDCFoundation defined as a class.

Any other information you believe would be useful?

There is a proposal to specify two entry points or main references inside package.json:

...
"main": "dist/app.min.js",
"jsnext:main": "index.js",
...

For more information refer to this issue: https://github.com/jsforum/jsforum/issues/5

[kfranqueiro]

We’ve changed our packages’ main properties to point to dist resources in #3245. This will be available in 0.41.0.

Thanks everyone for the input and sorry for the delay. (Also thanks @moog16 for starting the ball rolling and doing some testing for the PR.)

[chriscasola]

Is there any movement on this? I can open a PR if there is consensus on what should happen.