# Can't use nextjs package with next/jest

**URL:** <https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599>\
**Category:** API & integrations\
**Created:** [February 3, 2023, 11:36am UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599 "2023-02-03T11:36:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![klaseen](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@klaseen](https://community.piwik.pro/u/klaseen)\
**Post date:** [February 3, 2023, 11:36am UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/1 "2023-02-03T11:36:56Z")

</div>

We have Next.js application that uses the `next/jest` configurator to set up jest in a good way for Next projects. Recently we added the @piwikpro/next-piwik-pro package to our app, as recommended by the Piwik docs. Tracking is working fine, but the integration tests are failing. The error message from Jest is

```auto
Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /...redacted... /node_modules/@piwikpro/next-piwik-pro/index.js:1
    ({"Object.<anonymous>":function(module,exports,require, __dirname,__ filename,jest){import { PiwikProProvider, usePiwikPro } from './core';

```

It seems that the import statement from the next-piwik-pro package is not appreciated by jest, and that this occurs because node\_modules are never transpiled when using next/jest.

I’m certainly not an expert in these matters, but would it be possible to include a commonjs build with the npm package? Or maybe there is another way to work around this?

I have tried several different approaches, including manipulating the the config generated from nextJest (failed because the return type not a basic object but something complicated with a bunch of async things) and running jest in ESM mode. Could not make any progress with that.

---

<div class="post-metadata">

**Author:** ![klaseen](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@klaseen](https://community.piwik.pro/u/klaseen)\
**Post date:** [February 3, 2023, 12:33pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/2 "2023-02-03T12:33:49Z")

</div>

I’ve worked around this by using DataLayer etc from the _react_ package instead of the next package, which seems to be working fine. I’m not sure why the next package can’t use the same build setup as the react package?

---

<div class="post-metadata">

**Author:** ![Piotrek](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/piotrek/32/160_2.png) [@Piotrek](https://community.piwik.pro/u/Piotrek)\
**Post date:** [February 3, 2023, 12:48pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/3 "2023-02-03T12:48:58Z")

</div>

@klaseen we’ll try to reproduce this issue and provide some feedback.

---

<div class="post-metadata">

**Author:** ![Piotrek](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/piotrek/32/160_2.png) [@Piotrek](https://community.piwik.pro/u/Piotrek)\
**Post date:** [February 3, 2023, 12:59pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/4 "2023-02-03T12:59:30Z")

</div>

@klaseen just to make sure - did you try the steps described [here](https://github.com/PiwikPRO/next-piwik-pro#basic-setup)?

That link provides a bit of general info on how to handle issues with importing ESM libraries into Next.js.

---

<div class="post-metadata">

**Author:** ![klaseen](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@klaseen](https://community.piwik.pro/u/klaseen)\
**Post date:** [February 3, 2023, 1:07pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/5 "2023-02-03T13:07:37Z")

</div>

Yes, we do the transpilation in the app and it works. What is going on here is an incompatibility between jest and the next package. I’m not an expert here, but I believe Jest is mainly running in a node environment and their support for ESM is “experimental”. Hence the need for transpilation. In this specific case, though, the configurator supplied by Next disallows thanspiling anything in node\_modules and that’s where it goes wrong. Since the react package is working fine, maybe it is a matter of adding a commonjs output to the next package so it can be integrated with jest more easily?

---

<div class="post-metadata">

**Author:** ![marmal](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/marmal/32/1301_2.png) [@marmal](https://community.piwik.pro/u/marmal)\
**Post date:** [February 10, 2023, 12:26pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/6 "2023-02-10T12:26:53Z")

</div>

@klaseen Thanks for you patience. We reproduced the issue you reported and updated the example app provided with our library by adding few jest tests (we used `transformIgnorePatterns` in jest config to work around the problem you had).

In order to implement the changes you proposed and, most importantly, to verify whether it is even feasible with the current setup of our library we need some time.  
We will get back to you as soon as we have a working solution.

---

<div class="post-metadata">

**Author:** ![klaseen](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@klaseen](https://community.piwik.pro/u/klaseen)\
**Post date:** [February 15, 2023, 3:03pm UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/7 "2023-02-15T15:03:22Z")

</div>

Sounds good,

do you have a link to that example? Our problem is that the default next/jest setup does not allow us to NOT ignore the piwik package, since all node\_modules are ignored by default.

---

<div class="post-metadata">

**Author:** ![marmal](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/marmal/32/1301_2.png) [@marmal](https://community.piwik.pro/u/marmal)\
**Post date:** [February 22, 2023, 9:46am UTC](https://community.piwik.pro/t/cant-use-nextjs-package-with-next-jest/1599/8 "2023-02-22T09:46:42Z")

</div>

the code is in this PR: [fix: fixed example app build by mmalczewski · Pull Request #8 · PiwikPRO/next-piwik-pro · GitHub](https://github.com/PiwikPRO/next-piwik-pro/pull/8/files)
