javascript - 尝试导入项目时出现错误 "Strict MIME type checking is enforced for module scripts per HTML spec"-6ren

javascript - 尝试导入项目时出现错误 "Strict MIME type checking is enforced for module scripts per HTML spec"

转载作者：行者123 更新时间：2023-12-03 12:21:15

27

4

尝试使用 lit-html 为我们的 Electron 屏幕创建一些可重复使用的组件.当我尝试添加示例组件时，我遇到了错误。

使用 electron: ^5.0.6
尝试导入模块 my-element.js (大部分代码是示例代码，我只是想让它工作)

<head>
    <!-- Polyfills only needed for Firefox and Edge. -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
     Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module" src="my-element.js"></script>

模块 my-element.js包含以下内容:

import {LitElement, html, css} from 'lit-html';

class MyElement extends LitElement {

  static get properties() {
    return {
      mood: {type: String}
    }
  }

  static get styles() {
    return css`.mood { color: green; }`;
  }

  render() {
    return html`Web Components are <span class="mood">${this.mood}</span>!`;
  }
}

customElements.define('my-element', MyElement);

页面加载时出现错误

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

我尝试了不同的导入方式 lit-html但没有解决这个错误。

前任。 import {LitElement, html, css} from '../../node_modules/lit-html/lit-html';
前任。 import {LitElement, html, css} from '../../node_modules/lit-html/lit-html.js';

最佳答案

Electron 和 ES 模块
最新版本的 Electron 支持开箱即用的 ES 模块，因此我们本能地认为这可以正常工作:

<script type="module" src="my-element.js"></script>

问题是:如果您加载主 HTML 文件 from the local file system ，所有其他资源也需要使用 file://协议(protocol);然而，出于安全原因，HTML 规范禁止使用此类协议(protocol)加载 ES 模块(更多信息 here)。
解决方案
提供源文件
使用静态文件服务器并加载 index.html来自 http://localhost:<server_port>而不是文件系统(即 es-dev-server 适用于 LitElement)。
使用模块捆绑器
例如 Rollup 或 Webpack，因此您只需将 bundle 加载为普通脚本即可。通过这种方式，您可以利用 tree shaking 来删除未使用的代码以及其他编译/捆绑优势。
使用 TypeScript/Babel
两者都可以将 es 模块语句转换为 commonjs ( require )。
使用commonjs
Electron 的节点集成允许您 require() CJS 模块。
注册自定义协议(protocol)
见 here .

关于打包机的说明
使用捆绑器可能看起来不方便，因为它将负载集中在单个 js 文件上；然而，在源文件几乎总是在本地包中的 Electron 环境中——因此网络延迟不是问题——它甚至可能导致性能提高。此外，Rollup 和 Webpack 都支持代码拆分和动态导入，因此您仍然可以完美地遵循优化模式，例如 App Shell Model .

关于javascript - 尝试导入项目时出现错误 "Strict MIME type checking is enforced for module scripts per HTML spec"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57416942/

27

4

0

文章推荐： javascript - KineticJS:动力学警告:无法获取数据 URL

文章推荐： javascript - 每次单击按钮时播放声音

文章推荐： javascript - 如何注销 ipcRenderer.on 事件监听器？

mime - 未知文件类型 MIME？
如果上传的文件没有扩展名，是否必须指定 MIME 类型？换句话说，是否有默认的通用 MIME 类型？最佳答案对于未知类型，您可以使用application/octet-stream。 RFC 20
mime - MIME 类型的 URN
MIME 类型的官方 URN 是否存在？ Mozilla Firefox 和其他应用程序使用诸如“urn:mimetype:text/plain”或“urn:mimetype:handler:text
html - 拒绝应用样式，因为其 MIME 类型 "text/html"不支持样式表 MIME 类型，并且启用了严格的 MIME 检查
我们有一个由 xyz 网站管理员部署在生产环境中的网站。以下是在两个不同实例中发生错误时 Web 控制台的两个屏幕截图。我们时断时续地而不是始终如一地面对这个问题。此外，这种情况发生在少数用户而不是
javascript - 拒绝应用来自...的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查
此错误仅在 chrome 中显示。我正在搜索这个问题，但还没有找到令人满意的解决方案。我附上了该错误的屏幕截图。请为此提出一些想法。 Error image 最佳答案样式表的 MIME 类型应该是
php - 拒绝应用来自 ... 的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查
当我使用 MAMP 托管我的 Drupal 站点时，出现了上述错误。我所有的 HTML 加载，但我的 CSS 没有加载。拒绝应用来自“http://mysite/sites/default/file
php - 拒绝应用来自 [Link] 的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查
错误信息: jquery.dataTables.min.js:23 未捕获类型错误:无法读取未定义的属性“长度” 在 Ha (jquery.dataTables.min.js:23) 在 HTMLTa
mime-types - 原始图像应使用哪种 MIME 类型？
Raw images由相机、扫描仪等生成，通常比 JPEG 图像具有更大的后处理灵活性。如果我从我的 Web 服务器提供这种文件，我应该使用哪种媒体类型(又名 MIME 类型)？我对最近的佳能相机
mime - 在线某处是否有全面的 MIME header 格式引用？
我已经查看了大约 100 个站点，但没有找到任何内容。有些只是 mime 类型值的列表，有些只是对 RFC 的引用，或者或多或少是直接引用它们。 RFC 是难以理解的，每一个都只揭示了大象的一小部分。
mime-types - 通配符 MIME 子类型
我想用 image/*数据 URI 中的 MIME 类型，例如data:image/*;base64,R0lGODlhE...在元素。它是否完全符合标准的 MIME 类型？它会在某些浏览器中引起
mime-types - 什么 MIME 类型用作通用目的？
我有一个 PHP 脚本，用于下载不同类型的文件(PDF、JPEG、RAR 等)。效果很好，但是我注意到 MIME 类型存在问题。是否有我可以安全地用于“通用目的”的通用 MIME 类型？我正在考虑所
mime-types - 我的程序特定的二进制文件应使用哪种 MIME 类型？
我的程序使用自己的二进制文件类型，因此我假设我不能使用 MIME 类型文本/纯文本，因为它不是 7 位 ASCII 文件。我应该将其命名为“application/myappname”吗？最佳答案
mime - 在字段正文的开头折叠 MIME header 是否有效？
我正在调试一个 MIME 解析器，它无法解析来自一个电子邮件服务的 header 。电子邮件服务包含一个 header ，该 header 由完全位于下一行的字段主体组成，如下所示: Message-
vue.js - 拒绝应用来自 '' 的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查
我有一个 Vue.js 项目，当我检查控制台时发现以下问题: Refused to apply style from 'http://localhost:8080/dist/cropper.min.c
javascript - 拒绝应用来自 '' 的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查
friend 们，我花了一整天的时间寻找这个问题的解决方案，但我一直无法修复它。当我为生产构建它时，在开发模式下(没有缩小和其他东西)它在本地主机上运行良好，但是当我在 dist 文件夹中获取我的文件
mime-types - Swagger 如何添加对所有 mime 类型的支持
Swagger 默认支持 application/json 作为 Content 类型。如果我想添加其他内容类型，则需要在 swagger JSON 文件中更新“生产”或“消费”字段。客户可以发送任何
mime-types - .tex 文件的正确 mime 类型是什么？
我的网络服务生成并返回一个 .tex 文件。我想在 http-header 中提供正确的 mimetype。除了here我没找到这么多，我在其中找到 application/x-tex。这是要坚持的
mime-types - FreeMarker 模板是否有 MIME 类型？
我需要区分不同类型的 HTML 模板，例如来自 Handlebars 模板的 FreeMarker。由于模板在数据库中(所以它们不是文件，即没有文件名或扩展名)我想使用 MIME 类型来识别它们。对
mime-types - Apple iWork Mime 类型
我想知道 iWork 页面的 mime 类型是什么？以及 iWork 套件中其余软件的 mime 类型是什么？我在网上环顾四周，没有看到任何地方。最佳答案我最近需要这个来工作，结果只是上传了一些文
mime-types - .log 文件的 MIME 类型是什么？
我正在构建一个 mime 类型的猜测器，我正在使用 mimetype命令来检查我的结果。对于日志文件，它返回 text/x-log .我在这些列表中没有看到这种 mime 类型: http://svn
mime-types - Markdown 的 MIME 类型是什么？
有谁知道 Markdown 是否存在 MIME 类型？我猜是 text/plain，但是有更具体的吗？最佳答案 tl;dr:text/markdown 自 2016 年 3 月起 2016 年 3

首页

博学

6Ren·AI

商城

javascript - 尝试导入项目时出现错误 "Strict MIME type checking is enforced for module scripts per HTML spec"