実現したいこと
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)
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー