[英]Webpack + Express + EJS: Error: Cannot find module “.”
我正在用 webpack、typescript 和 ejs 编写一个快速的 web 应用程序。 当点击应该提供 .ejs 文件的路由之一时,我收到以下错误:
Error: Cannot find module "."
at webpackMissingModule (/Users/max/Development/test/express-webpack/dist/server.js:20669:74)
at new View (/Users/max/Development/test/express-webpack/dist/server.js:20669:152)
at EventEmitter.render (/Users/max/Development/test/express-webpack/dist/server.js:18776:12)
at ServerResponse.render (/Users/max/Development/test/express-webpack/dist/server.js:20479:7)
at /Users/max/Development/test/express-webpack/dist/server.js:25508:7
at Layer.handle [as handle_request] (/Users/max/Development/test/express-webpack/dist/server.js:4524:5)
at next (/Users/max/Development/test/express-webpack/dist/server.js:4743:13)
at Route.dispatch (/Users/max/Development/test/express-webpack/dist/server.js:4724:3)
at Layer.handle [as handle_request] (/Users/max/Development/test/express-webpack/dist/server.js:4524:5)
at /Users/max/Development/test/express-webpack/dist/server.js:4054:22
这是代码:
{
"name": "express-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"awesome-typescript-loader": "^3.0.0-beta.18",
"copy-webpack-plugin": "^4.0.1",
"debug": "^2.6.0",
"ejs": "^2.5.5",
"express": "^4.14.0",
"json-loader": "^0.5.4",
"source-map-loader": "^0.1.6",
"webpack": "^2.2.0-rc.3"
}
}
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: __dirname + "/src/index.js",
target: "node",
output: {
filename: "server.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ test: /\.json$/, loader: 'json-loader' },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/views', to: 'views' }
])
],
node: {
fs: "empty"
}
};
var express = require('express');
var app = express();
app.set("view engine", "ejs");
app.set("views", "./views");
app.get('/', function(req, res, next){
res.render('index'); // <-- error originates here AFAIK
});
app.listen(8000);
hello world
webpack
来构建项目node dist/server.js
启动服务器http://localhost:8000
知道出了什么问题吗?
我深入研究了 webpack 生成的代码,我发现 webpack 的 上下文解析评估似乎存在一个错误。 有一个简单的表达式,express 用于要求选择的视图引擎,但未能解决该问题。
为了克服这个问题,在你的索引中你可以写
const ejs = require("ejs").__express;
const app = express();
app.set("view engine", "ejs");
app.engine('ejs', ejs);// <-- this does the trick
但是如果你想要一个明确的解决方案,在 webpack repo 上打开一个问题。
添加克莱顿的回答,您现在必须在调用 app.engine(string, callback) 时有一个回调函数
app.set('views', 'src/views');
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').__express); //<-- this
我相信您的问题与您的捆绑文件 (dist/server.js) 无法访问您的依赖项、express、模板引擎等有关。为了解决这个问题,您可以配置 webpack 以避免捆绑依赖项(因为您的应用程序是从服务器/节点端运行的):
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: __dirname + "/src/index.js",
target: "node",
output: {
filename: "server.js",
path: __dirname + "/dist"a
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ test: /\.json$/, loader: 'json-loader' },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/views', to: 'views' }
])
],
node: {
fs: "empty"
}
};
// Node module dependencies should not be bundled
config.externals = fs.readdirSync("node_modules")
.reduce(function(acc, mod) {
if (mod === ".bin") {
return acc
}
acc[mod] = "commonjs " + mod
return acc
}
您可能还需要覆盖节点全局配置,使用节点选项配置使视图文件夹可从您的捆绑文件访问,更多详细信息: https : //webpack.js.org/configuration/node/#components/sidebar/sidebar。 jsx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.