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?

0

There are 0 best solutions below