preact-cli: Build error with preact-material-components

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

preact create test
cd test
npm install --save preact-material-components
edit routes/home/index.js
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 ?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 40 (34 by maintainers)

Most upvoted comments

@prateekbh @developit I would like to move from the @webpack-blocks/babel6 wrapper to babel-loader directly.

However, I was still struggling to include custom directories. I was also looking into this built-in but couldn’t quite figure it out either. The idea with the latter is to move contexts when webpack recognizes an import is coming from within a node_module.

@developit Should maybe cut the new release now & get this fix in as soon as it’s solved. Altho it is important, it’s not big enough to delay all the other improvements that have been made.

lukeed on May 30, 2017

@lukeed also I must admit, after banging my head with webpack for a while I just started feeling comfortable with loaders and then came webpack-blocks… 😭 😭 😭 😭

prateekbh on May 30, 2017

99% sure this is fixed by #63 - @lukeed found that without exclude:[], babel-loader will always ignore node_modules.

developit on May 29, 2017

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

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

prateekbh on May 23, 2017

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 ?

cedric-marcone on May 23, 2017

@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.

lukeed on May 23, 2017