Firefox accessing colorAreaDims before initialization about coloris HOT 18 CLOSED

Team work!!!

from coloris.

Pretty sure that this fixed it, as we had no updates within this bundle for months. I will try to deliver the latest coloris version to some test users in our next development cycle and provide you the bundled code and logs, if it occures again

from coloris.

@laura-perbility Do you also use Coloris as an NPM module?

from coloris.

It seems that the error just occured because I had the habbit to start the browser first and the devserver afterwards.

I was finally able to reproduce the error thanks to this clue. It appears that when firefox starts, it triggers input and change events on all the fields on the page (not quite sure why!), which causes a race condition in Coloris.

I'm going to release a fix in a few moments. thank you @laura-perbility and @rintisch for you help to identify this issue.

from coloris.

@mdbassit I wonder if its a bug in our Coloris Wrapper doing something slightly differently as it has to load for loaders.

I suspected that at first, but @laura-perbility says they are getting the error with the official build of Coloris rather than the npm version.

Either way, I'll take a look at the code of both to see if I can spot something.

from coloris.

@mdbassit I will come back with a minimal version of my code that I can share as soon as possible, hopefully this weekend.

from coloris.

Thank you for reporting this ! If this is indeed a yet unfixed issue, I'd like to get to the bottom of it. Initializing colorAreaDims with its properties will just mask any underlying problem. Would you be willing to share more information about your logs ?

Does this happen with other browsers or other versions of Firefox ?
Are there any more details you can share from your logs ? What properties are being accessed while colorAreaDims is still undefined ?

from coloris.

I will try to summarize:

• most of our customers use Firefox esr 102, but I found some error logs with Firefox 113, no other browser except firefox
• I tried to reproduce it with Firefox 113 but hat no success
  That is our config

Coloris({
    el: '.color-input',
    focusInput: true,
    alpha: false,
    swatches: []
});

We currently use the 0.20.0 version in production, it also appeared in 0.19.0 (dist files)

s is undefined
M (https://lib.js?v140.0:7:7061)
j (https://lib.js?v140.0:7:9349)

a is undefined
B (https://lib.js?v139.1:7:7219)
z (https://lib.js?v139.1:7:9129)

The error occured on initial page load or something, not while using the picker. I have no info about user input, but am sure that the picker was not visible or used.
So I checked the code and s/a being undefined had to be the colorAreaDims while trying to access its width, somehow trying to set a marker

Hope that helps

from coloris.

This is quite a bit tricky!

colorAreaDims is defined the moment the document finishes loading. I can't imagine how it can be accessed before it's defined! Are you certain the s/a minified names are indeed colorAreaDims?

Also, it looks like you are using Coloris as part of a bundle, are you certain the error comes from Coloris and not some other tool in the bundle? Is it at all possible to have a copy of the bundle to examine ?

from coloris.

I will try to deliver the latest coloris version to some test users in our next development cycle and provide you the bundled code and logs, if it occures again

Thank you so much ! With your help, we can make Coloris better for everyone.

from coloris.

I get the same error, also in Firefox (116.0.1). I am currently only working local and there the error occurs only after starting the dev on the first page load. If I restart the devserver again and reload the page the error does not occur O.o

I post a snippet of my package.json, maybe it helps?

{
  "scripts": {
    "devserver": "npx webpack serve"
  },
  "dependencies": {
    "@melloware/coloris": "^0.20.0",
    "@svgdotjs/svg.js": "^3.1.2"
  },
  "devDependencies": {
    "sass": "^1.64.1",
    "sass-loader": "^13.3.2",
    "css-loader": "^6.8.1",
    "eslint": "^8.45.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

And here is how I use it: I need multiple palettes next to each other, therefore I created the needed HTML elements myself. I guess this is not best practice but to be honest I did not get it from the documentation but just looked at the example page and imitated it.

       #renderColorPalette(data) {
        Coloris.init();

        const paletteContainer = document.getElementById('color-palette');

        // palette is an array of HEX colors 
        const palette = data.colors.palette;

        palette.forEach((color, i) => {

            // Container div
            let container = this.htmlElements.container(['color-container', 'clr-field']);
            container.style.color = color;

            // Create input field
            let input = this.htmlElements.input(
                'text', `color-${i}`, color
            );
            // Following line seems to be needed to make it work, but is not documented so I think I do it not the right way?
            input.setAttribute('data-coloris', ''); 
            input.addEventListener('change', event => { // some event listener});
            container.appendChild(input);

            // Create button
            let button = document.createElement('button');
            container.appendChild(button);

            Coloris.setInstance(`color-${i}`, {
                alpha: false,
                format: 'hsl',
            });

            paletteContainer.appendChild(container);
        });
    }

from coloris.

I get the same error, also in Firefox (116.0.1). I am currently only working local and there the error occurs only after starting the dev on the first page load. If I restart the devserver again and reload the page the error does not occur O.o

Can you paste the exact error message you get?

And here is how I use it: I need multiple palettes next to each other, therefore I created the needed HTML elements myself. I guess this is not best practice but to be honest I did not get it from the documentation but just looked at the example page and imitated it.

You don't need to define most of that manually, all you need is to generate your input fields and then initialize Coloris.

// Not sure what JS framework you use, so I'm reusing your code style
#renderColorPalette(data) {
    Coloris.init();

    const paletteContainer = document.getElementById('color-palette');

    // palette is an array of HEX colors 
    const palette = data.colors.palette;

    palette.forEach((color, i) => {

        // Create input field
        const input = this.htmlElements.input(
            'text', `color-${i}`, color
        );

        input.setAttribute('data-coloris', ''); 
        paletteContainer.appendChild(input);
    });

    Coloris({
        alpha: false,
        format: 'hsl',
    });
}

from coloris.

@mdbassit here is the exact error message:

Uncaught TypeError: colorAreaDims is undefined
    setColorAtPosition webpack:///./node_modules/@melloware/coloris/dist/esm/coloris.js?:576
    setHue webpack:///./node_modules/@melloware/coloris/dist/esm/coloris.js?:733

Thanks for caring!

from coloris.

@mdbassit we take the dist build and use webpack to bundle it with other libraries. It is loaded via

<script src="/build/lib.js?v141.3" type="text/javascript" defer=""></script>

like

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["lib"], { (function(module, exports) { // Coloris dist build or other library } }

from coloris.

@mdbassit I wonder if its a bug in our Coloris Wrapper doing something slightly differently as it has to load for loaders.

from coloris.

I'm still unable to reproduce this error nor find anything that might cause it!

@rintisch, is it at all possible for you to share your code so I can't try and diagnose this a bit more?

from coloris.

@mdbassit I created a nearly minimal setup of my app. You can find it here:
https://github.com/rintisch/coloris-issue-117

But as I realized now: The error seems only to occur when I did not yet start the devserver (npm run devserver). So it is in my case not a bug would I say. It seems that the error just occured because I had the habbit to start the browser first and the devserver afterwards.

from coloris.

@mdbassit I had one test user reproducing it with latest coloris version that resulted in the following bundled code. He reported explicitly no error or interaction with the picker itself while the log was generated.

s is undefined
M (https://app/lib.js?v142.0-rc01+20230818-115702+test:7:7116)
j (https://app/lib.js?v142.0-rc01+20230818-115702+test:7:9404) 2023-08-21 10:13:14.137 6316F799 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0 [1022,730] [1536,864]

from coloris.