Help getting set up

[justingolden21]

Hi, I've been trying to use this color picker (which seems awesome) for over an hour now and figured I'd just make a ticket.

I ran npm install @simonwep/pickr and tried importing it both:

    import '@simonwep/pickr/dist/themes/classic.min.css'; // 'classic' theme
    import '@simonwep/pickr/dist/themes/monolith.min.css'; // 'monolith' theme
    import '@simonwep/pickr/dist/themes/nano.min.css'; // 'nano' theme

and import Pickr from '@simonwep/pickr'; and neither seemed to work.

My code for the picker:

const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic' // or 'monolith', or 'nano'
});

<div class="color-picker" />

I would get

ReferenceError 500
self is not defined

and

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at L._finalBuild (pickr.js:222)
    at new L (pickr.js:128)
    at Function.create (pickr.js:176)
    at instance (index.svelte? [sm]:12)
    at init (index.mjs:1791)
    at new Routes (index.svelte? [sm]:14)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:239)
    at new Proxy<Index> (proxy.js:339)
    at create_if_block_2 (root.svelte? [sm]:38)

and sometimes an error on page, sometimes a white screen

I searched the readme and other files here far and wide as well as your website and the issues here and couldn't find a single example of just setting up the color picker to work.

I found this question which led me on to using onMount (I'm using svelte) and my color picker FINALLY renders after an hour of struggles, but when I open it, I get:

No errors or warnings or anything.

I checked the terminal output and I see:

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (node_modules\@simonwep\pickr\dist\pickr.min.js:2:192)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at nodeRequire (node_modules\vite\dist\node\chunks\dep-92cbd8f1.js:66535:17)
    at ssrImport (node_modules\vite\dist\node\chunks\dep-92cbd8f1.js:66477:20)
    at eval (/src/routes/index.svelte:15:37)

I'm wondering if I'm doing something wrong or if it just doesn't work with svelte. Also, I highly, highly recommend having a single three or four lines on how to actually initialize the picker / get a basic "hello world" picker with absolute minimum settings. I was surprised and disappointed to not find this.

This project looks really awesome, can't wait to eventually start using it. Thanks in advance.

[justingolden21]

It works in dev (after adding more options to create and changing imports) but every simple the page reloads I get self is not defined and it takes two hard refreshes, it also fails on build saying self is not defined

[justingolden21]

I also tried using it via CDN but I get pickr is not defined

[justingolden21]

After another while, I found that no matter what I did it would still give this error and only removing import Pickr from '@simonwep/pickr'; entirely would solve this problem.

Additionally, I spent a while trying to get the conversion figured out, but I can't figure out how one is supposed to use it.

I tried using:

console.log(pickr.hsva);

console.log(hsva);

but either of them have anything. I'm wondering if this is broken and also if this should be documented better. I'd be willing to submit a PR to improve readability of the readme if you're interested : )

[Nisthar]

@justingolden21 did you find any fix for it?

[justingolden21]

I think I used dino color picker tbh

[MathiasQM]

This is still a problem in Vue as weell

[simonwep]

Closed due to inactivity. Please create a new issue if you believe this is a mistake :) Might be fixed with the upcoming patch release.

[aidscooler]

@justingolden21

It works in dev (after adding more options to create and changing imports) but every simple the page reloads I get self is not defined and it takes two hard refreshes, it also fails on build saying self is not defined

Recently, I'm trying to use Pikcr in my website which is powered by Vitepress and I also found this problem. The AI told me this problem is beacause there is no 'self' in Node.js but in the browser. The problem occrued in my project is becase I use the demo code 'import Pickr from '@simonwep/pickr''. AI told me to solve the problem I should remove this code 'import Pickr from '@simonwep/pickr'', import Pickr in onMounted Function. Just like this:

  let Pickr = null;
  onMounted( async () => {
    if (typeof window !== 'undefined') {
      import('@simonwep/pickr')
        .then(module => {
          Pickr = module.default;
          initializePickr(); // init Pickr
          //other code       
        })
        .catch(error => {
          console.error('Failed to load Pickr:', error)
        })
    }    
  });

see my website, it is work fine!

[aidscooler]

@MathiasQM

This is still a problem in Vue as weell

AI helped me solve the problem! see my website, it is work fine! import Pickr in onMounted Function,

  let Pickr = null;
  onMounted( async () => {
    if (typeof window !== 'undefined') {
      import('@simonwep/pickr')
        .then(module => {
          Pickr = module.default;
          initializePickr(); // init Pickr
          //other code       
        })
        .catch(error => {
          console.error('Failed to load Pickr:', error)
        })
    }    
  });