How to use Zepto inside ReactJS components?

[r3verser]

When importing, or requiring got error like "Cannot read property 'createElement'" .

[r3verser]

Anyone?:confused:

[r14c]

i'm using webpack and babel. installed zepto using npm.

import $ from 'zepto'
// some component

has this result

Uncaught TypeError: Cannot read property 'createElement' of undefined
    at eval (zepto.js:23)
    at eval (zepto.js:939)
    at Object.eval (zepto.js:4)
    at emptyArray (zepto.js:4)
    at eval (zepto.js:7)
    at Object.1057 (8.8.js:179)
    at __webpack_require__ (main.js:583)
    at fn (main.js:107)
    at eval (Checkbox.vue?./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0:7)
    at Object.1056 (8.8.js:169)

[KroniK907]

I'm still having this issue... Is there a better way to import zepto?

[albizures]

Hi, an easy workaround, if you are using webpack, it is to use imports-loader like this:

rules : [
     {
       test: require.resolve('zepto'),
       use: 'imports-loader?this=>window',
    }
]

source: https://webpack.js.org/loaders/imports-loader/#webpack-config-js

[iagobruno]

Zepto is not optimized to work with react on the server side, it needs to access the "window" and "document", but you can use it in places you are sure will only be called on the client side:

componentDidMount() {
  const $ = import('zepto')
    
  $('#root').find('#header').hasClass('show')
}

You can also use on dynamic components.