Strict ESM mode supported? about repack

[zamotany]

I'm not so sure myself. I would start without HMR for simplicity and make it work without it first.
My worry is that the strict ESM might not be supported because I terrible usage of ESM and CJS inside React Native itself - mixing ESM with CJS. That might cause some problems.

What's the error with interopRequireDefault exactly?

[DaveWelling]

Hopefully the react-native code itself won't come into play. It seems like the "type": "module" setting only applies to the code contained in the module defined by the package.json. The setting doesn't make demands on dependencies.

Failing re-pack/nativepack code:

/*!***************************************!*\
  !*** ../lib_ui-services/src/index.js ***!
  \***************************************/
/***/ (function (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
    'use strict';
    __webpack_require__.r(__webpack_exports__);
    /* provided dependency */ var __react_refresh_utils__ = __webpack_require__(
        /*! ./node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js */ './node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js'
    );
    __webpack_require__.$Refresh$.runtime = require('C:/code/strategic/backbone/silos/silo_ui/backbone20/silo_ui-native/node_modules/react-refresh/runtime.js');
    __webpack_require__.$Refresh$.setup(module.id);

    var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
    Object.defineProperty(exports, '__esModule', { value: true });
    Object.defineProperty(exports, 'eventSink', {
        enumerable: true,
        get: function get() {
            return _eventSink.default;
        },
    });
    Object.defineProperty(exports, 'localStorage', {
        enumerable: true,
        get: function get() {
            return _localStorage.default;
        },
    });
    /// ...MORE OBJECT.DEFINES HERE
    exports.metadata = exports.database = exports.http = exports.authentication = void 0;
    var _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));
    var _index3 = _interopRequireWildcard(require('./database/index'));
    var _eventSink = _interopRequireDefault(require('./eventSink'));
    var _localStorage = _interopRequireDefault(require('./localStorage'));
    /// ...MORE var DECLARATIONS HERE

    /// ... LATER ON IN THE CODE.  I think these exports will probably fail too.
    exports.http = http;
    var database = { get: _index3.default, initialize: _index3.InitializeForUser, isDbReady: _index3.isDbReady };
    exports.database = database;    
});

Here is the same code as generated by my browser webpack build:

/*!***************************************!*\
  !*** ../lib_ui-services/src/index.js ***!
  \***************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

    "use strict";
    __webpack_require__.r(__webpack_exports__);
    /* harmony export */ __webpack_require__.d(__webpack_exports__, {
    /* harmony export */   "authentication": () => (/* binding */ authentication),
    /* harmony export */   "http": () => (/* binding */ http),
    /* harmony export */   "database": () => (/* binding */ database),
    /* harmony export */   "eventSink": () => (/* reexport safe */ _eventSink__WEBPACK_IMPORTED_MODULE_3__.default),
    // ... MORE EXPORTS HERE
    /* harmony export */ });
    /* harmony import */ var _authentication_index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./authentication/index */ "../lib_ui-services/src/authentication/index.js");
    /* harmony import */ var _http_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./http/index */ "../lib_ui-services/src/http/index.js");
    /* harmony import */ var _database_index__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./database/index */ "../lib_ui-services/src/database/index.js");
    /* harmony import */ var _eventSink__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./eventSink */ "../lib_ui-services/src/eventSink.js");
    // ... MORE IMPORTS HERE
            
    const authentication = _authentication_index__WEBPACK_IMPORTED_MODULE_0__;
    const http = { configure: _http_index__WEBPACK_IMPORTED_MODULE_1__.configure, get: _http_index__WEBPACK_IMPORTED_MODULE_1__.get, post: _http_index__WEBPACK_IMPORTED_MODULE_1__.post, remove: _http_index__WEBPACK_IMPORTED_MODULE_1__.remove, patch: _http_index__WEBPACK_IMPORTED_MODULE_1__.patch };
    const database = { get: _database_index__WEBPACK_IMPORTED_MODULE_2__.default, initialize: _database_index__WEBPACK_IMPORTED_MODULE_2__.InitializeForUser, isDbReady: _database_index__WEBPACK_IMPORTED_MODULE_2__.isDbReady };
    /***/ })

[zamotany]

Have you disabled CommonJS transform in Babel config? Assuming you're using babel-loader?

[DaveWelling]

Unfortunately, I don't know the correct way to do that. I've been looking through the metro-react-native-babel-preset and I found an option for disableImportExportTransform which seems to avoid adding the "@babel/plugin-transform-modules-commonjs". I'll give that a try.

[DaveWelling]

It's looking pretty encouraging so far. If I disable hmr, I am able to get our app to load with the disableImportExportTransform option.
For you or anybody that happens to search and find this, here is the relevant webpack.config.js:

module: {
        rules: [
            // Use the default preset with no options for react-native code, etc.
            {
                test: /\.[jt]sx?$/,
                include: [
                    /node_modules(.*[/\\])+react/,
                    /node_modules(.*[/\\])+@react-native/,
                    /node_modules(.*[/\\])+@react-navigation/,
                    /node_modules(.*[/\\])+@react-native-community/,
                    /node_modules(.*[/\\])+@expo/,
                    /node_modules(.*[/\\])+pretty-format/,
                    /node_modules(.*[/\\])+metro/,
                    /node_modules(.*[/\\])+abort-controller/,
                    /node_modules(.*[/\\])+@callstack[/\\]nativepack/
                ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['module:metro-react-native-babel-preset']
                    }
                }
            },
            //  Add the  { disableImportExportTransform: true } option for your app specific code
            {
                test: /\.[jt]sx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['module:metro-react-native-babel-preset', { disableImportExportTransform: true }]],
                        /** Add React Refresh transform only when HMR is enabled. */
                        plugins: hmr ? ['module:react-refresh/babel'] : undefined
                    }
                }
            }
      ]
}

[DaveWelling]

This is working pretty well for me if drop HMR. I noticed that you put the enhancement label on. I won't close it if you are planning to enhance the HMR capabilities using this work item.

[zamotany]

Yeah, I want to at least have an official documentation for it and look into seeing if I can get HMR to work with it.

[zamotany]

Based on initial testing it looks like upcoming version 3.x of Re.Pack supports projects with strict ESM mode.

[DaveWelling]

This is great news. We finally just made it to v2.5.2 so it might take us a little while to get on 3.x. I took a look at https://github.com/callstack/repack/blob/v3/packages/repack/src/modules/WebpackHMRClient.ts and it seems like you are still using module.hot instead of import.meta.webpackHot. I don't think module.hot is supposed to work with ESM modules. Did you figure out a way around that?

[zamotany]

The ESM as far as I understand in Webpack is scoped, so because WebpackHMRClient.ts is not ESM it can use module.hot. Packages and code that are ESM, have to use import.meta.

The original problem was that @pmmmwh/react-refresh-webpack-plugin was adding CJS style code into ESM code, so you would end up with require/module.hot for ESM-only modules. After some checking, it now adds properly either CJS or ESM style code into modules.

[DaveWelling]

I know in v1 my initial bundles worked fine, but I had to turn off HMR. I assumed it was because module.hot was causing webpack to use require inside the update bundles. It sounds like I was confusing scopes though and you've established that module.hot vs import.meta.webpackHot is only relevant to the build code - not the code being built. Thanks for the clarification and for continuing to keep this problem in mind.

[RafikiTiki]

It looks like the problems was solved, closing this due to inactivity. If you need more help, feel free to reopen or create a new issue.