npm module can't import

Question

I have a TypeScript project and I'm trying to use the following project: https://github.com/Simonwep/pickr

As per project description I have done the following:

import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme
import {Pickr} from '@simonwep/pickr';

I also declared this in a separate file:

declare module '@simonwep/pickr';

Now when I try to use the library I see the following in Firefox console:

TypeError: pickr_min_1 is undefined

Edited 23 Oct 2019. Managed to fix the above by using

import Pickr from '@simonwep/pickr';

Now when I try to build the project I see the following error:

[!] Error: 'default' is not exported by node_modules\@simonwep\pickr\dist\pickr.
min.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

I'm new to Typescript and npm, so now sure what's the correct approach to import such kind of project in my TypeScript project. Any help will be appreciated.

Below are my configuration files:

//dev conf
import commoncfg from './conf-common';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import copy from 'rollup-plugin-cpy';
import staticSite from 'rollup-plugin-static-site';

commoncfg[0].plugins.push(
    staticSite({
        template: { path: 'test.html' },
        dir: 'dist'
    }),
    copy({
        files: ['*.jpg'],
        dest: 'dist'
    }),
    serve('dist'),
    livereload()
);
// only generate UMD during dev
commoncfg[0].output.splice(0, 1);
commoncfg.pop();

export default commoncfg;

prod conf:

import { terser } from "rollup-plugin-terser";
import copy from 'rollup-plugin-cpy';

import commoncfg from './conf-common';


commoncfg[0].plugins.push(
    terser(),
    copy({
        files: ['LICENSE', 'README.md'],
        dest: 'dist'
    }),
    );
commoncfg[0].output.pop();
commoncfg[1].plugins.push(
    terser(),
);

export default commoncfg;

conf-common.js:

import pkg from './package.json';
import del from 'rollup-plugin-delete';
import typescript from 'rollup-plugin-typescript2';
import svgo from 'rollup-plugin-svgo';
import generatePackageJson from 'rollup-plugin-generate-package-json'
import postcss from 'rollup-plugin-postcss';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

const outputDir = "./dist/";

let leanPkg = Object.assign({}, pkg);
leanPkg.scripts = {};
leanPkg.devDependencies = {};

const banner = 
`/* **********************************
Test
********************************** */`;

export default [
    {
        input: 'src/index.ts',
        plugins: [
            del({ targets: 'dist/*' }),
            typescript({
                useTsconfigDeclarationDir: true,
        clean: true
            }),
    nodeResolve(),
    commonjs({
      include: 'node_modules/**',  // Default: undefined
      sourceMap: true,  // Default: true
      namedExports: { 'node_modules/@simonwep/pickr' :['pickr'] }
    }),
            postcss(),
            svgo(),
            generatePackageJson({
                baseContents: leanPkg
            })],
        output: [
            {
                file: outputDir + pkg.module,
                format: 'es',
                banner: banner,
            },
            {
                file: outputDir + pkg.main,
                name: pkg.name,
                format: 'umd',
                sourcemap: true,
                banner: banner,
            },
        ]
    },
    {
        input: 'src/index.ts',
        plugins: [
            typescript({
                useTsconfigDeclarationDir: true,
        clean: true
            }),
            postcss({
          extensions: [ '.css' ]

        }),
            svgo(),
            generatePackageJson({
                baseContents: leanPkg
            })],
        output: [
            { 
                file: outputDir + pkg.main, 
                name: pkg.name, 
                format: 'umd',
                banner: banner
            },

        ]
    }
];

Answer 1

I had a same probrem on TypeScript 3.6.

Try import with '* as'

import * as Pickr from '@simonwep/pickr';

Pickr.create({...}) method executed correctly.

Answer 2

I'm the maintainer of pickr,

since version 1.4.5 there should be official type-declarations if you're using it within typescript. As Nathan said, using

import Pickr from '@simonwep/pickr';

is correct, that should also work within typescript. Checkout this codesanbox demo. If you run into any issues, any issues / questions are appreciated. I'll also update the Readme with more TS Examples since it seems like a lot of people using pickr + TS :)

Unfortunately I'm not familiar with rollup, if you can manage to setup a working template you could raise an issue of how you did it.

Pickr.create is not declared which is a bug. It will be fixed in the next patch-version.

Answer 3

Can you ensure your install is correct by executing an:

npm install @simonwep/pickr

then within your module where you wish to use the pickr library try importing the pickr library and the corresponding styling by putting the following at the top of your file:

import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme
import Pickr from '@simonwep/pickr';

Note: According to their documentation you need to load the library's JavaScript after the CSS. Also, note the use of the default import as opposed to a named export. i.e.

import Pickr from '@simonwep/pickr';

as opposed to:

import { Pickr } from '@simonwep/pickr';

Now within your module you need to instantiate the pickr object in order to use it, something along the lines of:

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

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
        'rgba(0, 188, 212, 0.7)',
        'rgba(0, 150, 136, 0.75)',
        'rgba(76, 175, 80, 0.8)',
        'rgba(139, 195, 74, 0.85)',
        'rgba(205, 220, 57, 0.9)',
        'rgba(255, 235, 59, 0.95)',
        'rgba(255, 193, 7, 1)'
    ],

    components: {

        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
});

You can then plug into any of the events fired off by the pickr object, by using the event listeners provided such as:

pickr.on('init', instance => {
    console.log('init', instance);
}).on('hide', instance => {
    console.log('hide', instance);
}).on('show', (color, instance) => {
    console.log('show', color, instance);
})

Hopefully that helps!