# Importing juggle/resize-observer

**URL:** <https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339>\
**Category:** Uncategorized\
**Created:** [March 26, 2020, 10:55pm UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339 "2020-03-26T22:55:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [March 26, 2020, 10:55pm UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/1 "2020-03-26T22:55:39Z")

</div>

I’m trying to use the [juggle](https://github.com/juggle)/ **[resize-observer](https://github.com/juggle/resize-observer)** npm module without any luck.

Here’s what I have right now:

**aurelia.json**

```
{
  "name": "@juggle",
  "path": "../node_modules/@juggle"
  "main": "resize-observer/lib/ResizeObserver.js"
}

```

**consumer.js**

```
import {ResizeObserver} from '@juggle';
```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 26, 2020, 11:50pm UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/2 "2020-03-26T23:50:23Z")

</div>

Just remove the config from aurelia.json. It has been a long time that cli built-in bundler does not need config to support a new npm package.

Also you config is wrong for scoped npm package. the name should be `@juggle/resize-observer`. But the config is not needed anyway.

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [March 27, 2020, 12:26am UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/3 "2020-03-27T00:26:53Z")

</div>

Removed the config from aurelia.json, but still no joy. ResizeObserver is undefined.

Tried:

```
import { ResizeObserver } from '@juggle/resize-observer'; // as in its doc.
```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2020, 12:38am UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/4 "2020-03-27T00:38:42Z")

</div>

Try `au clear-cache`, you might have wrongly cached result from that wrong config. I will test the lib too.

Update: I got no issue with the code in a cli-bundler+babel app.  
Update: no issue in cli-bundler+ts either.

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [March 27, 2020, 12:57am UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/5 "2020-03-27T00:57:09Z")

</div>

Did `au clear-cache` and I still get `ResizeObserver` as undefined with the following:

```
import { ResizeObserver } from '@juggle/resize-observer';

export class MyElement {
    attached() {
        ResizeObserver // is undefined!
    }
}
```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2020, 1:31am UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/6 "2020-03-27T01:31:38Z")

</div>

I got no issue. [https://github.com/3cp/rr](https://github.com/3cp/rr)

Can you push up a repo to reproduce it?

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [March 27, 2020, 2:42am UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/7 "2020-03-27T02:42:09Z")

</div>

From [https://juggle.studio/resize-observer/](https://juggle.studio/resize-observer/)

`import ResizeObserver from '@juggle/resize-observer';`

NOT `{ ResizeObserver }`

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [March 27, 2020, 5:38pm UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/8 "2020-03-27T17:38:25Z")

</div>

This change doesn’t seem to make a difference. 😔

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [March 27, 2020, 5:44pm UTC](https://discourse.aurelia.io/t/importing-juggle-resize-observer/3339/9 "2020-03-27T17:44:20Z")

</div>

```
import { ResizeObserver } from '@juggle/resize-observer';
// ResizeObserver is defined here.

export class MyElement {
    attached() {
        // ResizeObserver is not defined here!
    }
}

```

To make it available in the class, I set it to a constant:

```
import { ResizeObserver } from '@juggle/resize-observer';
// ResizeObserver is defined here.
const resizeObserver = ResizeObserver;

export class MyElement {
    attached() {
        // ResizeObserver is not defined here!
        // resizeObserver is defined here.
    }
}
```