Cleave.js: React.createClass is not a function

[giladgo]

Hey,

When attempting to use Cleave.js with React, I'm getting the following error:

Cleave.react.js:12 Uncaught TypeError: React.createClass is not a function

I'm using it like instructed in the docs:

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

By the way, I didn't want to use the uncompiled version because i don't want to use stage-0 (as a side note - it doesn't work even when I add stage-0 and use the regular uncompiled version i.e. import Cleave from 'cleave.js/react' - same error).

Looks like require('react') returns an empty object for some reason, but I couldn't figure out why.

[nosir]

To use compiled version, either add:
import Cleave from 'cleave.js/dist/cleave-react';
or
var Cleave = require('cleave.js/dist/cleave-react');

If this still not working, please share the complete code block where refers to cleave.js, and maybe your React version as well.

[giladgo]

Yup, that's what I was doing:

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

To try to debug this, I tried using the non-compiled version (that is, cleave.js/react), and I found that the error that was raised was in require('react') here https://github.com/nosir/cleave.js/blob/master/src/Cleave.react.js#L3

React version 15.2.1.

[giladgo]

... forgot to include the webpack config (relevant when I tried to use the non-compiled version):

{ test: /\.js$/, exclude: /node_modules\/(?!cleave.js)/, loader: 'babel-loader', query: { cacheDirectory: true } },

[nosir]

Did you add react to your presets for loader? Based on your config, it should be like this for using compiled version:

{
    test:    /\.js$/,
    exclude: /node_modules/,
    loader:  'babel-loader',
    query:   {
        cacheDirectory: true,
        presets:        ['es2015', 'react']
    }
}

[giladgo]

Yep, they're in my .babelrc:

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": [
    "add-module-exports",
    "transform-object-rest-spread",
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

[trjiang]

That's weird, cause it works for me with your config. What's your cleave version?

[giladgo]

cleave.js v0.7.3

[giladgo]

ok, I think I figured out what was going on:
In my webpack.config.js, I had this:

modulesDirectories: ['.', /*more stuff */]

Which means that when cleave was doing require('react'), webpack thought it was trying to load react.js in cleave's directory, instead of react itself.

I changed my config to

root: path.resolve('.')

and things work now.

Thanks! 😄