node.js でスクレイピングしたデータをブラウザで表示させたい

前提・実現したいこと

node.js でスクレイピングしたデータをブラウザで表示させたいのですが下記のようなエラーが出て
うまく取得できません、、

ターミナルで吐き出すことはできるのですが、、

発生している問題・エラーメッセージ

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

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

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>test</title>
8
9    <script type="module" src="sample.mjs"></script>
10</head>
11<body>
12    
13</body>
14</html>

js
1import fetch from './node_modules/node-fetch';
2import jsdom from './node_modules/jsdom';
3
4const { JSDOM } = jsdom;
5
6(async () => {
7    const res = await fetch('https://www.yahoo.co.jp/');
8    const html = await res.text();
9    const dom = new JSDOM(html);
10    const document = dom.window.document;
11    const nodes = document.querySelectorAll('h1');
12    const tokyoWeathers = Array.from(nodes, td => td.textContent.trim());
13    console.log(tokyoWeathers);
14    
15})();
16
17

補足情報（FW/ツールのバージョンなど）

node v15.14.0
Google Chrome バージョン: 90.0.4430.212（Official Build）（x86_64）

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

サーバーがApacheならhttpd.confか.htaccessで

<FilesMatch ".mjs$">
    AddType text/javascript .mjs
</FilesMatch>

のように設定されている必要があるのではないでしょうか。

それが無理ならsample.mjsじゃなくsample.jsにしてしまえばいけそうな気もします。

投稿2021/05/31 09:29

編集2021/05/31 09:32

itagagaki

総合スコア8402

kwtkwt

2021/05/31 09:43 編集

回答ありがとうございます。 >それが無理ならsample.mjsじゃなくsample.jsにしてしまえばいけそうな気もします。こちら試してみたのですが、同じエラーがでてダメでした。。 >サーバーがApacheならローカルサーバについてはvs code の拡張機能のLive Serverをしようしているため、設定がよくわかりません。