nrwl nx and jest causes SyntaxError: Cannot use import statement outside a module
See original GitHub issueDescribe 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?
Issue Analytics
- State:
- Created 4 years ago
- Comments:18 (8 by maintainers)
Top GitHub Comments
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.
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
anddevicePixelContentBox
outputs.contentRect
will not change.