Я хочу встроить карту datawrapper следующим образом:
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} />
)
}
и на сервере разработки он отлично работает, все отображает. Но на самом сайте оно не отображается. Даже изображение, указанное в части «noscript». В консоли веб-страницы для файла mapscript.js написано:
Неперехваченная синтаксическая ошибка: ожидаемое выражение, получено '<'
Но файл начинается как "!function(){"use strict";const t=new Set(["0","false","null"]),e = {allowEditing:Boolean,dark:function", поэтому я понятия не имею, где находится «<» предположительно происходит от.
Конвейер на GitLab для сайта пройден. Сообщите мне, какая дополнительная информация необходима для описания.
Чтобы попытаться решить эту проблему, я использовал разные версии:
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>
)
}
Но они не работали ни на сайте, ни на сервере разработки, поэтому я их выбросил.
@AKX Ох блин, я туда не смотрел... спасибо. Я понятия не имею, почему там написано, что есть синтаксическая ошибка, но это подсказка. Неперехваченная синтаксическая ошибка: ожидаемое выражение, получено '<' в mapscript.js:1:1
Тогда я предполагаю, что вы получаете ошибку 404 для mapscript.js (а страница 404 — это HTML). Получение 404 имело бы смысл, поскольку на объединенном сайте не будет src/
...
@AKX Я новичок в этом, поэтому для меня это не имеет смысла. Не могли бы вы порекомендовать мне ресурс, где можно узнать больше о пакетировании, чтобы я мог понять, как это исправить?
Самое простое решение — поместить этот скрипт в static/
(или assets/
или как его называет ваш сборщик) и ссылаться на него по этому URL-адресу.
К сожалению, в моем проекте нет папки с ресурсами. Я не создавал его, а получил от учреждения, для которого делаю это. В файле .gitlab-ci.yml есть несколько строк для создания общей папки, если я правильно понял. Но это совсем другая тема, вы решили мой вопрос, спасибо.
Вы просто пытаетесь добавить ключевое слово «по умолчанию» в функцию, как показано ниже.
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 }} />
)
}
обратитесь к этому документу импорт и экспорт компонентов
Это не решает проблему, но спасибо. Действительно, похоже, проблема связана с файлом mapscript.js и его местоположением.
Хорошо, это связано с Mapscript.js и проблемами с местоположением. @AKX Спасибо
@AKX решил мой вопрос:
Файл mapscript.js
отсутствует в папке public
моего проекта, поэтому выдает ошибку not found
.
Теперь мне нужно придумать, как поместить это в папку public
, чтобы ошибка исчезла.
Ах да, public/
еще один вариант. Удачи!
Что вы можете увидеть в консоли браузера, когда ничего не работает?