Fabric is undefined in test environment

[yashikagarg13]

Version

3.3.0

Development Environment

Browser: Chrome
OS: MacOS

Current Behavior

Getting below error message when writing a test for an ES6 module requiring 'tui-image-editor'.

TypeError: Cannot read property 'createClass' of undefined

Using Jest for writing tests

Expected Behavior

It should not raise above error

[junghwan-park]

@yashikagarg13
Can you describe more details?
ex) Example code of your T/C and Jest environment settings.

[yashikagarg13]

@junghwan-park

Example Code:

App.js

const ImageEditor = require('tui-image-editor')

export default class App {
    render () {
        return 'Hello World'
    }
}

App.test.js

import App from './App'
import {shallow} from 'enzyme'
import toJson from 'enzyme-to-json'

describe('App', () => {
   it('should render correctly', () => {
      let wrapper = shallow(<Dashboard />, store)
      expect(toJson(wrapper)).toMatchSnapshot()
   })
})

Application created using [email protected]. It is failing at import itself. const ImageEditor = require('tui-image-editor') giving error Cannot read property 'createClass' of undefined

[yashikagarg13]

@junghwan-park anything about this?

[junghwan-park]

@yashikagarg13
Please add [email protected](1.6.7 or higher) your package dependency. TOAST UI Image Editor install [email protected] in their package directory's node_modules initially by npm install --no-option --no-save [email protected].
If you executenpm install after tui-image-editor installed, the tui-image-editor/node_modules/fabric/fabric.require.js is deleted by npm.

Sorry for your inconvenience.

[yashikagarg13]

@junghwan-park I have fabric installed as you mentioned

But I am still getting the error. Its a blocker for my team to use the library as because of this all test files are failing. We will really appreciate if you could help.

[Olgagr]

I have the same problem. I have fabric installed (in the package.json I have postInstall)

"postInstall": "npm install --no-save --no-optional fabric@^1.6.7"

And when I require the ImageEditor:

const ImageEditor = require('tui-image-editor')

I get an error:

/home/test/Docume…age-editor.js:12869 Uncaught TypeError: Cannot read property 'createClass' of undefined

The error leads to this line:

var Cropzone = _fabric2.default.util.createClass(_fabric2.default.Rect

In my case, I'm trying to load editor in Elector renderer, not in the tests.

Does nobody else has this error?

[arggh]

Does nobody else has this error?

Yes. Just tried to take this library for a spin, like so:

npm install --save tui-image-editor

// app.js

import ImageEditor from 'tui-image-editor';

⬇︎

Promise not resolved TypeError: Cannot read property 'createClass' of undefined
    at Object.eval (/node_modules/tui-image-editor/dist/tui-image-editor.js:12877)
    at __webpack_require__ (/node_modules/tui-image-editor/dist/tui-image-editor.js:44)
    at Object.eval (/node_modules/tui-image-editor/dist/tui-image-editor.js:12399)
    at __webpack_require__ (/node_modules/tui-image-editor/dist/tui-image-editor.js:44)
    at Object.eval (/node_modules/tui-image-editor/dist/tui-image-editor.js:10681)
    at __webpack_require__ (/node_modules/tui-image-editor/dist/tui-image-editor.js:44)
    at Object.eval (/node_modules/tui-image-editor/dist/tui-image-editor.js:628)
    at __webpack_require__ (/node_modules/tui-image-editor/dist/tui-image-editor.js:44)
    at Object.eval (/node_modules/tui-image-editor/dist/tui-image-editor.js:75)
    at __webpack_require__ (/node_modules/tui-image-editor/dist/tui-image-editor.js:44)

[GraemeFulton]

has anyone fixed this? I'm getting it in my react app. I have included fabric@^1.6.7, and imported it before tui-image-editor, and still get the error

[GraemeFulton]

if anyone is still struggling with this, I managed to get it working by creating a new tui-image-editor.js, and pasting the fabric.js code above it, so it looks like this:

Next, I replaced every mention of _fabric2.default with fabric, so that it's using the main fabric variable from the top of the file.

Finally, I declared a global ImageEditor before the tui code begins. This can also be bound to the window, window.ImageEditor = ImageEditor, so you can then access an ImageEditor with fabric guaranteed anywhere in your app using window.ImageEditor.

I have no idea why fabric wouldn't work for me, but that's how i forced it.