"Cannot create property for a non-extensible object" on IE11 when using $component #168

AndriusPreibys · 2022-01-20T09:29:19Z

AndriusPreibys
Jan 20, 2022

Using Alpinejs 2.8.2 and $component throws "Cannot create property for a non-extensible object" error on IE11. Works fine on Chrome though.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/gh/alpine-collective/[email protected]/dist/component.min.js" defer></script>
    <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
</head>
<body>
    <div id="model" x-data="{ test: 'text' }">
        <span x-text="test"></span>
    </div>

    <button @click="$component('model').test = 'clicked!'" x-data>Click</button>
</body>
</html>

Any tips how to fix this?

SimoTod · 2022-01-20T10:13:56Z

SimoTod
Jan 20, 2022
Maintainer

Unfortunately, the cdn build does not support obsolete browsers. You need to get the source code from npm and transpile it for ie11.

0 replies

AndriusPreibys · 2022-02-02T06:16:46Z

AndriusPreibys
Feb 2, 2022
Author

Thanks. Tried transpiling but got the same contents of the file - babel.config.js already has IE 11 enabled.
Switched to $dispatch/x-on to communicate between components.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Cannot create property for a non-extensible object" on IE11 when using $component #168

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

"Cannot create property for a non-extensible object" on IE11 when using $component #168

AndriusPreibys Jan 20, 2022

Replies: 2 comments

SimoTod Jan 20, 2022 Maintainer

AndriusPreibys Feb 2, 2022 Author

AndriusPreibys
Jan 20, 2022

SimoTod
Jan 20, 2022
Maintainer

AndriusPreibys
Feb 2, 2022
Author