Skip to content

Wrong file extension for esm #2614

Open
@ardjuh

Description

@ardjuh

What is the current behavior?
Vitest gives the following error when using a custom ui library with react-use:

SyntaxError: Cannot use import statement outside a module
Module .../node_modules/ui-lib/.../node_modules/react-use/esm/useInterval.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "react-use" 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: [
          "react-use"
        ]
      }
    }
  }
}

This temporary workaround also doesn't fix the error.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:
A ui library with

What is the expected behavior?
That the files in the esm folder have a .mjs extension and/or that the esm folder is marked is a module in the package.json

A little about versions:

  • OS: Not relevant
  • Browser (vendor and version): Not relevant
  • React: 18.2.0
  • react-use: 17.5.0
  • Did this worked in the previous package version?: No

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions