[Bug:] SyntaxError: Unexpected token 'export'

[averysmithproductions]

Describe the Bug

vitest is unable to pass certain tests within our repo, of which use the cmsgov-design-system node package. Please note, not all of our tests fail but these 12 do.

To reproduce

1. in your terminal, run git clone https://github.cms.gov/PQDC/pqdc-dkan
2. run git fetch
3. run git checkout https://github.cms.gov/PQDC/pqdc-dkan/pull/1872
4. run cd src/frontend
5. run npm i
6. run npm run test

Expected behavior

within our repo, npm run test generates the following error message:

SyntaxError: Unexpected token 'export'
Module /Users/asmith/Repos/pqdc-dkan/src/frontend/node_modules/@cmsgov/design-system/dist/react-components/esm/index.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@cmsgov/design-system" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "@cmsgov/design-system"
        ]
      }
    }
  }
}

This is causing 12 tests to fail. Screenshot below for context:

Please note, the work-around was unsuccesful.

Severity/Impact

Medium: Product teams can use workaround but still blocker

Desktop Operating System

MacOS 14.6.1

Desktop Browser Name

No response

Desktop Browser Version

No response

Device

No response

Mobile Operating System

No response

Mobile Browser Name

No response

Mobile Browser Version

No response

Additional context

In short, I think https://github.com/CMSgov/design-system/blob/main/package.json needs to have a type: "module" property for vitest to be satisfied.

Please note, our work-around may be to just not make vitest required for deployment.

Codebase/Repository URL

https://github.cms.gov/PQDC/pqdc-dkan

Design System Version

^12.0.0

Existing branch or Pull request on Github

https://github.cms.gov/PQDC/pqdc-dkan/pull/1872

Team Name

PDC

[swirtSJW]

Thanks @averysmithproductions for filling in all the details.

[tamara-corbalt]

@averysmithproductions I’m hitting a 404 on https://github.cms.gov/PQDC/pqdc-dkan. Could you confirm the correct repo/link, or grant access if it’s private?

[swirtSJW]

Hi @tamara-corbalt sorry I missed this. I am afraid the repo is private and I am not empowered to add people to it. Even if I could, you would not be able to build the site because it needs access to data that involves a whole additional access procedure. Sorry it is not one that is easily tested without additional job codes.