webpack: implement zeptojs into the build

Question

I'm trying to add ZeptoJS into my webpack vendor bundle but I keep getting an error stating:

"Uncaught TypeError: Cannot read property 'createElement' of undefined(…)

I checked the zepto.js sourcecode and it's complaining at this line:

table = document.createElement('table')  <-- 'document' is undefined

Here's a snippet of my webpack config:

...

config.entry.vendor = ['zepto']

config.module.loaders.push({
  test: require.resolve('zepto/dist/zepto.min.js'),
  loader: 'exports?window.$!script'
});

config.plugins.push(new webpack.ProvidePlugin({
  $: 'zepto'
}));

The vendor.js is loaded on the load EVENT.

Has anyone encounter this issue before and provide suggestions on how I can get this to work? Thank you.

Answer 1

The issue is due to Zepto itself:

To prevent scope leakage, browserify/webpack wraps modules in a function. this becomes the scope of that function, and not window

This problem should be fixed when this PR will be merged

In the meantime, to prevent this issue from happening, you can use imports-loader :

// In your Webpack config
module: {
  rules: [{
    test: require.resolve('zepto'),
    use: {
      loader: 'imports-loader',
      options: 'this=>window',
    },
  }],
}