Express generouterで作ったejsが表示されません

Question

NODE.js超入門という本を参考に作りました
Express generouterを作成し、新たに'/contents'の際に表示させたいcontents.ejs index.jsを作りましたが、
http://localhost:3000/は表示されますが、http://localhost:3000/contentsがエラーになり表示されません

エラーになるhttp://localhost:3000/contents

contents.js

contents.ejs

app.jsのコード

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var dexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var contents=require('./routes/contents');
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);
app.use('/contens',contents);

// catch 404 and forward to error handler
app.use(function(req, res, next) {logger = require('morgan');

var in
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;

★app.jsにvar ejs=require('ejs');を追記しても、反映されませんでした。
回答お願いします

その後

何故かいきなり、app.jsの
// catch 404 and forward to error handler
app.use(function(req, res, next) {logger = require('morgan');

var in
next(createError(404));
});
↑の、「in」がエラーだというような文字がターミナルに出てnpm startができません
どうすればいいですか？

Answer 1

contentsの404について

localhost:3000/contentsはviewsディレクトリの第一階層にありますから、contents.jsを作るのではなく、index.jsに書くほうが効率的ですし、見やすいです。
つまり、

index.js

//・・・省略

router.get('/contents', function(req, res, next) {
  var data = {
    title: 'hello!',
    content: 'This is sample contents.'
  };
  res.render('contents', data);
});

//・・・省略

にしたほうが良いかと。（contents.jsはこの場合削除してください）

loggerのエラーについて

また、loggerについては、

app.js

let logger = require('morgan');

を定義部分に追加することで対応できます。

「壊れている」と言われている404のところについて

下記のようにすることで解決できます。

app.js

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

おそらくこれで現状発生している問題はすべて解決できるはずです。
あと、いちぶコードに誤字・脱字が見られるので、そのあたりはスペルチェッカーなどを使って修正するといいと思います。

Answer 2

＞ReferenceError: logger is not defined
app.jsからloggerの定義もなくなってますよ。

Comments

[heat]

// catch 404 and forward to error handler
app.use(function(req, res, next) { {logger = require('morgan');
next(createError(404));
}});
に訂正し、npm startをエンターすると。
ex-app@0.0.0 start C:\Users\user\Desktop\ex-app
> node ./bin/www

C:\Users\user\Desktop\ex-app\app.js:15
app.use(logger('dev'));
^

ReferenceError: logger is not defined
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\app.js:15:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\bin\www:7:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
npm ERR! errno 1
npm ERR! ex-app@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ex-app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-10-27T14_28_52_189Z-debug.log
PS C:\Users\user\Desktop\ex-app>
というエラーになりました
何が間違っているか教えてください

[technocore]

＞ReferenceError: logger is not defined
app.jsからloggerの定義もなくなってますよ。

[heat]

確認しましたが、app.use(logger('dev'));のコードはありました
他にもloggarが含まれた定義が必要ということでしょうか？

[technocore]

loggerを定義しないとlogger('dev')は使えません。
もしかしてJavascript知らないのですか？

[technocore]

expressコマンドで、新しいプロジェクトを作ってみてください。
app.jsが自動的にできていますから見比べてください。
どこを書き換えてしまったか確認できます。

[heat]

var logger=require('logger');を作ればいいのでしょうか？
Javascriptはプロゲートでやりましたが、突っ込まれると全然分からないレベルです
すみません

[heat]

新しいプロジェクトを作ってみます

[technocore]

var cookieParser = require('cookie-parser');
var dexRouter = require('./routes/index');

少なくとも、このあたりがおかしくなっています。
よく見比べてください。

Answer 3

ソースコード、壊れてますよ。
↓

// catch 404 and forward to error handler
app.use(function(req, res, next) {logger = require('morgan');

var in
next(createError(404));
});

正しく修正してください。
↓

// 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;

Comments

[heat]

私は、function(req, res, next) {logger = require('morgan');

var in
next(createError(404));
}
自体の意味が分からないため、ただいじくるとエラーになるだろうということはわかっていたので、全く触っていないのですが
勝手にvar inとかコードが足されることってあるんでしょうか？

[technocore]

＞勝手にvar inとかコードが足されることってあるんでしょうか？

express-generetorで自動的に作成したapp.jsのソースコードがおかしくなっています。
操作ミスでうっかり変更してしまったのではないですか？

[heat]

そうなんですかね？不思議なことに初めは、「var in」が入っていても、エラーにならずにトップページは表示されていたんですよね
ちなみに、
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;
に編集し、npm startをエンターしたら、
ex-app@0.0.0 start C:\Users\user\Desktop\ex-app
> node ./bin/www

C:\Users\user\Desktop\ex-app\app.js:15
app.use(logger('dev'));
^

ReferenceError: logger is not defined
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\app.js:15:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\bin\www:7:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ex-app@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ex-app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-10-27T13_48_21_121Z-debug.log
PS C:\Users\user\Desktop\ex-app>

↑このようにエラーになりました
助けてください

Answer 4

function(req, res, next) {logger = require('morgan');

var in
next(createError(404));
}

ここの部分ですが、var文の構文に誤りがありエラーが出ています。
仮に、inという変数を宣言したい（初期化はしない）のなら

var in;

ですけど、変数inは使われていないですよね。

この部分の意図は何ですか？要らないものなのでは？

Comments

[heat]

私は、function(req, res, next) {logger = require('morgan');

var in
next(createError(404));
}
自体の意味が分からないため、ただいじくるとエラーになるだろうということはわかっていたので、全く触っていないのですが
勝手にvar inとかコードが足されることってあるんでしょうか？

[heat]

すみません
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;
に編集し、npm startをエンターしたら、
ex-app@0.0.0 start C:\Users\user\Desktop\ex-app
> node ./bin/www

C:\Users\user\Desktop\ex-app\app.js:15
app.use(logger('dev'));
^

ReferenceError: logger is not defined
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\app.js:15:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\bin\www:7:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ex-app@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ex-app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-10-27T13_48_21_121Z-debug.log
PS C:\Users\user\Desktop\ex-app>

↑このようにエラーになりました
助けてください

Answer 5

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

↑、/contensではなく/contentsですね。

Comments

[heat]

直しました！ありがとうございます！！

[heat]

すみません
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;
に編集し、npm startをエンターしたら、
ex-app@0.0.0 start C:\Users\user\Desktop\ex-app
> node ./bin/www

C:\Users\user\Desktop\ex-app\app.js:15
app.use(logger('dev'));
^

ReferenceError: logger is not defined
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\app.js:15:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\bin\www:7:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ex-app@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ex-app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-10-27T13_48_21_121Z-debug.log
PS C:\Users\user\Desktop\ex-app>

↑このようにエラーになりました
助けてください

Answer 6

質問が重複していますよね？

JavaScript - Node.jsで、ejsが表示されません｜teratail

上記でも回答しましたが、localhost:3000/index ではなく localhost/index:3000 ではないかと。

誤った回答です。無視してください。

Comments

[heat]

回答ありがとうございます
なぜか、トップページのリンクから飛んでもエラーになりました

[heat]

Expess generouter で作った方と、progateで作った方で、コードの書き方が違うので重複にならないのかなと思いました
すみません

[itagagaki]

誤った回答をしてしまいました。無視してください。

[heat]

すみません
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;
に編集し、npm startをエンターしたら、
ex-app@0.0.0 start C:\Users\user\Desktop\ex-app
> node ./bin/www

C:\Users\user\Desktop\ex-app\app.js:15
app.use(logger('dev'));
^

ReferenceError: logger is not defined
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\app.js:15:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (C:\Users\user\Desktop\ex-app\bin\www:7:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ex-app@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ex-app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-10-27T13_48_21_121Z-debug.log
PS C:\Users\user\Desktop\ex-app>

↑このようにエラーになりました
助けてください