[Bug] import_coloris.default.init is not a function

[jjf21]

I have same kind of errors as #13

Just by adding

import "@melloware/coloris/dist/coloris.css";
import Coloris from "@melloware/coloris";
Coloris.init();
Coloris({el: "#coloris"});

I have the error:

Uncaught TypeError: import_coloris.default.init is not a function

Using CDN is working properly, am I missing something ?

[melloware]

Are you using the latest version 0.10.3 ?

[jjf21]

Yes

"@melloware/coloris": "^0.10.3"

Small project, here is the package.json

    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.1",
    "@melloware/coloris": "^0.10.3",
    "autoprefixer": "^10.4.4",
    "esbuild": "^0.14.27",
    "feather-icons": "^4.28.0",
    "postcss": "^8.4.12",
    "puppeteer": "^13.5.2",
    "tailwindcss": "^3.0.23"

[melloware]

@blutorange this cropped up again but all of our tests are passing where you basically check this.

[melloware]

The last time this happened we added this test case which runs on build: https://github.com/melloware/coloris-npm/blob/main/test-npm/webpack-ts/src/index.ts

[jjf21]

Is there any manual configuration I can try to help find out the problem ?

[blutorange]

The test works because of this entry in the tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
  }
}

The UMD wrapper has

module.exports.Coloris = factory();

where factory() is the Coloris function/object. So with plain commonJS , that would be const {Coloris} = require("@melloware/coloris") or import {Coloris} from "@melloware/coloris"; for ESM

Can't quite remember why we didn't make that module.exports = factory();, but I suppose it was because otherwise it'd be incompatible with some parts of the ecosystem (TS, other module systems etc.)

[blutorange]

I think it may have been (at least partially) due to AMD / requirejs support. At any rate, changing that right now would probably result in issues for people already using this lib. So for now, I'd say we should just update the docs and re-evaluate whether we want to change the module wrapper with the next major release of Coloris.

[melloware]

I am ok with breaking this wrapper to get it right. We only have about 80 downloads a week and increasing each month. Better to fix it for good sooner than later?

[blutorange]

Hmm ok, but I need to think about whether that is right or not. Default exports are a problem by themselves and may work differently depending on the bundler / module system. I might have some time during the next few days. I guess we should start by adding more a few tests with webpack and other bundlers, with / without TS.

[melloware]

Ok no worries. You are the expert!

[jjf21]

Hi, thanks for your work but it is still not working.

Even with:

import "@melloware/coloris/dist/coloris.css";
import { coloris, init } from "@melloware/coloris";
init();
coloris({el: "#coloris"});

[blutorange]

@jjf21 Could you share a simple project that illustrates the issue? Might be specific to whatever bundler etc. you are using. Also, did you test against the current version in this github repo since I believe there was no release yet with the change (so the coloris export doesn't exist yet)?

[blutorange]

I uploaded version 0.10.4-rc1 to npm if you want to try.

[jjf21]

In fact I tried it with

yarn add ssh://git@github.com:melloware/coloris-npm.git#main

using 0.10.4-rc1 works perfectly !

Thanks for your help !