Мой веб-сайт React работает на сервере разработки, но не на реальном веб-сайте. Где мне искать причину?

Я хочу встроить карту 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 04.07.2024 20:33

@AKX Ох блин, я туда не смотрел... спасибо. Я понятия не имею, почему там написано, что есть синтаксическая ошибка, но это подсказка. Неперехваченная синтаксическая ошибка: ожидаемое выражение, получено '<' в mapscript.js:1:1

user24890768 04.07.2024 20:36

Тогда я предполагаю, что вы получаете ошибку 404 для mapscript.js (а страница 404 — это HTML). Получение 404 имело бы смысл, поскольку на объединенном сайте не будет src/...

AKX 04.07.2024 20:41

@AKX Я новичок в этом, поэтому для меня это не имеет смысла. Не могли бы вы порекомендовать мне ресурс, где можно узнать больше о пакетировании, чтобы я мог понять, как это исправить?

user24890768 04.07.2024 21:03

Самое простое решение — поместить этот скрипт в static/ (или assets/ или как его называет ваш сборщик) и ссылаться на него по этому URL-адресу.

AKX 04.07.2024 21:11

К сожалению, в моем проекте нет папки с ресурсами. Я не создавал его, а получил от учреждения, для которого делаю это. В файле .gitlab-ci.yml есть несколько строк для создания общей папки, если я правильно понял. Но это совсем другая тема, вы решили мой вопрос, спасибо.

user24890768 04.07.2024 23:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
67
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы просто пытаетесь добавить ключевое слово «по умолчанию» в функцию, как показано ниже.

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 и его местоположением.

user24890768 04.07.2024 23:42

Хорошо, это связано с Mapscript.js и проблемами с местоположением. @AKX Спасибо

Kumar Ramalingam 05.07.2024 02:55
Ответ принят как подходящий

@AKX решил мой вопрос:

Файл mapscript.js отсутствует в папке public моего проекта, поэтому выдает ошибку not found.

Теперь мне нужно придумать, как поместить это в папку public, чтобы ошибка исчезла.

Ах да, public/ еще один вариант. Удачи!

AKX 05.07.2024 09:16

Другие вопросы по теме