Fix Webpack compatibility

[MattiasBuelens]

Webpack seems to always select the UMD version using a require condition, whereas the ESM version is much more suitable for such bundlers.

I also revisited the fix from #95 to be more robust. We will now specifically look for the Conviva.Constants API to decide whether to use the default or namespace import when loading the Conviva SDK. This should be more robust.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2d8d537

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@theoplayer/adscript-connector-web	Patch
@theoplayer/comscore-connector-web	Patch
@theoplayer/conviva-connector-web	Patch
@theoplayer/nielsen-connector-web	Patch
@theoplayer/yospace-connector-web	Patch
@theoplayer/gemius-connector-web	Patch
@theoplayer/cmcd-connector-web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tvanlaerhoven]

When importing through @theoplayer/react-native-analytics-conviva, and bundling with Webpack, I see it now takes the ESM module, but it still fails with:

conviva-connector.esm.js:2 Uncaught ReferenceError: exports is not defined
    at eval (conviva-connector.esm.js:2:23)
    at ./node_modules/@theoplayer/conviva-connector-web/dist/conviva-connector.esm.js (bundle.web.js:2162:1)
    at __webpack_require__ (bundle.web.js:6612:32)
    at fn (bundle.web.js:6819:21)
    at eval (ConvivaConnectorAdapter.web.js:1:651)
    at ./node_modules/@theoplayer/react-native-analytics-conviva/lib/module/internal/ConvivaConnectorAdapter.web.js (bundle.web.js:2206:1)
    at __webpack_require__ (bundle.web.js:6612:32)
    at fn (bundle.web.js:6819:21)
    at eval (ConvivaConnector.js:1:618)
    at ./node_modules/@theoplayer/react-native-analytics-conviva/lib/module/api/ConvivaConnector.js (bundle.web.js:2173:1)

[MattiasBuelens]

When importing through @theoplayer/react-native-analytics-conviva, and bundling with Webpack, I see it now takes the ESM module, but it still fails with:

conviva-connector.esm.js:2 Uncaught ReferenceError: exports is not defined

That's a pre-existing bug in the React Native app's webpack config, which this PR only exposes.

Its babel-loader rule runs @react-native/babel-preset over @theoplayer/**/*.js in node_modules, and that preset rewrites import/export into CommonJS. Since @theoplayer/conviva-connector-web is "type": "module", webpack parses its .js files as strict ESM, where exports/require/module don't exist — so the Babel output throws on its first statement, Object.defineProperty(exports, "__esModule", …) (exports sits at column 23, matching your trace).

It went unnoticed until now because webpack used to resolve the UMD bundle, whose typeof exports === 'object' guards silently pick the wrong branch instead of throwing. With the new webpack condition resolving to the ESM bundle, it becomes a hard error.

The fix is to leave module syntax to webpack:

presets: [['module:@react-native/babel-preset', { disableImportExportTransform: true }]],

PR for the e2e app: THEOplayer/react-native-connectors#465. That also lets us remove the filename-specific *-connector.esm.js exclusions from THEOplayer/react-native-connectors@7f60963.