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.

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

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