Zepto doesn't work with npm and webpack

[cyrilchapon]

This issue was closed https://github.com/madrobby/zepto/issues/1222 with no reason :)

import $ from 'zepto'

Leads to

Uncaught TypeError: Cannot read property 'createElement' of undefined

---

The workaround provided, "use master branch" does not work either, since requiring module from github with npm (npm install madrobby/zepto#master) results in a non-built package, that can't be required, then

import $ from 'zepto'

Leads to

Module not found: Error: Can't resolve 'zepto'

---

This is dead simple, there is no need for any explaination, but a real need for a git merge and an npm publish basically

Requiring a module from the most popular package manager, then using it through the most popular module bundler does seem like a basic requirement for a 13k stars js library in 2017, doesn't it ?

[vacekj]

TypeScript support would also be nice!

[shabashj]

any progress with this?

[vacekj]

If you want to use Zepto because it's lighter and less bloated than jQuery, as did I, go with a custom jQuery build. Here are the instructions. After building it, require (or import) the resulting file inside of your main script, or directly in webpack. With VSCode, you will still have IntelliSense for jQuery, and your build will only contain what you need.

[shabashj]

OK , thank you.

[cyrilchapon]

This is insane

[gabriel3000]

Wtf how is this a thing? I just did exactly as you described. Cant believe it doesn't work that easy. I guess It can be added outside the bundle and then "$" set as a global var.

[vacekj]

Zepto is dead to me because of this. Luckily, you don't really need jQuery anymore, it's easier and less painful to use vanilla js

[nfwyst]

same to me

[linrock]

this workaround gets zepto 1.2.0 (latest npm release) working with webpack:

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

then to use zepto as a jquery replacement:

environment.config.resolve = {
  alias: {
    jquery: "zepto"
  }
}

need to install the imports-loader webpack plugin first

[AlexMost]

Same for me, simple import breaks everything. Can't use this library.

npm install zepto
node
> require('zepto')

TypeError: Cannot read property 'createElement' of undefined

[volas]

Hi @madrobby, can you look at this? It's 2 years old version in npm...

[SqrTT]

due to the issue, I had to refuse usage of zepto in a large project

[cyrilchapon]

To augment sqrTt words, same here, from a CTO

[jbmonroe]

It still has to work in browsers that don't support import or require, doesn't it? I hate to be that guy, but how is it you have time to b1tch about it on GitHub, but you don't have time for a fork-and-fix?

[SqrTT]

but you don't have time for a fork-and-fix?

And then support/maintain for EOL, while the issue is fixed in master just not released to npm.

See https://github.com/madrobby/zepto/pull/1244

[leefsmp]

Just be realistic about it guys... there is still no valid replacement for jquery 🤣

[jbmonroe]

If you stick to the evergreen browsers, there's almost no need for jQuery. I haven't needed much more than

const $ = s => Array.from(document.querySelectorAll(s));

for years. About 90% of the main-stream jQuery use can be supplied by functions taking the results of $() and using vanilla JS to get the job done.

[paxperscientiam]

Works for Me with fuse-box, which is built on typescript and so allows for synthetic imports.

import 'zepto/src/zepto'
import 'zepto/src/event'
import 'zepto/src/fx'

document.addEventListener("DOMContentLoaded", function(event) {
    Zepto("#hi")
        .animate({
        opacity: 0.25, left: '50px',
        color: '#abcdef',
        rotateZ: '45deg', translate3d: '-100px,-100px,-100px'
    }, 10000, 'ease-out')
})

EDIT: I was originally importing the whole thing plus fx. The correct way to do it is to import zepto.js, event.js, and fx.js for the given example.

Something missing from the docs is that these modules have some level of inter-dependency. EG, fx.js depends on events.js

[Sleepful]

what a waste of time to attempt using zepto.... I finally get it working the way @paxperscientiam described, and.... I can't even do a query by ID because apparently the id has some forbidden character (the # i suppose? no idea) something that isn't an issue with document.getElementById, unbelievable.....