I have a react component library that is bundled with microbundle-crl
. Now I updated a lot of dependencies to newer version (Typescript 3 → 4, react 16 → 17, etc).
Now when I bundle my library using, the generated .js
file loads image assets in this way. This is both in index.js
and in index.modern.js
:
var favicon_32 = "favicon-32x32~cxRHXXYf.png";
Here are the (imho) relevant parts of my package.json
file:
{
"name": "…",
"version": "…",
"description": "…",
"author": "…",
"license": "…",
"repository": "…",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.tsx",
"engines": {
"node": ">=10"
},
"files": [
"dist",
"icon"
],
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepublish": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"primeflex": "^2.0.0",
"primeicons": "4.x",
"primereact": "6.x",
"react": "^17.0.0",
"react-intl": "^5.20.4"
},
"devDependencies": {
"archiver": "^5.3.0",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.3",
"eslint": "7.x",
"eslint-config-prettier": "8.x",
"eslint-config-standard": "16.x",
"eslint-config-standard-react": "11.x",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "5.x",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-standard": "5.x",
"fs": "0.0.1-security",
"ftp-deploy": "^2.3.8",
"gh-pages": "3.x",
"isomorphic-git": "^1.8.1",
"microbundle-crl": "^0.13.8",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"primeflex": "^2.0.0",
"primeicons": "4.x",
"primereact": "6.x",
"react": "17.x",
"react-cookies": "^0.1.1",
"react-dom": "17.x",
"react-helmet-async": "^1.0.9",
"react-intl": "5.x",
"react-scripts": "4.x",
"typescript": "4.x"
},
"dependencies": {
…
}
}
While before my update it looked like
var favicon_32 = "favicon-32x32~cxRHXXYf.png";
Of, course, the first version does not work anymore.
I do not understand what is happening, and I do not have the slightest idea how to influence this behavior. I tried fiddling around with the different module types, but I'm utterly confused. I diffed the old and new version, and I cannot spot anything that should cause this change.
How does microbundle-crl
decide how to treat my image imports? How can I influence it?