Robdel12 / DropKick

A JavaScript plugin for creating beautiful, accessible, and painless custom dropdowns.
http://dropkickjs.com
MIT License
1.92k stars 329 forks source link

TypeError default is not a constructor #355

Closed fi5u closed 6 years ago

fi5u commented 7 years ago

Version of Dropkick:

2.2.2

Expected Behavior

Dropdown render with no errors.

Actual Behavior

Dropdown does not render. Console has following error:

Uncaught TypeError: _dropkickjs2.default is not a constructor
    at new ScrollBar (scroll-bar.js:35)
    at Object.1118 (home.js:9)
    at __webpack_require__ (bootstrap a33eeaf4ff74951c902a:54)
    at webpackJsonpCallback (bootstrap a33eeaf4ff74951c902a:25)
    at home.js:1

Steps To Reproduce:

  1. Import dropkickjs import Dropkick from 'dropkickjs'
  2. Instantiate dropkickjs
const langSelect = document.getElementById('langSelect')
const langSelectInstance = new Dropkick(langSelect)

Not sure if my Webpack config has something to do with this? This is what my babel-loader setup looks like:

{
    test: /\.js$/,
    exclude: /node_modules\/(?!cleave.js)/,
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: resolve(
                __dirname,
                '.webpack-cache'
            ),
            presets: [
                [
                    'env',
                    {
                        targets: {
                            browsers: [
                                'last 2 versions',
                                'ie >= 10',
                            ],
                        },
                    },
                ],
                'react',
                'stage-0',
            ],
            plugins: [
                'transform-object-rest-spread',
                'transform-runtime',
            ],
        },
    },
}
thierrymichel commented 7 years ago

Hi,

FYI, same problem with 2.2.2 and 2.2.1. But works perfectly with 2.2.0…

Robdel12 commented 7 years ago

Sorry about this! It's related to changing the main in package.json. It's now pointing to the complied version because before you would have to transpile the ES6 class in your build system -- which wasn't ideal.

But now it seems there's issues with the file that's built. It's not doing the right "module dance" (AMD vs commonjs vs commonjs2 vs root). Fix one bug, create another 😅 I started to take a look at this over the weekend but ran out of time.

Where I left off was dorking with the webpack config to compile umd, but it still left me with the same issue. I'm going to try and find more time this week to try and tackle this. Distributing JS is hard :/

thierrymichel commented 7 years ago

No problem, great job. :) It should work with something like this: https://webpack.js.org/configuration/output/#output-librarytarget I still have strange behavior between dev/watch and production/build (with UglifyJS 2 or 3). I will try to investigate also on my side.

thierrymichel commented 6 years ago

I had no time to dig into this issue. If it can help, here is my last package which correctly exposes module and browser (package.json)

For now, temporarly fixed with: import Dropkick from 'dropkickjs/src/dropkick';

Robdel12 commented 6 years ago

Hey everyone! I finally had some time to sit down and figure out what was going on. Basically don't have multiple webpack entries 😰

Give v2.2.3 a try and let me know :)