gilbarbara / react-inlinesvg

An SVG loader component for ReactJS
https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo
MIT License
1.27k stars 100 forks source link

Potential issue with canUseDOM import from exenv #206

Closed philBrown closed 1 year ago

philBrown commented 1 year ago

Describe the bug

There appears to be an issue with the exenv import used in helpers.ts

import { canUseDOM as canUseDOMFlag } from 'exenv';

exenv is a CommonJS module, resulting in the following error

unhandledRejection node_modules/react-inlinesvg/dist/index.mjs:25
import { canUseDOM as canUseDOMFlag } from "exenv";
         ^^^^^^^^^
SyntaxError: Named export 'canUseDOM' not found. The requested module 'exenv' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'exenv';
const { canUseDOM: canUseDOMFlag } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  type: 'SyntaxError'
}

To Reproduce

Unfortunately, I'm having trouble creating a stand-alone reproduction.

We're seeing the issue pop up in our Next.js project running Node v16.

Additional context

The exenv library seems a complete waste of space. It's ancient, unmaintained and has no ESM export despite what @types/exenv claims.

The canUseDOM flag you're using is quite literally typeof window !== "undefined" && !!window.document?.createElement. Perhaps you could consider dropping it for your own one-liner

gilbarbara commented 1 year ago

Fixed in 4.0.1

philBrown commented 1 year ago

You're a gentleman and a scholar!