Cleave.js: Webpack + babel issues

[Glogo]

Hi,
I'm trying to use your library in our project with webpack + babel setup but I've come into several issues.

a) When I try to import it as suggested in README:

import Cleave from 'cleave.js/react';

I get following error in web console: Uncaught SyntaxError: Unexpected token import in react.js:1

b) And when I try to include the dist directly:

import Cleave from 'cleave.js/dist/cleave-react';

I get webpack error:

WARNING in ./~/cleave.js/dist/cleave-react.js
Critical dependencies:
1:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/cleave.js/dist/cleave-react.js 1:113-120

Thank you,
Michael

[trjiang]

Thanks for reporting, we will prioritize this and have a look.

[ghost]

Please fix this, Cleave is the best library I could find and we would like to use it in production ASAP

[raminious]

:+1:

[xcanchal-uz]

Any news on this topic?
thank you!

[nosir]

Okay, I've made it work webpack, this is how I set it up:

Install the presets module:
npm install babel-preset-es2015 babel-preset-stage-0 babel-preset-react --save-dev

Then in webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './index.jsx',
    output: { path: __dirname, filename: 'bundle.js' },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules\/(?!cleave.js)/,
                query: {
                    presets: ['es2015', 'react', 'stage-0']
                }
            }
        ]
    }
};

Then in index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';

import Cleave from 'cleave.js/react';
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.au'; // use your country region code

class MyComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.onPhoneChange = this.onPhoneChange.bind(this);
    }

    onPhoneChange(event) {
        // formatted pretty value
        console.log(event.target.value);

        // raw value
        console.log(event.target.rawValue);
    }

    render() {
        return (
            <div>
                <Cleave placeholder="Enter your phone number"
                        options={{phone: true}}
                        onChange={this.onPhoneChange} />
            </div>
        );
    }
}

ReactDOM.render(<MyComponent/>, document.getElementById('content'));

The trick is to exclude cleave.js from the exclude node modules, so that the babel-loader can pass presets to the dependency module.

[Glogo]

Thank you @nosir, but would it be possible without changes in client webpack.config? Our config is bit complicated and I'd like to avoid changing it for every dependency.
For example the react class could be built in this repo so transpilation is not required

[nosir]

Would you be able to share your loader config? I'm not sure what you have in your loader presets, but stage-0, es2015 and react are required for cleave.js

[nosir]

But, If you want to avoid this change, exclude: /node_modules\/(?!cleave.js)/, I can have a look then. There should be a way to configure it inside the module like what browserify does.

[Glogo]

Thank you
we are using this starter project: https://github.com/davezuko/react-redux-starter-kit
And I would like to avoid modifying webpack.config for every 3rd party component if its possible

[nosir]

Okay, released v0.5.1.

@Glogo Please import it like this, should be fine now:

import Cleave from 'cleave.js/dist/cleave-react.webpack';
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.xxx';

As discussed here: https://github.com/webpack/webpack/issues/1617
Browserify bundled script can't be loaded via webpack, so I generated a webpack bundle for it, which is cleave.js/dist/cleave-react.webpack

Given that you don't want to change webpack.config, to use the bundled file is the only way that you can load sub es6 module to your project.

For other users, I would still recommend to include the actual entry point: cleave.js/react, the only thing you need to change in webpack.config is: exclude: /node_modules\/(?!cleave.js)/,

[matthiasak]

Can confirm

import Cleave from 'cleave.js/dist/cleave-react.webpack';

works fine 👍

[Glogo]

Can confirm it works with our webpack setup. Thank you @nosir

[nosir]

Final improvement in v0.5.2:
It's not dist/cleave-react.webpack anymore, just use dist/cleave-react.

Turns out Browserify project works well with bundled Webpack script. So we just use webpack to build react bundle.

It should work for all the cases you need. Also updated doc here: https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md:

[Glogo]

Wonderful. Thank you for your support

[Andriy-Kulak]

@nosir @trjiang This worked great and thank you for all the effor! However, just want to give you a heads up that the documentation in Readme should reflect this change as well! Spent an extra hour trying to figure this out. Cheers!

[hitchcockwill]

With a create-react-app app the following import worked for me:

import Cleave from 'cleave.js/dist/cleave-react'
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.us'

Note that I dropped the .webpack suffix mentioned above.

[nosir]

Update for this, we are using bundled js inside the package now.
So either import Cleave from 'cleave.js/dist/cleave-react' or import Cleave from 'cleave.js/react' should both work.