vite breaks in production, but works fine in dev mode.

[MarkLyck]

I've just spent the last 2 days trying to migrate from CRA to vitejs, and in dev I have everything working great now.

However, when I tried to do my first deployment with it, I discovered that when it's bundled for production there's a site breaking error :(

The minified error is not very helpful and it leads to code I did not write.

My project is pretty large, +200 components and around 100 dependencies and I noticed the error only happened on a specific page, so I was able to narrow it down to the specific component that breaks everything in vite.

My DateRangePicker...

import { Dayjs } from 'dayjs'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
import generatePicker from 'antd/lib/date-picker/generatePicker'

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)
const { RangePicker } = DatePicker

export default RangePicker

Some context; This code works perfectly fine in CRA, and vite dev environment. But (for me) it breaks when doing vite build && vite preview...

So I thought I would just go create a minimal reproduction and post a bug issue. (I remember the creator stated that the goal is that if it works in dev, it should work in production for vite).

But to my dismay... I cannot reproduce it on stackblitz for the life of me. I tried everything I can think of but I cannot get it to fail on stackblitz the same way it does in my project (and it is not just my local machine, it fails with the same error when deployed on Vercel).

I don't know what else to do at this point.

I have tried to remove all the lazy loading as well. And that changed the error from "r" to "_" but it's still breaking in the same code:

function(o) {
    var s = interopRequireDefault.exports
      , _ = require$$1$1;
    Object.defineProperty(o, "__esModule", {
        value: !0
    }),
    o.default = o.ANT_MARK = void 0;
    var _e = s(require$$1$2)
      , et = s(require$$2$2)
      , tt = s(require$$3$1)
      , rt = s(inherits$1.exports)
      , nt = s(createSuper.exports)
      , at = dt(react.exports)
      , ot = s(require$$8)
      , it = s(devWarning)
      , st = locale$2
      , lt = s(context$2);
    function ct(ft) {
        if (typeof WeakMap != "function")
            return null;
        var ut = new WeakMap
          , mt = new WeakMap;
        return (ct = function(gt) {
            return gt ? mt : ut
        }
        )(ft)
    }
    function dt(ft, ut) {
        if (!ut && ft && ft.__esModule)
            return ft;
        if (ft === null || _(ft) !== "object" && typeof ft != "function") <<<<<<<<<<<<<<<<<< THIS IS THE LINE THAT BREAKS IT 
            return {
                default: ft
            };
        var mt = ct(ut);
        if (mt && mt.has(ft))
            return mt.get(ft);
        var ht = {}
          , gt = Object.defineProperty && Object.getOwnPropertyDescriptor;
        for (var yt in ft)
            if (yt !== "default" && Object.prototype.hasOwnProperty.call(ft, yt)) {
                var $t = gt ? Object.getOwnPropertyDescriptor(ft, yt) : null;
                $t && ($t.get || $t.set) ? Object.defineProperty(ht, yt, $t) : ht[yt] = ft[yt]
            }
        return ht.default = ft,
        mt && mt.set(ft, ht),
        ht
    }
    var vt = "internalMark";
    o.ANT_MARK = vt;
    var pt = function(ft) {
        (0,
        rt.default)(mt, ft);
        var ut = (0,
        nt.default)(mt);
        function mt(ht) {
            var gt;
            return (0,
            et.default)(this, mt),
            gt = ut.call(this, ht),
            gt.getMemoizedContextValue = (0,
            ot.default)(function(yt) {
                return (0,
                _e.default)((0,
                _e.default)({}, yt), {
                    exist: !0
                })
            }),
            (0,
            st.changeConfirmLocale)(ht.locale && ht.locale.Modal),
            (0,
            it.default)(ht._ANT_MARK__ === vt, "LocaleProvider", "`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale"),
            gt
        }
        return (0,
        tt.default)(mt, [{
            key: "componentDidMount",
            value: function() {
                (0,
                st.changeConfirmLocale)(this.props.locale && this.props.locale.Modal)
            }
        }, {
            key: "componentDidUpdate",
            value: function(gt) {
                var yt = this.props.locale;
                gt.locale !== yt && (0,
                st.changeConfirmLocale)(yt && yt.Modal)
            }
        }, {
            key: "componentWillUnmount",
            value: function() {
                (0,
                st.changeConfirmLocale)()
            }
        }, {
            key: "render",
            value: function() {
                var gt = this.props
                  , yt = gt.locale
                  , $t = gt.children
                  , bt = this.getMemoizedContextValue(yt);
                return at.createElement(lt.default.Provider, {
                    value: bt
                }, $t)
            }
        }]),
        mt
    }(at.Component);
    o.default = pt,
    pt.defaultProps = {
        locale: {}
    }
}

Any ideas why this breaks in vite production, but not in CRA and not in Vite dev environment?

[MarkLyck]

SInce there was no response to this, and I needed to move on and couldn't find another solution.

I switched to use react-date-range module instead with date-fns. This is quite frustrating as it adds an extra 20kb to my bundle compared to the above solution.

But for some reason it works fine with react-date-range 🤷‍♂️

If anyone finds a solution to this in the future, please comment on here so I can revert to using antd.

[VegarRingdalAibel]

Did anyone figure out a easy fix for something like this?
Notice I have dev mode working also with "cytoscape-dagre" but breaks in prod build

[njoguamos]

I am going through the same problem. Unfortunately there seem to be no solution apart from replacing the failing components.

[hahatulk]

I've just spent the last 2 days trying to migrate from CRA to vitejs, and in dev I have everything working great now.

However, when I tried to do my first deployment with it, I discovered that when it's bundled for production there's a site breaking error :(

The minified error is not very helpful and it leads to code I did not write.

My project is pretty large, +200 components and around 100 dependencies and I noticed the error only happened on a specific page, so I was able to narrow it down to the specific component that breaks everything in vite.

My DateRangePicker...

import { Dayjs } from 'dayjs'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
import generatePicker from 'antd/lib/date-picker/generatePicker'

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)
const { RangePicker } = DatePicker

export default RangePicker

Some context; This code works perfectly fine in CRA, and vite dev environment. But (for me) it breaks when doing vite build && vite preview...

So I thought I would just go create a minimal reproduction and post a bug issue. (I remember the creator stated that the goal is that if it works in dev, it should work in production for vite).

But to my dismay... I cannot reproduce it on stackblitz for the life of me. I tried everything I can think of but I cannot get it to fail on stackblitz the same way it does in my project (and it is not just my local machine, it fails with the same error when deployed on Vercel).

I don't know what else to do at this point.

I have tried to remove all the lazy loading as well. And that changed the error from "r" to "_" but it's still breaking in the same code:

function(o) {
    var s = interopRequireDefault.exports
      , _ = require$$1$1;
    Object.defineProperty(o, "__esModule", {
        value: !0
    }),
    o.default = o.ANT_MARK = void 0;
    var _e = s(require$$1$2)
      , et = s(require$$2$2)
      , tt = s(require$$3$1)
      , rt = s(inherits$1.exports)
      , nt = s(createSuper.exports)
      , at = dt(react.exports)
      , ot = s(require$$8)
      , it = s(devWarning)
      , st = locale$2
      , lt = s(context$2);
    function ct(ft) {
        if (typeof WeakMap != "function")
            return null;
        var ut = new WeakMap
          , mt = new WeakMap;
        return (ct = function(gt) {
            return gt ? mt : ut
        }
        )(ft)
    }
    function dt(ft, ut) {
        if (!ut && ft && ft.__esModule)
            return ft;
        if (ft === null || _(ft) !== "object" && typeof ft != "function") <<<<<<<<<<<<<<<<<< THIS IS THE LINE THAT BREAKS IT 
            return {
                default: ft
            };
        var mt = ct(ut);
        if (mt && mt.has(ft))
            return mt.get(ft);
        var ht = {}
          , gt = Object.defineProperty && Object.getOwnPropertyDescriptor;
        for (var yt in ft)
            if (yt !== "default" && Object.prototype.hasOwnProperty.call(ft, yt)) {
                var $t = gt ? Object.getOwnPropertyDescriptor(ft, yt) : null;
                $t && ($t.get || $t.set) ? Object.defineProperty(ht, yt, $t) : ht[yt] = ft[yt]
            }
        return ht.default = ft,
        mt && mt.set(ft, ht),
        ht
    }
    var vt = "internalMark";
    o.ANT_MARK = vt;
    var pt = function(ft) {
        (0,
        rt.default)(mt, ft);
        var ut = (0,
        nt.default)(mt);
        function mt(ht) {
            var gt;
            return (0,
            et.default)(this, mt),
            gt = ut.call(this, ht),
            gt.getMemoizedContextValue = (0,
            ot.default)(function(yt) {
                return (0,
                _e.default)((0,
                _e.default)({}, yt), {
                    exist: !0
                })
            }),
            (0,
            st.changeConfirmLocale)(ht.locale && ht.locale.Modal),
            (0,
            it.default)(ht._ANT_MARK__ === vt, "LocaleProvider", "`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale"),
            gt
        }
        return (0,
        tt.default)(mt, [{
            key: "componentDidMount",
            value: function() {
                (0,
                st.changeConfirmLocale)(this.props.locale && this.props.locale.Modal)
            }
        }, {
            key: "componentDidUpdate",
            value: function(gt) {
                var yt = this.props.locale;
                gt.locale !== yt && (0,
                st.changeConfirmLocale)(yt && yt.Modal)
            }
        }, {
            key: "componentWillUnmount",
            value: function() {
                (0,
                st.changeConfirmLocale)()
            }
        }, {
            key: "render",
            value: function() {
                var gt = this.props
                  , yt = gt.locale
                  , $t = gt.children
                  , bt = this.getMemoizedContextValue(yt);
                return at.createElement(lt.default.Provider, {
                    value: bt
                }, $t)
            }
        }]),
        mt
    }(at.Component);
    o.default = pt,
    pt.defaultProps = {
        locale: {}
    }
}

Any ideas why this breaks in vite production, but not in CRA and not in Vite dev environment?

you should change your import of antd from
import generatePicker from 'antd/lib/date-picker/generatePicker'
to
import generatePicker from 'antd/es/date-picker/generatePicker'
or write alias in vite.config

 resolve: {
      alias: {
        "antd/lib": "antd/es",
      },
    },

source #3413

[Your-Ehsan]

I am also shucked in this problem. my dev mode is running well and has no error but when I create a build using yarn build command then my production gives me error and my whole application breaks 😢

[Your-Ehsan]

vite needs to improve their build procedure as it is not ready for production.

[stillalivx]

Same situation here! I get this error:

I check the prod code that vite generate and It seems dayjs dependency is the function that throw the error...

[stillalivx]

Okay... So... I fixed but it wasn't the way I expected to fix this issue... I mean, It was more a human error than a vite prod error... I'm gonna post it cause maybe there is another invididual that was writing code like crazy and made the same mistake... This is embarrasing!

I imported dayjs like this:

import * as dayjs from 'dayjs'

Why? Idk. Maybe in the past I had a good reason to did that.

Now, the way I fixed the problem was importing dayjs like this:

import dayjs from 'dayjs'

That's it. No magic... Just a human error...

[jake-wickstrom]

I am still encountering this issue, any solutions or workarounds from a build config perspective? I believe the issue is the format of some imports as @stillalivx mentioned above, but they are in a dependency that I do not control the source of, so modifying the code directly is not an option