React生产环境嵌入Datawrapper地图失败，控制台报语法错误求助

问题详情 #

开发服务器上可正常显示地图内容，但部署到正式网站后完全无法显示，甚至<noscript>中的图片也不加载。网页控制台报错：

Uncaught SyntaxError: expected expression, got '<'

报错指向mapscript.js，但该文件实际开头为!function(){"use strict";const t=new Set(["0","false","null"]),e={allowEditing:Boolean,dark:function"，无法定位报错中<的来源。GitLab流水线已通过，无构建错误。

当前使用的代码（开发环境有效）：

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} />
)   
}

已尝试的无效方案 #

以下写法在开发和生产环境均无法正常工作，已弃用：

方案1：使用React原生dangerouslySetInnerHTML #

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 }} />
)   
}

方案2：结合DOMPurify处理HTML #

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} />
)   
}

方案3：直接在JSX中写script标签 #

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>
    )
}

排查方向 #

• 资源路径验证：部署后src/utils/mapscript.js的路径是否正确。开发环境的相对路径在生产环境可能失效，需确认该文件的实际访问URL，检查是否返回404或非JS内容（比如错误页面的HTML，这会导致语法错误中的<）。
• 服务器返回内容检查：直接在浏览器访问生产环境下的mapscript.js URL，查看返回的内容是否为预期的JS代码，而非HTML页面（如404、500页面）。
• React脚本加载限制：React对通过dangerouslySetInnerHTML或第三方组件插入的script标签有安全限制，可尝试在组件挂载后动态创建script标签：

  import { useEffect, useRef } from 'react';
  export function Map(){
      const containerRef = useRef(null);
      useEffect(() => {
          if (!containerRef.current) return;
          const script = document.createElement('script');
          script.src = '/正确的mapscript.js路径';
          script.defer = true;
          script.charset = 'utf-8';
          containerRef.current.appendChild(script);
      }, []);
      return (
          <div style={{minHeight: "374px"}} ref={containerRef}>
              <noscript>
                  <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
              </noscript>
          </div>
      );
  }
  

• 打包工具配置检查：确认Webpack/Vite等打包工具是否将mapscript.js视为静态资源，而非需要编译的模块。需确保该文件被复制到生产环境的输出目录，且路径与代码中引用的一致。
• noscript失效原因排查：脚本执行失败但浏览器仍可能认为脚本已加载，导致不触发noscript。可临时禁用JS测试noscript是否显示，或检查是否有其他脚本干扰了noscript的行为。

内容的提问来源于stack exchange，提问作者user24890768