Importing juggle/resize-observer

#1

I’m trying to use the 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';
1 Like
#2

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.

1 Like
#3

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

Tried:

import { ResizeObserver } from '@juggle/resize-observer'; // as in its doc.
1 Like
#4

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.

1 Like
#5

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!
    }
}
1 Like
#6

I got no issue. https://github.com/3cp/rr

Can you push up a repo to reproduce it?

1 Like
#7

From https://juggle.studio/resize-observer/

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

NOT { ResizeObserver }

1 Like
#8

This change doesn’t seem to make a difference. :pensive:

#9 
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.
    }
}