Build error with preact-material-components

[cedric-marcone]

Hello,

Linking a component from preact-material-components works like a charm in dev mode but when trying to build for production it fails.

Steps to reproduce

1. preact create test
2. cd test
3. npm install --save preact-material-components
4. edit routes/home/index.js
5. paste this code :

import { h, Component } from 'preact'
import style from './style'

import FormField from 'preact-material-components/FormField'
import Radio from 'preact-material-components/Radio'

import 'preact-material-components/FormField/style.css'
import 'preact-material-components/Radio/style.css'


export default class Home extends Component {
  render() {
    return (
      <div class={style.home}>
        <h1>Home</h1>
        <FormField>
          <Radio id="r1" name='opts'></Radio>
          <label for="r1">Radio 1</label>
          <Radio id="r2" name='opts'></Radio>
          <label for="r2">Radio 2</label>
        </FormField>
      </div>
    )
  }
}

=> npm start : OK

=> npm run build : Fails

Template execution failed: SyntaxError: Unexpected token import
  Error: /Users/cedric/Desktop/test/node_modules/preact-material-components/FormField/index.js:1
  (function (exports, require, module, __filename, __dirname) { import { h } from "preact";
                                                                ^^^^^^
  SyntaxError: Unexpected token import
  
  - node.js:152 Object.require.extensions.(anonymous function) [as .js]
    [test]/[babel-register]/lib/node.js:152:7
  
  - module.js:20 require
    internal/module.js:20:19
  
  - index.js:4 Object.<anonymous>
    /Users/cedric/Desktop/test/routes/home/index.js:4:1
  
  - node.js:144 loader
    [test]/[babel-register]/lib/node.js:144:5
  
  - node.js:154 Object.require.extensions.(anonymous function) [as .js]
    [test]/[babel-register]/lib/node.js:154:7
  
  - module.js:20 require
    internal/module.js:20:19
  
  - index.js:7 Object.<anonymous>
    /Users/cedric/Desktop/test/index.js:7:1
  
  - node.js:144 loader
    [test]/[babel-register]/lib/node.js:144:5

Any idea ?

[cedric-marcone]

Oops, BTW,
preact --version
1.0.1

[lukeed]

Thanks!

@developit I'm pretty sure it has to do with the node_modules include-r. The package has a module entry pointing to a index.js, but importing single components (eg, FormField) traverses deeper within the node_module directory, which no longer matches the module entry.

Although this method "expects" index.js to have something like:

export { Tabs, Menu, FormField, ... }

... and to be imported via

import { FormField } from 'preact-material-components'

... I don't think @prateekbh is wrong to export components the way he has. So, perhaps (??), we should include the entire module directory if we can resolve a module or jsnext:main entry, rather than the entries themselves?

[lukeed]

@cedric-marcone It looks like preact-material-components does export components the way I've described above.

So, I know the documentation says to do what you've done, but I'd try this & see if it works:

import  { FormField, Radio } from 'preact-material-components'
import 'preact-material-components/FormField/style.css'
import 'preact-material-components/Radio/style.css'

PS: I'm just guessing, but it looks like it should be fine.

[cedric-marcone]

Thanks !

Your suggestion didn't work right away because there is an inconsistency in preact-material-components regarding the naming of the FormField component (FormField vs Formfield) => I'll report there ;)

I tried with the following and it works perfectly :

import {Formfield, Radio} from 'preact-material-components'
import 'preact-material-components/FormField/style.css'
import 'preact-material-components/Radio/style.css'

The only problem I can see is that initial method of importing components was advertized as the best way to prevent bundling unused components.

Am I wrong ?

[lukeed]

Cool! I'm pretty certain that because it's using the module syntax, webpack will treeshake the rest away.

The best way to check, though, is to do a before-after and check the bundle size of each. That's what I would do.

[cedric-marcone]

I'll do it.
Thanks for your help !

[prateekbh]

@lukeed @cedric-marcone So here's a few pointers

1. Yes including a component separately is the best way to do it. @lukeed sadly webpack does not tree-shake classes :(
2. @cedric-marcone so sorry for the errornous exports, will fix them right away.
3. Most probably the reason for this is we're excluding node_modules, which is sad because as we expect more ESM to land in node repo and are not willing to transpile it.(this assumption of mine can be false, but i'll cross check and let you know if it is true.)

[prateekbh]

Also i could really use as a ver good data point if you want the individual components to be transpiled into es5 format as well(which will make me sad though).

[rkostrzewski]

1. Yes including a component separately is the best way to do it. @lukeed sadly webpack does not tree-shake classes :(
@prateekbh @lukeed FYI webpack treeshakes classes but can't handle following.
Imagine module named 'lib':

import { A } from './a.js'
import { B } from './b.js'

export { A, B }

using it as so import { A } from 'lib' won't remove B because of re-export which UglifyJS can't handle. Which is basically every npm module written in ES6+. 😢

babel/babili aims to tackle that problem - might be worth including inside webpack config for smaller bundle sizes. (personally haven't used it so I don't know what challenges come with it)

[prateekbh]

@rkostrzewski thanks for pointing it out! It makes total sense to me now.
I am for now following this bug on webpack
webpack/webpack#2899

but even with above info the need to add components separately does stand valid.

[lukeed]

Ah, right! That's why I felt hesitant.

I do believe that this approach solves the issue. I've used it in a few projects and I think I remember it being beneficial:

export { default as Foo } from './foo'
export { default as Bar } from './bar'

[prateekbh]

@lukeed lemme try this, if this works it will make using preact-material-components even easier.