実現したいこと
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.js2 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}
試したこと・調べたこと
上記の詳細・結果
googleやterarailで「javascript import」で検索しましたが、解決には至っていません。
googleで「Loading module was blocked because of a disalloed MIME type("text/html")」で検索してみましたが、解決には至っていません。
補足
Webサーバ:Express.js（localhost）
実行PC（サーバー）：VirtualBox（ArchLinux）
よろしくお願いします。
0 コメント