question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:18 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
TremayneChristcommented, Nov 19, 2019

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.

1reaction
TremayneChristcommented, Dec 12, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest tests fail after upgrading v12 => v13 (Cannot use import ...
Current Behavior Jest tests fail, all the tests fail with the same ... SyntaxError: Cannot use import statement outside a module at Runtime....
Read more >
Angular v13 Jest with nx test - SyntaxError: Cannot use import ...
From what I've found online, this seems like a common issue to projects using Jest and upgrading to Angular 13. Our project doesn't...
Read more >
Nx/community - nrwl - Gitter
Hello all, I am using nrwl/node:package to build a ts node module, ... i get "Cannot use import statement outside a module" which...
Read more >
TypeScript Jest: Cannot use import statement outside module
The TypeScript jest error "Cannot use import statement outside module" occurs when jest is misconfigured in a TypeScript project. To solve the error,...
Read more >
cannot use import statement outside a module jest - You.com
Basically, jest runs on Node.js environment, so it uses modules following the CommonJS. If you want to use axios up to 1.x.x, you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found