Meteor app is not working with nivo on runtime

Question

I am now responsible for a meteor app. App has UI and server parts. UI part is written in ReactJS. In this app we have a component called AnalyticsDashboard which contains some anayltic data as a graph. And every kind of graph is handled its own AnalyticsCard. So AnalyticsDahsboard some predefined AnalyticsCard. Every card have an option for graph type. Those are Pie, Bar and Line. Whenever user select the type graph changes. For example Pie type of chart it uses PieChart component. And PieChart component is just wrapper for @nivo/pie package's ResponsivePie function. So the component creation line is like this: AnalyticsDashboard -> AnalyticsCard -> PieChart -> @nive/pie (ResponsivePie)

On production till now (4 years almost) we didnt have any complain about anything from customers. But for another project we tried this app on production with different browsers and we saw an error. Here are the composition of OS and browser:

OS: MacOS Chrome, Edge, Firefox is not working but Brave is working. Windows: Edge is working but Firefox is not working. Linux(Ubuntu): Chrome is working and Firefox is not working.

Here is what error we are having:

TypeError: (intermediate value)(...).apply is not a function
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
q http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
resolve http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /node_modules/d3-interpolate/src/value.js:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /node_modules/d3-interpolate/src/index.js:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /node_modules/@nivo/core/dist/nivo-core.es.js:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /node_modules/@nivo/pie/dist/nivo-pie.es.js:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /imports/ui/components/charts/PieChart.jsx:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /imports/ui/components/analytics/AnalyticsCard.jsx:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
module /imports/ui/components/analytics/AnalyticsDashboard.jsx:1
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
g http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
n http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:7
o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:9
h http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
t http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
bindEnvironment http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1
promise callback*n/t.makeCompatible/n.prototype.then http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1971
dynamicImport http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1975
D http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:2093
Mi http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
Qo http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
fs http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
ds http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
Zs http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
Ys http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
Vs http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
ys http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
_o http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:69
bindEnvironment http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1
promise callback*n/t.makeCompatible/n.prototype.then http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:1971
onNewData http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
M http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
A http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
e http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
K http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
K http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
i http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
ie http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
broadcastQueries http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
broadcastQueries http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
broadcastQueries http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
m http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
M http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
A http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
e http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
M http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
A http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
e http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
next http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165
M http://178.242.135.26:20004/bb7050453852513df29207fd9f56ee3f8a4598e7.js?meteor_js_resource=true:165

As i searched the error i found it on Meteor codebase. In meteor client.js file there is a code like this:

function makeModuleFunction(id, source, options) {
    // By calling (options && options.eval || eval) in a wrapper function,
    // we delay the cost of parsing and evaluating the module code until the
    // module is first imported.
    return function () {
        // If an options.eval function was provided in the second argument to
        // meteorInstall when this bundle was first installed, use that
        // function to parse and evaluate the dynamic module code in the scope
        // of the package. Otherwise fall back to indirect (global) eval.
        return (options && options.eval || eval)(
            // Wrap the function(require,exports,module){...} expression in
            // parentheses to force it to be parsed as an expression.
            "(" + source + ")\n//# sourceURL=" + id
        ).apply(this, arguments);
    };
}

It matches the error i am having. Here also my Component's code with respect to order in Error stack.

AnalyticDashboard :

<AnalyticsCard
    key={ name }
    cardName={ name }
    type={ type }
    { ...cardTypes[type] }
    titleDescription={ description || cardTypes[type]?.titleDescription }
    settings={ { ...settings, startDate: moment(startDate), endDate: moment(endDate) } }
    onChangeSettings={ handleChangeCardSettings(index) }
    onReorder={ handleSwapCards(index) }
    downloadAll={ () => downloadAll() } />

AnalyticsCard :

const renderChart = () => {
    const { dataToDisplay, paramsToUse } = getDataToDisplayAndParamsToUse({
        data, queryParams, graphParams, nTicks, valueType, bucketSize, projectTimezoneOffset, wide, showDenominator,
    });

    if (!dataToDisplay.length) return <Message color='yellow'><Icon name='calendar times' data-cy='no-data-message' />No data to show for selected period!</Message>;
    if (chartType === 'pie') return <PieChart { ...paramsToUse } data={ dataToDisplay } linkToConversations={ linkToConversations } />;
    if (chartType === 'bar') return <BarChart { ...paramsToUse } data={ dataToDisplay } linkToConversations={ linkToConversations } />;
    if (chartType === 'line') return <LineChart { ...paramsToUse } data={ dataToDisplay } linkToConversations={ linkToConversations } />;
    if (chartType === 'table') return <Table { ...paramsToUse } data={ dataToDisplay } bucketSize={ bucketSize } />;

    return null;
};

PieChart:

<ResponsivePie
    data={nivoData}
    margin={margin}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: 'blues' }}
    borderWidth={1}
    borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
    sliceLabel={sliceLabel}
    radialLabel={radialLabel}
    tooltip={tooltip({ formats, x, y })}
    radialLabelsSkipAngle={20}
    slicesLabelsSkipAngle={20}
    animate
    motionStiffness={90}
    motionDamping={15}
    onClick={handleOnClick}
    {...otherProps} />

As far as i can understand meteor construct modules on the fly whenever there is a change (what is that change?) and while doing that somewhow it has option object and this seems to be not a function which we can use apply on it.

But this error is browser dependent and i didnt understand what causes this and how to overcome it. does anyone can give a guess?

thank you.

So this does not work on another app with a newer version of Meteor? Can you specify the meteor release versions (cat .meteor/release when being in the respective project root) of the app where it worked and the version of the app where it does not work? Also - please determine, whether this is a legacy bundle by entering ` Meteor.isModern ` in the console of the browsers that crash — Jankapunkt, Commented Dec 10, 2023 at 11:47
Meteor version is 2.0 and when i write Meteor.isModern in console it returns True. I have one project and it doenst work there. We just learn that this is not working o those borwsers. — Alper Bilgil, Commented Dec 11, 2023 at 13:37

Collectives™ on Stack Overflow

Meteor app is not working with nivo on runtime

0

Your Answer

Browse other questions tagged
javascript
reactjs
meteor
eval
nivo-slider
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Browse other questions tagged javascriptreactjsmeteorevalnivo-slider or ask your own question.

Browse other questions tagged
javascript
reactjs
meteor
eval
nivo-slider
or ask your own question.