fix: Replace marked import with parse

[SaadBazaz]

Problem

Facing the following error which prevents React Quiz Component from working and crashes the app:

Uncaught TypeError: (0 , _marked.marked) is not a function
    at rawMarkup (helpers.js:29:1)
    at Core (Core.js:412:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
rawMarkup @ helpers.js:29
Core @ Core.js:412
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:18687 The above error occurred in the <Core> component:

    at Core (http://localhost:3002/static/js/bundle.js:34684:24)
    at div
    at Quiz (http://localhost:3002/static/js/bundle.js:35175:19)
    at Game
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Reproduce

1. Install react-quiz-component via npm
2. Run the sample quiz as described in the README
3. Click "Start Quiz"
4. App crashes with above error.

Possible Solution

According to the docs, the right way to parse seems like to call marked.parse. I think marked itself does not do anything.

Similar issue

• 0.5.0 yarn install results Uncaught TypeError: (0 , _marked.marked) is not a function #82
• I am facing problem while using the library in React/typescript app I also run the npm command but problem is still there #75
• _marked.default #79
• https://stackoverflow.com/questions/70152561/typeerror-0-marked-webpack-imported-module-7-default-is-not-a-function

[wingkwong]

The proposed change would cause

Uncaught TypeError: Cannot read properties of undefined (reading 'parse')

var rawMarkup = function rawMarkup(data) {
  var sanitizer = _dompurify.default.sanitize;
  return {
    __html: _marked.marked.parse(sanitizer(data))
  };
};

Besides, the function works fine locally. I suspect there is something wrong with react-quiz-component/lib/core-components/helpers.js

[SaadBazaz]

Hmm. I eventually downloaded the code and ran locally. What do you think is the solution?It seems like a conflict with ```create-react-app```. On 5 Jan 2023 18:33, աɨռɢӄաօռɢ ***@***.***> wrote: The proposed change would cause Uncaught TypeError: Cannot read properties of undefined (reading 'parse') var rawMarkup = function rawMarkup(data) { var sanitizer = _dompurify.default.sanitize; return { __html: _marked.marked.parse(sanitizer(data)) }; }; —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[wingkwong]

Running locally won't trigger the issue. Need some time to investigate.

[wingkwong]

I don't see a clean solution so far.snarkdown seems a nice alternative. I may switch to it in the coming days. Closing this PR first. I'll pick up later.