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

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

新規登録して質問してみよう
ただいま回答率
85.39%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

412閲覧

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

apo

総合スコア362

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

1クリップ

投稿2024/05/25 08:48

編集2024/05/25 11:47

実現したいこと

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)

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

承知しました。
guest

回答1

0

自己解決

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.39%

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

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

質問する

関連した質問