sunknudsen / react-node-to-string Goto Github PK

Any chance you're thinking about updating this module to use ESM?

I'm running into an issue where react-node-to-string works fine in Vite projects but not in NextJS projects within my component library. It complains because of the default export issue of ESM and CommonJS interop.

if reactNode is a JSX in this structure

<div>
  hello
  {' '}
  <a href="#">test</>
</div>

result would be "test"

expected result would be "hello test"

proposal fix:

"use strict"

import React from "react"

const reactNodeToString = function (reactNode: React.ReactNode): string {
  let string = ""
  if (typeof reactNode === "string") {
    string = reactNode
  } else if (typeof reactNode === "number") {
    string = reactNode.toString()
  } else if (reactNode instanceof Array) {
    reactNode.forEach(function (child) {
      string += reactNodeToString(child)
    })
  } else if (React.isValidElement(reactNode)) {
    string += reactNodeToString(reactNode.props.children)
  }
  return string
}

export default reactNodeToString

placing here as I can't do a pull request :)

According to react type declaration:

type ReactFragment = Iterable<ReactNode>;
type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

The ReactFragment is an Iterable<ReactNode> not an Array, which is not instanceof Array and may not contain forEach method

build/index.js has //# sourceMappingURL=index.js.map
build/index.js.map has "sources":["../src/index.ts"]
but src/index.ts is not included, causing:

WARNING in ../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-node-to-string/build/index.js
Module Warning (from ../../node_modules/.pnpm/[email protected][email protected]/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<workspace>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-node-to-string/src/index.ts' file: Error: ENOENT: no such file or directory, open '<workspace>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-node-to-string/src/index.ts'

❯ tree node_modules/.pnpm/[email protected][email protected]/
node_modules/.pnpm/[email protected][email protected]/
└── node_modules
    ├── react -> ../../[email protected]/node_modules/react
    └── react-node-to-string
        ├── build
        │   ├── index.d.ts
        │   ├── index.js
        │   └── index.js.map
        ├── LICENCE
        ├── package.json
        └── README.md

4 directories, 6 files