rschristian
commented
3 years ago Seems like you're having issues with microbundle-crl, which is a different project entirely. You can find its repo here. Microbundle itself does not support importing images.
zhipenglin
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 likevar 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?