Error: You may need an appropriate loader to handle this file type.

[shashiOrdant]

I am using package via npm and using webpack as a module bundler in vue project.

I am getting following error

This cause the error import Pickr from '@simonwep/pickr'; my .babelrc looks like { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-syntax-dynamic-import", "transform-regenerator"] }

Your environment:

Version (see Pickr.version): 1.8.0
Used bundle (es5 or normal one): normal one
Used theme (default is classic): default
Browser-version:  Google chrome 87.0.4280.88 
Operating-system:  Windows 10

[NateSeymour]

Could you please post your webpack config as well? Thanks!

[simonwep]

Keep in mind that pickr is in the commonjs format and not an ES6 module. You won't be able to import it that way in a browser. It'll only work with a bundler (or as a bundle) as they're capable of dealing with both module types.

[shashiOrdant]

Could you please post your webpack config as well? Thanks!

@NateSeymour webpack.config looks like { "module": { "rules": [{ "test": {}, "exclude": {}, "loader": "babel-loader" }, { "test": {}, "loader": "css-loader" }, { "test": {}, "loader": "vue-loader" }] }, "resolve": { "alias": { ... }, "extensions": ["*", ".js", ".vue", ".json"] }, "plugins": [ { "definitions": { "process.env.NODE_ENV": "\"development\"", "server": "\"local\"" } }, { "resourceRegExp": {}, "contextRegExp": {} }, {}, { "options": { "hashFunction": "md5", "hashDigest": "base64", "hashDigestLength": 4 } } ], "entry": ["babel-polyfill", "./src/.../app.js"], "output": { "path": "D:\\...\\dist", "filename": "file-name.js", "chunkFilename": "[name].chunk.js" } }

[simonwep]

Closing due to inactivity.