Unable to use html-react-parser in create-react-library

[kartikag01]

I was creating an npm module with the help create-react-library,
I which i was using html-react-parser.
but after importing html-react-parser, its giving error

[!] Error: Unexpected token
node_modules/entities/maps/entities.json (1:9)
1: {"Aacute":"\u00C1","aacute":"\u00E1","Abreve":"\u0102","abreve":"\u0103","ac":"\u223E","acd":"\u223F","acE":"\u223E\u0333","Acirc":"\u00C2","acirc":"\u00E2","acute":"\u00B4","Acy":"\u0410","acy":"\u0430","AElig":"\u00C6","aelig":"\ ....very long json 

error Command failed with exit code 1.

[remarkablemark]

Hi @kartik01, could you provide the steps so I can reproduce the issue? And please let me know what OS, node, npm/yarn version you're using.

The error seems to be coming from entities.json, which is used by htmlparser2, a dependency of this library for parsing on the server-side.

[kartikag01]

Hi @remarkablemark , here is information regardig to reproduce this error.
OS: MacOS Mojave Version 10.14.1
Node Version: v10.14.1
yarn: 1.12.3 (i am using yarn for this project)
npm: 6.4.1

Steps to Produce.

1. Create New Project Via create-react-library
2. yarn add html-react-parser
3. in src/index.js add an import statement.

import Parcer from 'html-react-parser'
4. Stop server, then yarn start again.

i am using client side rendering.

[remarkablemark]

It seems that rollup is not properly checking the "browser" field in html-react-parser's package.json.

Because the library is isomorphic (runs on both server and client), the browser field is what tells bundlers like webpack to replace certain code with browser compatible code.

Importing the client-version of the library should resolve the error:

// src/index.js
import Parser from 'html-react-parser/dist/html-react-parser'

Let me know if it works for you.

[kartikag01]

Thanks @remarkablemark,
Now its working fine, just giving an warning.

(!) Use of eval is strongly discouraged
https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval
node_modules/html-react-parser/dist/html-react-parser.js
109: /***/ (function(module, exports, __webpack_require__) {
110:
111: eval("var domToReact = __webpack_require__(/*! ./lib/dom-to-react */ \"./lib/dom-to-react.js\");\nvar htmlToDOM = __webpack_require__(/*! html-dom-parser */ \"./node_modules/html-dom-parser/lib/html-to-dom-client.js\");\n\n// decode HTML entities by default for `htmlparser2`\nvar domParserOptions = { decodeEntities: true, lowerCaseAttributeNames: false };\n\n/**\n * Convert HTML string to React elements.\n *\n * @param  {String}   html              - The HTML string.\n * @param  {Object}   [options]         - The additional options.\n * @param  {Function} [options.replace] - The replace method.\n * @return {ReactElement|Array}\n */\nfunction HTMLReactParser(html, options) {\n  if (typeof html !== 'string') {\n    throw new TypeError('First argument must be a string');\n  }\n  return domToReact(htmlToDOM(html, domParserOptions), options);\n}\n\n/**\n * Export HTML to React parser.\n */\nmodule.exports = HTMLReactParser;\n\n\n//# sourceURL=webpack://HTMLReactParser/./index.js?");
     ^
112:
113: /***/ }),
...and 15 other occurrences

I think this is issue of rollup.

[remarkablemark]

I agree @kartik01. Feel free to close the issue if it's resolved.