JavaScriptでimport文を試したいが、実行できない

実現したいこと

JavaScriptでimport文を実行させたい。

発生している問題・分からないこと

JavaScriptでimportを試そうと、MDN importを参考に実行しようとしていますがうまくいきません。
importがうまくできていないようです。

WebサーバはExpress.jsです。

プロジェクトは下記のコマンドで生成しています。

express --view=ejs ex-gen-app
cd ex-gen-app
npm install

実行すると
Firefoxブラウザで表示した場合は、consoleに

Loading module from "http://localhost:3000/modules/getPrimes.js" was blocked because of a disalloed MIME type("text/html").

と表示され、

chromiumブラウザで表示した場合は、consoleに

GET http://localhost:3000/modules/getPrimes.js 
net::ERR_ABORTED 404 (Not Found)

と表示されます。

該当のソースコード

ex-gen-app/package.json

{
  "name": "ex-gen-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

ex-gen-app/app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

ex-gen-app/routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

ejs
1<!-- ex-gen-app/views/index.ejs -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <title><%= title %></title>
6    <link rel='stylesheet' href='/stylesheets/style.css' />
7
8  </head>
9  <body>
10    <h1><%= title %></h1>
11    <p>Welcome to <%= title %></p>
12
13    <script type="module">
14
15        import { getPrimes } from "./modules/getPrimes.js";
16
17        console.log(getPrimes(10)); // [2, 3, 5, 7]
18
19    </script>
20  </body>
21</html>

JavaScript
1// ./views/modules/getPrimes.js
2/**
3 * `max` より小さな素数のリストを返す。
4 */
5export function getPrimes(max) {
6  const isPrime = Array.from({ length: max }, () => true);
7  isPrime[0] = isPrime[1] = false;
8  isPrime[2] = true;
9  for (let i = 2; i * i < max; i++) {
10    if (isPrime[i]) {
11      for (let j = i ** 2; j < max; j += i) {
12        isPrime[j] = false;
13      }
14    }
15  }
16  return [...isPrime.entries()]
17    .filter(([, isPrime]) => isPrime)
18    .map(([number]) => number);
19}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

googleやterarailで「javascript import」で検索しましたが、解決には至っていません。
googleで「Loading module was blocked because of a disalloed MIME type("text/html")」で検索してみましたが、解決には至っていません。

補足

Webサーバ:Express.js（localhost）
実行PC（サーバー）：VirtualBox（ArchLinux）

よろしくお願いします。

R.Mizukami

2024/05/25 09:43

サーバーが getPrimes.js を返す際のヘッダーに Content-Type: text/html を指定してしまっているのが原因です。サーバーの設定ファイルまたは Express の起動スクリプトなどを提示してください。

apo

2024/05/25 11:48

ソースコード欄にExpressのプロジェクト生成コマンド、package.json, app.js, index.jsを追加しました。

think49

2024/05/25 13:04 編集

@apo さん > GET http://localhost:3000/modules/getPrimes.js > net::ERR_ABORTED 404 (Not Found) "404" はファイルが存在しないという意味です。 http://localhost:3000/modules/getPrimes.js をブラウザで開いて、期待通りに表示されますか。表示されないとして、スーパーリロード(Ctrl+Shift+R キー押下)したら表示されますか。 https://support.google.com/chrome/answer/157179?hl=ja&co=GENIE.Platform%3DDesktop#zippy=%2C%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88

apo

2024/05/25 17:41

何も表示されません。 ERR_CONNECTION_REFUSED と表示されます。

apo

2024/05/25 18:03 編集

ちなみに、ex-gen-app/views/index.ejsファイルのimport文をフルパスに修正し、 ``` import { getPrimes } from "/home/apo/Documents/project/make/javascript/20240525/ex-gen-app/views/modules/getPrimes.js"; ``` 実行してみましたが、上記で記載したとおり、 Firefoxブラウザで表示した場合は、consoleに ``` Loading module from "http://localhost:3000/home/apo/Documents/project/make/javascript/20240525/ex-gen-app/views/modules/getPrimes.js" was blocked because of a disalloed MIME type("text/html"). ``` と表示され、 chromiumブラウザで表示した場合は、consoleに ``` GET http://localhost:3000/home/apo/Documents/project/make/javascript/20240525/ex-gen-app/views/modules/getPrimes.js net::ERR_ABORTED 404 (Not Found) ``` と表示されます。

apo

2024/05/25 18:25 編集

@think49さんできました！ modulesフォルダをpubicフォルダ下に移動し、import文を ``` import { getPrimes } from "/modules/getPrimes.js"; ``` にしたらできました。ファイルはpubicフォルダ下に作らないといけないのですね！ありがとうございます。ベストアンサーに選びたいので回答に記載いただけますか？

think49

2024/05/26 09:53

@apo さん解決して何よりです。 Developper Toolsの [Network] タブで「Status Code: 404」の通信は同様の対処ができますので、今後に活用してみてください。格納場所に気が付けたのは@apo さんご自身だと思うので、自己解決で大丈夫です。 https://teratail.com/help#resolve-myself

apo

2024/05/26 14:00

承知しました。

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

回答1件

自己解決

modulesフォルダをpublicフォルダ下に移動し、import文を

import { getPrimes } from "/modules/getPrimes.js";

にしたら動作した。

importするファイルはExpress.jsの場合はpublicフォルダ下に作らないといけないようだ。

投稿2024/05/26 14:03

編集2024/05/30 10:30

apo

総合スコア362

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！