Switchery error in webpack

[weiyuq]

Hi, thanks for this awesome plugin.
Switchery error in webpack, Initialization times wrong
error: Cannot set property 'trackingClick' of undefined(…)

[abpetkov]

Are you sure that's not something on your side? There's no such method in this library.

If you're certain it's a problem with Switchery though, please provide detailed steps of reproducing the issue and we'll take a look at it. Thanks!

[weiyuq]

 require("switchery/dist/switchery.css");
  var Switchery = require("switchery/dist/switchery");

var elem = document.querySelector(".js-switch");
      var switchery = new Switchery(elem,{size:"small"});

I use webpack import the Switchery and initialize a new Swithery object, the exception above throwed.

[thomask]

Seeing the same issue. Somehow this is undefined in the FastClick class

[kevinkl3]

I had this issue too, I came up with this solution using the string-replace-loader:

module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /switchery\.js$/,
        loader: 'string-replace',
        query: {
          search: 'function FastClick(layer) {',
          replace: 'function FastClick(layer) {_fastClick.call(window,layer);};function _fastClick(layer){'
        }
      }
    ]
  }
}

This will make the FastClick function to have the window context (this = window).

An alternative solution would be to use the imports-loader to disable the module, exports and define variables within the Switchery module definition, this would set Switchery as a global and no need to use Switchery = require('switchery'); (maybe not what we want, hence the first solution).

{
          test: /switchery\.js$/,
          loader: "imports-loader?module=>false,exports=>false,define=>false,this=>window"
}

Note: I only tested the first solution.

[zhzz]

webpack.config.js

module: {
    noParse: /switchery/
}

That works for me.

[weiyuq]

thanks I'll try it

[tmaly1980]

Why was this closed? I'm getting this issue and it's still there. Was anything fixed in the project?

[weiyuq]

I am sorry, I thought it was resolved. and my project was later used in other ways

[shlensky]

also have this error, please fix it

[sss63232]

got same issue. Is there any good way to solve it ?

[shlensky]

if someone want to use it with React - I made a version rewritten for React https://github.com/shlensky/sweetcherry

[sss63232]

@shlensky It looks nice!

But I'm not using React, although I use webpack to bundle.

Could you give me any direction about solving the "error: Cannot set property 'trackingClick' of undefined" ?

[shlensky]

@sss63232 no 😞

[dodubassman]

Same issue here. Will fallback full css. Shame, it was nice.
One example among others using css: https://codepen.io/artyom-ivanov/pen/ggQaLV

[bchavez]

Using script-loader with Webpack 4 works too:

import "script-loader!switchery/dist/switchery.js";

[hatbilweb]

webpack.config.js

module: {
    noParse: /switchery/
}

That works for me.

Good job. that works for me :)

[Kocal]

webpack.config.js

module: {
    noParse: /switchery/
}

That works for me.

Thanks for the solution, but note that this won't work if you import Switchery CSS with webpack. You will have many errors:

To prevent this issue, you can use the following configuration which will only ignore Switchery JS:

module: {
    noParse: /switchery\/dist\/switchery(min.)?\.js/
}

[d-ganchar]

That works for me("webpack": "^5.35.1", "string-replace-loader": "^3.0.1"):

module.exports = {
  module: {
    rules: [
      {
        test: /switchery\.js$/,
        loader: 'string-replace-loader',
        options: {
           search: 'function FastClick(layer) {',
           replace: 'function FastClick(layer) {_fastClick.call(window,layer);};function _fastClick(layer){',
        },
      },
    ]
  }