search

sefianecho / alwan

A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.
https://sefianecho.github.io/alwan/
MIT License
39 stars 6 forks source link

Trouble building this with my Webpack config #6

Closed globalistas closed 1 year ago

globalistas commented 1 year ago

Hi, I am very new to all this and this is how I build my js/css bundles:

webpack --mode production --optimize-minimize --progress

Using this command however produces the following error:

ERROR in ./node_modules/alwan/dist/js/alwan.min.js 1:10685
Module parse failed: Unexpected token (1:10685)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I suspect my current Webpack config cannot work with minimized js files? Can you please advise what to do?

Thanks!

sefianecho commented 1 year ago

The file alwan.min.js is an umd module, you can't consume it using ESM in webpack. The file is meant to be used in the browser. You can rebuild alwan color picker and output it as esm module.

globalistas commented 1 year ago

You can rebuild alwan color picker and output it as esm module.

Is there an easy way to do this?

sefianecho commented 1 year ago

Clone the repository the you can modify the config file in scripts/webpack.common.js, set the output.library.type to var. then build it using the command npm run build.