skip to Main Content

I want to embed a datawrapper map like this:

import InnerHTML from 'dangerously-set-html-content'
export function Map1(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
return(
    <InnerHTML html={htmlFile} />
)   
}

and it works perfectly fine on the development server, displays everything.
But on the website itself, it does not display. Not even the image specified in the "noscript" part.
In the console of the webpage it says for the mapscript.js file:

Uncaught SyntaxError: expected expression, got ‘<‘

But the file starts like
"!function(){"use strict";const t=new Set(["0","false","null"]),e={allowEditing:Boolean,dark:function" so I have no idea where the "<" supposedly comes from.

The pipeline on GitLab for the website passed.
Let me know what further information is needed for the description.

To try and solve it I used different versions:

export function Map2(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
return(
    <div dangerouslySetInnerHTML={{ __html: htmlFile }} />
)   
}
import DOMPurify from 'dompurify';
export function Map1(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
const sanitizedHTML = DOMPurify.sanitize(htmlFile);
return(
    <InnerHTML html={htmlFile} />
)   
}
export function Map3(){
    return(
        <div style={{minHeight: "374px"}}>
        <script type="text/javascript" defer src="src/utils/mapscript.js" charet="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>
    )
}

But they did not work on the website or on the development server, so i discarded them.

2

Answers


  1. Chosen as BEST ANSWER

    AKX solved my question: the mapscript file is not in the public folder of my project and that is why it is not found.

    I now have to figure out how to get it into the public folder and the error should go away.


  2. You just try to added the ‘default’ keyword in the function, like below

    export default function Map2(){
        const htmlFile = `<div style="min-height: 374px">
            <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
            </script>
            <noscript>
            <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
            </noscript>
    </div>`
    return(
        <div dangerouslySetInnerHTML={{ __html: htmlFile }} />
    )   
    }
    

    refer this document importing and exporting components

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search