Skip to content

Error when both Meteor and babel compile an ecmascript module #12035

@zodern

Description

@zodern

Reproduction:

  1. meteor npm install swiper@6.8.4 and import it on the client import swiper from 'swiper';
  2. In the package.json, have Meteor recompile swiper:
{
    "meteor": {
        "nodeModules": {
            "recompile": {
                "swiper": [
                    "legacy"
                ]
            }
        }
    }
}

When running in a legacy browser, there is the error in the node_modules/swiepr/cjs/components/core/core-class.js, which was bundled as part of the modules.js file.

Assignment to read-only properties is not allowed in strict mode

This is caused by:

  1. The node_modules/swiepr/cjs/components/core/core-class.js file was already compiled by Babel before the package was published. Babel added the line exports.__esModule = true
  2. When Meteor compiles the file, Babel adds an import to a babel runtime helper. This runtime helper is imported using ECMAScript import syntax instead of using require.
  3. The reify compiler runs, changing the import to be a call to module.link

When the file is run in the browser:

  1. module.link is called to import the babel helper. module.link also marks the module as being an ecmascript module, setting exports.__esModule to a read only value
  2. Next, the line babel aded, exports.__esModule = true, runs. This errors since __esModule is read only.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions