Skip to content

Instantly share code, notes, and snippets.

@liitfr
Last active September 12, 2017 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save liitfr/80b5ac11f7f8b5cd71532a75a6b3be09 to your computer and use it in GitHub Desktop.
Save liitfr/80b5ac11f7f8b5cd71532a75a6b3be09 to your computer and use it in GitHub Desktop.
How to use Zepto with Shoelace.css & Webpack

How to use Zepto with Shoelace.css & Webpack

first of, npm install --save-dev zepto-webpack.
Then, in your Webpack config :

  // ...
  resolve: {
    alias: {
      ShoelaceDropDowns: path.resolve(__dirname, 'node_modules/shoelace-css/source/js/dropdowns.js'),
      ShoelaceTabs: path.resolve(__dirname, 'node_modules/shoelace-css/source/js/tabs.js'),
    },
  },
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      Zepto: 'zepto-webpack',
      $: 'zepto-webpack',
    }),
  ],
  // ...

Why zepto-webpack ?

Well, there's another package webpack-zepto, more downloaded but not up-to-date as of 2017-09-12.
Why use it ? If not, you'll get at runtime

zepto.js:23 Uncaught TypeError: Cannot read property 'createElement' of undefined
    at zepto.js:23
    at zepto.js:939
    at Object.<anonymous> (zepto.js:4)
    at 52.emptyArray (zepto.js:4)
    at Object.52 (zepto.js:7)
    at __webpack_require__ (bootstrap 2985339b736dd307089c:19)
    at Object.51 (dropdowns.js:97)
    at __webpack_require__ (bootstrap 2985339b736dd307089c:19)
    at Object.49 (global.js:21)
    at __webpack_require__ (bootstrap 2985339b736dd307089c:19)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment