I've been working on a TypeScript project and wanted to incorporate the following library: https://github.com/Simonwep/pickr
According to the project instructions, I have performed the following steps:
import '@simonwep/pickr/dist/themes/nano.min.css'; // 'nano' theme
import {Pickr} from '@simonwep/pickr';
I also created a separate file where I declared the module:
declare module '@simonwep/pickr';
However, upon trying to use the library, I encountered this error in the Firefox console:
TypeError: pickr_min_1 is undefined
After some trial and error, I managed to fix the issue by using:
import Pickr from '@simonwep/pickr';
Now, when attempting to build the project, a new error surfaces:
[!] 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
Being new to TypeScript and npm, I'm unsure about the correct approach for importing such projects into my TypeScript setup. Any guidance on this matter would be greatly appreciated.
Below are snippets of 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/**',
sourceMap: 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
},
]
}
];