Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Certain function is lost in production builds

See original GitHub issue

🐛 bug report

In serve mode, I was able to use chakra-ui with parcel working fine, but in production build, chakra-ui is broken. This is because the required function has been transform to {} in the production build.

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "curly-tribble",
  "version": "1.0.0",
  "license": "MIT",
  "main": "dist/index.html",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html --no-source-maps",
    "lint": "prettier --check './src/**/*.{js,ts,tsx}'",
    "format": "prettier --write './src/**/*.{js,ts,tsx}'"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "prettier": "^2.2.1",
    "typescript": "^4.1.3"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.1.0",
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "framer-motion": "^3.1.1",
    "parcel": "^2.0.0-nightly.496",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

🤔 Expected Behavior

Works the same way as serve mode.

😯 Current Behavior

TypeError: {} is not a function
    at Pb (use-style-config.js:29)
    at heading.js:9
    at Hs (react-dom.production.min.js:157)
    at hc (react-dom.production.min.js:176)
    at di (react-dom.production.min.js:271)
    at bd (react-dom.production.min.js:250)
    at md (react-dom.production.min.js:250)
    at hd (react-dom.production.min.js:250)
    at id (react-dom.production.min.js:243)
    at td (react-dom.production.min.js:237)

  var mergedProps = mergeWith({
    theme,
    colorMode
  }, (_styleConfig$defaultP = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _styleConfig$defaultP : {}, filterUndefined(omit(rest, ["children"])));

--no-source-maps

TypeError: {} is not a function
    at Pb (index.9496bcd0.js:1)
    at index.9496bcd0.js:1
    at Hs (index.9496bcd0.js:1)
    at hc (index.9496bcd0.js:1)
    at di (index.9496bcd0.js:1)
    at bd (index.9496bcd0.js:1)
    at md (index.9496bcd0.js:1)
    at hd (index.9496bcd0.js:1)
    at id (index.9496bcd0.js:1)
    at td (index.9496bcd0.js:1)

          , d = {}({
            theme: l,
            colorMode: u
        }, null != (r = null == c ? void 0 : c.defaultProps) ? r : {}, em(Xh(i, ["children"]), (e=>null != e)))

The function mergeWith has disappeared, which is exported from lodash in the form of default as. https://github.com/chakra-ui/chakra-ui/blob/085891be806b855af90b86367f5b26e8151c3ff5/packages/utils/src/object.ts#L3

💁 Possible Solution

~~Maybe it has something to do with https://github.com/parcel-bundler/parcel/issues/5459.~~ Build with --no-scope-hoist, I noticed this after I submitted the Issue…