exports is not defined on master

[PVince81]

Steps to reproduce

1. On master 7d7999e
2. make dev-setup && make build-js
3. Open the web UI

Expected behaviour

Web UI loads

Actual behaviour

Notes

Caused by #4811

We have no way to prevent dependabot to trigger this patch update.
Doesn't make sense that a patch update breaks compilation so suddenly ?

There are some ideas that it might be related to the "modules" babel option which isn't set in talk.
Also note that other repos like nextcloud-event-bus also haven't had that update yet, so there's a risk that breakage will happen there as well soon.

[PVince81]

talk@11.0.0 /srv/www/htdocs/server/apps/spreed
├── @babel/preset-env@7.12.11 
└─┬ @nextcloud/axios@1.5.0
  └── @babel/preset-env@7.12.11  deduped

with 7.12.10 it works fine, so the problem is caused by changes specifically in 7.12.11

[PVince81]

PR here: #4819

[PVince81]

as mentioned in the PR, the change will break with IE 11 so not possible to use it here.

as suggested in #4819 (comment) the next part is to:

• revert the update
• tell dependabot to not update that lib any more until further notice (to get master unblocked)
• fix IE 11 issues on master: Cannot load Talk 11.x with IE 11 #4820
• continue investigating the root cause
• revert the lock

[PVince81]

but first, there are other issues already on master with IE 11: #4820

[nickvergessen]

nextcloud/notifications#825 (review) the problem is fixed by removing the babel-loader-exclude-node-modules-except
So when IE11 is dropped we can update. The origin is babel/babel#10862

[PVince81]

okay, so should we move the ticket to backlog / 22 so we just discard the workaround at that time ?

we already added the "upgrade exclusion" to avoid further regressions.

[PVince81]

this is a diff of the generated talk.js, on the left with preset-env 7.12.10 and on the right with 7.12.11:

11933,11934c11933,11934
< /*! no static exports found */
< /***/ (function(module, exports, __webpack_require__) {
---
> /*! no exports provided */
> /***/ (function(module, __webpack_exports__, __webpack_require__) {
11936a11937,11955
> __webpack_require__.r(__webpack_exports__);
> /* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
> /* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0__);
> /* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
> /* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_1__);
> /* harmony import */ var core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.for-each.js */ "./node_modules/core-js/modules/es.array.for-each.js");
> /* harmony import */ var core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_2__);
> /* harmony import */ var core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.iterator.js */ "./node_modules/core-js/modules/es.array.iterator.js");
> /* harmony import */ var core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_3__);
> /* harmony import */ var core_js_modules_es_map_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.map.js */ "./node_modules/core-js/modules/es.map.js");
> /* harmony import */ var core_js_modules_es_map_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_map_js__WEBPACK_IMPORTED_MODULE_4__);
> /* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
> /* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5__);
> /* harmony import */ var core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.string.iterator.js */ "./node_modules/core-js/modules/es.string.iterator.js");
> /* harmony import */ var core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_6__);
> /* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
> /* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_7__);
> /* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");
> /* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_8__);
11939d11957
< __webpack_require__(/*! core-js/modules/es.array.concat */ "./node_modules/core-js/modules/es.array.concat.js");
11941d11958
< __webpack_require__(/*! core-js/modules/es.array.filter */ "./node_modules/core-js/modules/es.array.filter.js");
11943d11959
< __webpack_require__(/*! core-js/modules/es.array.for-each */ "./node_modules/core-js/modules/es.array.for-each.js");
11945d11960
< __webpack_require__(/*! core-js/modules/es.array.iterator */ "./node_modules/core-js/modules/es.array.iterator.js");
11947d11961
< __webpack_require__(/*! core-js/modules/es.map */ "./node_modules/core-js/modules/es.map.js");
11949d11962
< __webpack_require__(/*! core-js/modules/es.object.to-string */ "./node_modules/core-js/modules/es.object.to-string.js");
11951d11963
< __webpack_require__(/*! core-js/modules/es.string.iterator */ "./node_modules/core-js/modules/es.string.iterator.js");
11953d11964
< __webpack_require__(/*! core-js/modules/web.dom-collections.for-each */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
11955d11965
< __webpack_require__(/*! core-js/modules/web.dom-collections.iterator */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");

[PVince81]

ok, so the reason for exports is not defined is because after the update the symbol is renamed to __webpack_exports__ 🤔

[PVince81]

I found some possible clues: it seems to be related to typescript / commonjs modules: https://stackoverflow.com/questions/54670544/how-to-fix-referenceerror-exports-is-not-defined-in-a-pure-typescript-project (the error we had was on @nextcloud/event-bus which is using typescript and compiling to commonjs)

[PVince81]

As far as I understand so far, webpack/babel needs some specific way of loading CommonJS for the browser.
Since this doesn't fail on "server", maybe we have differences in how we load modules or this one specifically.

And why did it work so far ? Probably by pure luck, because something else was defining "exports" before, so this missing thing did not catch our eyes.

[PVince81]

Interesting, if I comment out the module here:

diff --git a/webpack.common.js b/webpack.common.js
index 8fd837498..fae75a197 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -59,7 +59,7 @@ module.exports = {
                                        'hot-patcher',
                                        'nextcloud-vue-collections',
                                        'semver',
-                                       '@nextcloud/event-bus',
+                                       // '@nextcloud/event-bus',
                                        'webdav',
                                ]),
                        },

loading Talk now works fine... so maybe that exclusion was preventing babel to add whatever "exports" as necessary.

Now that babel thing, as far as I understand, is mostly there to help with IE 11... But so far IE 11 was broken anyway, see #4820. So will need to continue debugging there as well for a more complete solution.

[PVince81]

instead of commenting that out, it seems that adding the commonjs plugin thing to that ".js" pattern block also solves the issue:

diff --git a/webpack.common.js b/webpack.common.js
index 8fd837498..d195f2325 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -62,6 +62,17 @@ module.exports = {
                                        '@nextcloud/event-bus',
                                        'webdav',
                                ]),
+                               options: {
+                                       plugins: ['add-module-exports'],
+                                       presets: [
+                                               /**
+                                                * From "add-module-exports" documentation:
+                                                * "webpack doesn't perform commonjs transformation for
+                                                * codesplitting. Need to set commonjs conversion."
+                                                */
+                                               ['@babel/env', { modules: 'commonjs' }],
+                                       ],
+                               },
                        },
                        {
                                /**

[PVince81]

also a mysterious thing is that the "server" did not need this part to work correctly even though it's using the event bus already in core, with the requesttoken.

[PVince81]

hmm, the server has an older version of vue, so maybe it could be the reason...

[PVince81]

I've pushed the commonjs fix + preset-env update to #4959

Holding a bit until #4820 is solved, to confirm that it doesn't mess up IE 11.
So far it looked like this also helped IE 11 to at least not show any error related to event bus any more.

[PVince81]

the fix is included in #4829, closing