nrwl nx and jest causes SyntaxError: Cannot use import statement outside a module

Describe the bug I’m using nrwl/nx and jest to build my angular app. I want to use @juggle/resize-observer in the project. It works great when developing and in production, but jest doesn’t seem to like the library.

When running my tests I get

Test suite failed to run

    /Users/leon/Projects/myproject/node_modules/@juggle/resize-observer/lib/ResizeObserver.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { ResizeObserverController } from './ResizeObserverController';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { Observable } from 'rxjs'
    > 2 | import { ResizeObserver } from '@juggle/resize-observer'
        | ^
      3 | 
      4 | /**
      5 |  * Create an observable which will emit every time the passed in elements get resized

      at ScriptTransformer._transformAndBuildScript (../../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (../../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (../../view/ui/src/lib/resize-observable.ts:2:1)

I know this isn’t your problem, it’s a jest problem, but I thought that I won’t be the only one getting this error, so I thought we could try to find a solution together.

To Reproduce create a nx workspace with an angular app add a component import @juggle/resize-observer in the component then run npm test

Expected behavior That the library should work when testing using jest.

Frameworks/Libraries used Angular Jest

Desktop (please complete the following information):

• OS: mac catalina
• Browser chrome
• Version 78

Additional context It has something to do with how the library is packaged and that it has es2015 imports. maybe we need to have a both a “main” field in the package.json which points to a commonjs version, and a “module” version which points to a es2015 version?

[TremayneChrist]

So to get this to work there needs to be a UMD build supplied as the main entrypoint and then keep the ESM build for the module entrypoint.

In theory, it should be safe to just replace the main entrypoint - If anyone has any concerns about this, I can push it into a major release.

[TremayneChrist]

3.0.0-0 should be safe to use but please fix the version. Other prereleases will be released over the next few days which could include changes to contentBoxSize, borderBoxSize and devicePixelContentBox outputs. contentRect will not change.