REACT-NATIVE - abcjs - ReferenceError: Can't find variable: Element

Question

import abcjs from 'abcjs';

export default class MusicScore extends Component {
    constructor(props) {
        super(props);
        this.state={
            data: this.props.navigation.getParam('abctune'),
        }
    }
    render(){
        data = this.state.data;
        renderScore = () => {
            abcjs.renderAbc('notation', data);
        }
        return(
            <WebView 
                source={
                    {html: `
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>
                        </head>
                        <body>
                            <div id="notation"></div>
                        </body>
                        </html>
                    `}
                }
                domStorageEnabled
                javaScriptEnabled
                injectJavaScript={renderScore}
            />
        );
    }
}

The code above produces the following

OUTPUT

dev enviornment:

OS: Windows 10

node: v12.10.0

Android Studio: 3.5.2

installed via package manager:

npm install --save abcjs

nah abcjs is a library for rendering sheet music from .abc files or abc format strings — Philip Butler, Nov 28 '19 at 07:19
npm install --save react-abcjs : [ - import abcjs from 'abcjs'; : + import abcjs from 'react-abcjs'; ] : produces the same problem — Philip Butler, Nov 28 '19 at 07:35
Have you rebuilt your debug app before running it? To rebuild it, close your previous bundler, and run `react-native run-android`. In case you're using expo, just restart your `expo`. — Minh Dao, Nov 28 '19 at 08:12
Yeah have rebuilt the whole thing, reset the cache, reset everything. I'm starting to think its an issue with the library — Philip Butler, Nov 28 '19 at 08:15

score 0 · Answer 1 · answered Dec 06 '19 at 00:32

0

Unfortunately, you need a DOM set up. I haven't used react-native, so I'm not sure if this will work:

What works for me when using a SSR package (like Nuxt) is to change the import to later in the process. So:

mounted() {
  const abcjs = require('abcjs');
}

Is there something analogous in react-native?

answered Dec 06 '19 at 00:32

Paulie

1,940
3
20
34

Just wanted to add that they also say this in their FAQ: [Can I use ABCJS in React Native/other mobile development frameworks?](https://paulrosen.github.io/abcjs/overview/faq.html#can-i-use-abcjs-in-react-native-other-mobile-development-frameworks) – Marius Jan 16 '21 at 13:44

REACT-NATIVE - abcjs - ReferenceError: Can't find variable: Element

1 Answers1