Errors when bundling plotly.js with ionic

[aiko-psi]

Hi,
I'm using plotly.js with ionic and I am very happy with it. But when I trie to minify the project during build for production, there is a strange Error. All other Errors are gone with the newest Version (1.37.0). I had the same issues with V 1.35.2 .
Does someone has a clue whats the problem and how I can solve it?

[12:45:38] Error: ./node_modules/plotly.js/src/plots/cartesian/axes.js Module parse failed: Error parsing regular
expression: Invalid regular expression: / newDiff + 1e-6) % 1 < 2e-6 &&(((newFirst - ax._forceTick0) /:
Unmatched ')' (185:53) You may need an appropriate loader to handle this file type. | // and forceTick0 can
be shifted to newFirst | if (function (ax, _minDtick) { | if (_minDtick === void 0) { _minDtick = / newDiff
+ 1e-6) % 1 < 2e-6 &&(((newFirst - ax._forceTick0) / newDiff % 1) + | 1.000001) % 1 < 2e-6; } | ax._minDtick
= newDiff; @ ./node_modules/plotly.js/src/transforms/sort.js 10:11-45 @ ./node_modules/plotly.js/lib/sort.js
@ ./node_modules/plotly.js/lib/index.js @ ./src/pages/statSites/statQuestionnaire/statQuestionnaire.ts @
./src/pages/statSites/statQuestionnaire/statQuestionnaire.ngfactory.ts @ ./src/app/app.module.ngfactory.ts @
./src/app/main.ts
Error: ./node_modules/plotly.js/src/plots/cartesian/axes.js
Module parse failed: Error parsing regular expression: Invalid regular expression: / newDiff + 1e-6) % 1 < 2e-6 &&(((newFirst - ax._forceTick0) /: Unmatched ')' (185:53)
You may need an appropriate loader to handle this file type.
| // and forceTick0 can be shifted to newFirst
| if (function (ax, _minDtick) {
| if (_minDtick === void 0) { _minDtick = / newDiff + 1e-6) % 1 < 2e-6 &&(((newFirst - ax._forceTick0) / newDiff % 1) +
| 1.000001) % 1 < 2e-6; }
| ax._minDtick = newDiff;
@ ./node_modules/plotly.js/src/transforms/sort.js 10:11-45
@ ./node_modules/plotly.js/lib/sort.js
@ ./node_modules/plotly.js/lib/index.js
@ ./src/pages/statSites/statQuestionnaire/statQuestionnaire.ts
@ ./src/pages/statSites/statQuestionnaire/statQuestionnaire.ngfactory.ts
@ ./src/app/app.module.ngfactory.ts
@ ./src/app/main.ts
at BuildError.Error (native)
at new BuildError (/home/aiko/IdeaProjects/etmos_the/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (/home/aiko/IdeaProjects/etmos_the/node_modules/@ionic/app-scripts/dist/webpack.js:119:28)
at emitRecords.err (/home/aiko/IdeaProjects/etmos_the/node_modules/webpack/lib/Compiler.js:265:13)
at Compiler.emitRecords (/home/aiko/IdeaProjects/etmos_the/node_modules/webpack/lib/Compiler.js:371:38)
at emitAssets.err (/home/aiko/IdeaProjects/etmos_the/node_modules/webpack/lib/Compiler.js:258:10)
at applyPluginsAsyncSeries1.err (/home/aiko/IdeaProjects/etmos_the/node_modules/webpack/lib/Compiler.js:364:12)
at next (/home/aiko/IdeaProjects/etmos_the/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/home/aiko/IdeaProjects/etmos_the/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/home/aiko/IdeaProjects/etmos_the/node_modules/tapable/lib/Tapable.js:222:13)

[alexcjohnson]

The source for that is:

plotly.js/src/plots/cartesian/axes.js

Lines 209 to 210 in c91866d

	if((ax._minDtick / newDiff + 1e-6) % 1 < 2e-6 &&
	(((newFirst - ax._forceTick0) / newDiff % 1) +

It looks like you have some transformation that's incorrectly adding = before the / newDiff?
A little farther down in your traceback:

if (_minDtick === void 0) { _minDtick = / newDiff
+ 1e-6) % 1 < 2e-6 &&(((newFirst - ax._forceTick0) / newDiff % 1)

No idea why that would have happened, but it certainly doesn't look like a correct transformation of the source.

[etpinard]

This might be related to #2528 which got resolved by dropping browser-pack-flat in #2572.

@aiko-psi if 1.37.0 is working for you, than I suggest using that. We won't patch the 1.35.x series to resolve this issue. But if you're still seeing issues in 1.37.0, would you mind giving us a bit more info e.g. which minifier are you using, which entry file are you pointing your minifier towards, what command are you using?

[aiko-psi]

Thank you both for your replies!

@etpinard I am using ionic and its minifier. The command ionic cordova build android --prod produces this error. I am not sure what kind of minifier ionic is using.
While testing the app I found a even bigger problem with version 1.37.0 for me. When I try to to run the app, I get a Error

Uncaught TypeError: Cannot read property 'format' of undefined

I tried to go back to Version 1.35.2 but the error is still there. The Error remains the same with different versions of plotly, just the line of the error changes (always in plotly files). I attach two exaples for errors I got. It seems to me this problem has something to do with the date formats for the axes, would you agree? Do you have any idea to fix it? Because the app is completly broken at the moment and I need it.
Thank you for your help!

[aiko-psi]

I was surprised that I did not find the word 'format' in the code the error message points to. After I few tries I found an error pointing to this line. Perhaps that helps?

[alexcjohnson]

@aiko-psi any chance your environment has d3 v4 in it? Plotly uses d3 v3, and we've seen a case where d3 v4 ends up replacing v3 and breaking everything, in similar ways to that (@nicolaskruchten remind me where that was debugged?)

[aiko-psi]

@alexcjohnson I think d3 is not integrated in Ionic because every tutorial for ionic explains that you have to run npm install d3 before using it with ionic.
I checked if there is another version of d3 but npm list d3 only gives me

├─┬ [email protected]
│ └── [email protected]

[nicolaskruchten]

The symptom we had was that window.d3.version was set to 4.x, and I think it was Webpack exposing things in a funny way.

[etpinard]

Odds are this ticket is obsolete. Closing. @aiko-psi feel free to reopen another issue if you're still encountering problems of the likes.