search

wko27 / react-mathjax

MathJax as React component
MIT License
168 stars 71 forks source link

How to use? #7

Closed hhimanshu closed 5 years ago

hhimanshu commented 6 years ago

This is an extremely stupid question. I am trying to use this library based on the usage provided.
The code is available under https://github.com/hhimanshu/demo-cards

I have added the code as follows 

import React from 'react';
import MathJax from 'react-mathjax2'

const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
const content = `This can be dynamic text (e.g. user-entered) text with ascii math embedded in $$ symbols like $$${ascii}$$`

export const AsciiMathDelim = ({}) => (
    <MathJax.Context
        input='ascii'
        onLoad={() => console.log("Loaded MathJax script!")}
        onError={(MathJax, error) => {
            console.warn(error);
            console.log("Encountered a MathJax error, re-attempting a typeset!");
            MathJax.Hub.Queue(
                MathJax.Hub.Typeset()
            );
        }}
        script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML"
        options={{
            asciimath2jax: {
                useMathMLspacing: true,
                delimiters: [["$$", "$$"]],
                preview: "none",
            }
        }}
    >
        <MathJax.Text text={content}/>
    </MathJax.Context>
);

and imported this in index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {AsciiMathDelim} from "./AsciiMathDelim";

ReactDOM.render(<AsciiMathDelim />, document.getElementById('root'));
registerServiceWorker();

When I do yarn start, I get the following error in the console 

Loaded MathJax script!
MathJax.js?config=AM_HTMLorMML:19 Uncaught Error: Can't make callback from given data
    at USING (MathJax.js?config=AM_HTMLorMML:19)
    at Object.Push (MathJax.js?config=AM_HTMLorMML:19)
    at Object.Queue (MathJax.js?config=AM_HTMLorMML:19)
    at Text.refreshMathJax (Text.js:53)
    at Text.componentDidMount (Text.js:37)
    at commitLifeCycles (react-dom.development.js:14361)
    at commitAllLifeCycles (react-dom.development.js:15462)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at Context../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:270)
    at Context.onLoad (Context.js:91)
    at HTMLScriptElement.script.onload (index.js:49)
USING @ MathJax.js?config=AM_HTMLorMML:19
Push @ MathJax.js?config=AM_HTMLorMML:19
Queue @ MathJax.js?config=AM_HTMLorMML:19
refreshMathJax @ Text.js:53
componentDidMount @ Text.js:37
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
index.js:2178 The above error occurred in the <Text> component:
    in Text (at AsciiMathDelim.js:27)
    in Context (at AsciiMathDelim.js:8)
    in AsciiMathDelim (at index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14226
logError @ react-dom.development.js:14265
update.callback @ react-dom.development.js:14918
callCallback @ react-dom.development.js:10878
commitUpdateQueue @ react-dom.development.js:10911
commitLifeCycles @ react-dom.development.js:14396
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
react-dom.development.js:145 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:145)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at Context../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:270)
    at Context.onLoad (Context.js:91)
    at HTMLScriptElement.script.onload (index.js:49)
invokeGuardedCallbackDev @ react-dom.development.js:145
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onLoad @ Context.js:91
script.onload @ index.js:49
load (async)
stdOnEnd @ index.js:47
load @ index.js:28
componentDidMount @ Context.js:62
commitLifeCycles @ react-dom.development.js:14361
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
scheduleRootUpdate @ react-dom.development.js:16785
updateContainerAtExpirationTime @ react-dom.development.js:16812
updateContainer @ react-dom.development.js:16839
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17122
(anonymous) @ react-dom.development.js:17262
unbatchedUpdates @ react-dom.development.js:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17258
render @ react-dom.development.js:17317
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
fn @ bootstrap cbf61ce1d6765fa92fc0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap cbf61ce1d6765fa92fc0:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap cbf61ce1d6765fa92fc0:724
(anonymous) @ bootstrap cbf61ce1d6765fa92fc0:724
webpackHotDevClient.js:138 ./src/index.js
  Line 4:  'App' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:138 ./src/AsciiMathDelim.js
  Line 7:  Unexpected empty object pattern  no-empty-pattern
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:155
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:208
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.

and I do not see anything

screen shot 2018-07-25 at 6 42 14 pm

Could someone please let me know what I am doing wrong and how to fix this?
Thanks a ton for your help

wko27 commented 5 years ago

Hello!

Sorry for the late response.

The issue was that the Context wasn't waiting for the "End" startup hook message before allowing rendering of the content.

This should be fixed in version 0.0.2 published to npm.

Cheers, Andrew