堆栈内存溢出
  简体   繁体   English

尝试导入项目时出现错误“对每个 HTML 规范的模块脚本强制执行严格的 MIME 类型检查”

[英]Getting error "Strict MIME type checking is enforced for module scripts per HTML spec" when trying to import project

 原文  2019-08-08 16:22:16  5   2    javascript/ html/ electron/ mime-types/ lit-html

问题描述

Trying to create some reusable components for our Electron screen using lit-html .尝试使用lit-html为我们的 Electron 屏幕创建一些可重用的组件。 When I attempt to add an example component I run into an error.当我尝试添加示例组件时遇到错误。

Using electron: ^5.0.6使用electron: ^5.0.6

Trying to import module my-element.js (most of this code is example code and I'm just trying to get it working)尝试导入模块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>

The module my-element.js contains the following:模块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);

When the page loads I get an error页面加载时出现错误

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.

I have tried different ways of importing lit-html but nothing has solved the error.我尝试了不同的导入lit-html方法，但没有解决错误。

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

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

2 个解决方案

解决方案1
 4  2019-08-17 13:35:22

Electron and ES modules电子和 ES 模块

Recent versions of Electron support ES modules out of the box so we instinctively think that this works without problems:最新版本的 Electron 开箱即用地支持 ES 模块，因此我们本能地认为这没有问题：

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

The thing is: if you load the main HTML file from the local file system , all other resources are also requested with the file:// protocol;事情是：如果你从本地文件系统加载主 HTML 文件，所有其他资源也会通过file://协议请求； however the HTML spec prohibits loading ES modules with such protocol for security reasons (more info here ).然而，出于安全原因，HTML 规范禁止使用此类协议加载 ES 模块（更多信息请点击此处）。

Solutions解决方案

Serve the source files提供源文件

Use a static file server and load index.html from http://localhost:<server_port> instead of the file system (ie es-dev-server works well with LitElement).使用静态文件服务器并从http://localhost:<server_port>加载index.html而不是文件系统（即es-dev-server与 LitElement 配合良好）。

Use a module bundler使用模块打包器

Such as Rollup or Webpack, so you only have to load the bundle as a normal script.例如 Rollup 或 Webpack，所以你只需要将 bundle 作为普通脚本加载。 This way you can take advantage of tree shaking to remove unused code as well as other compilation/bundling benefits.通过这种方式，您可以利用摇树来删除未使用的代码以及其他编译/捆绑的好处。

Use TypeScript/Babel使用 TypeScript/Babel

Both can transform es module statements to commonjs ( require ).两者都可以将 es 模块语句转换为 commonjs ( require )。

Use commonjs使用 commonjs

Electron's Node integration allows you to require() CJS modules. Electron 的 Node 集成允许你require() CJS 模块。

Register a custom protocol注册自定义协议

See here .见这里。

A note on bundlers关于捆绑器的说明

Using a bundler may seem inconvenient because it concentrates the load on a single js file;使用 bundler 可能看起来不方便，因为它将负载集中在单个 js 文件上； however in Electron environments where source files are almost always inside the local package - and therefore network latency is not an issue - it may even result in an increased performance.然而，在电子环境中，源文件几乎总是在本地包内——因此网络延迟不是问题——它甚至可能会提高性能。 Also, both Rollup and Webpack support code splitting and dynamic imports so you can still perfectly follow optimization patterns such as the App Shell Model .此外，Rollup 和 Webpack 都支持代码拆分和动态导入，因此您仍然可以完美地遵循App Shell 模型等优化模式。

解决方案2
 0  2021-10-16 20:34:46

you have to export what you want to import first, then you can do stuff.你必须先导出你想导入的东西，然后你才能做一些事情。 it should work fine on firefox too.它也应该在 Firefox 上正常工作。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查 - Strict MIME type checking is enforced for module scripts per HTML spec Express 错误：根据 HTML 规范对模块脚本执行严格的 MIME 类型检查 - Express error: Strict MIME type checking is enforced for module scripts per HTML spec 服务器以“application/octet-stream”的非 JavaScript MIME 类型响应 每个 HTML 对模块脚本强制执行严格的 MIME 类型检查 - The server responded with a non-JavaScript MIME type of "application/octet-stream" Strict MIME type checking is enforced for module scripts per HTML 加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。 强制执行严格的 MIME 类型检查 - Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced Python Flask - 错误：“加载模块脚本失败。强制执行严格的 MIME 类型检查”。 适用于生产环境，而不是本地服务器 - Python Flask - Error: "Failed to load module script. Strict MIME type checking is enforced". Works on production, not on the local server 加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 对模块强制执行严格的 MIME 类型检查 - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module javascript：MIME类型（&#39;text / html&#39;）无法执行，并且启用了严格的MIME类型检查 - javascript: MIME type ('text/html') is not executable, and strict MIME type checking is enabled 拒绝执行脚本，因为 MIME 类型（'text/html'）不可执行，并且启用了严格的 MIME 类型检查 - Refused to execute script because MIME type ('text/html') is not executable, and strict MIME type checking is enabled Dropbox：MIME 类型 (&#39;text/html&#39;) 不可执行，并且启用了严格的 MIME 类型 &gt; 检查 - Dropbox: MIME type ('text/html') is not executable, and strict MIME type > checking is enabled 错误：MIME类型（&#39;application / json&#39;）无法执行，并且使用YQL语句启用了严格的MIME类型检查？ - Error: MIME type ('application/json') is not executable, and strict MIME type checking is enabled with YQL statements?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM