Webpack + Express + EJS：错误：找不到模块“。” [英] Webpack + Express + EJS: Error: Cannot find module "."

问题描述

我正在使用webpack，typescript和ejs来编写一个快速的Web应用程序。当点击其中一条应该为.ejs文件提供的路线时，我会收到以下错误：

 错误：找不到模块 。 
在webpackMissingModule（/Users/max/Development/test/express-webpack/dist/server.js:20669:74）
在新的View（/ Users / max / Development / test / express-webpack /dist/server.js:20669:152）
在EventEmitter.render（/Users/max/Development/test/express-webpack/dist/server.js:18776:12）
在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 
在Layer.handle [as handle_request]（/Users/max/Development/test/express-webpack/dist/server.js:4524:5）
在下一个（/ Users / max /开发/测试/ express-webpack / dist / server.js：4743：13）
在Route.dispatch（/Users/max/Development/test/express-webpack/dist/server.js:4724:3） 
在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 
  

e代码：

package.json：

  {
name：express-webpack，
version：1.0.0，
description：，
main：index.js 
scripts：{
test：echo \错误：no test specified\&&出口1
}，
作者：，
许可证：ISC，
依赖：{
awesome-typescript-加载器：^ 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
} 
} 
  

webpack.config.js

  var CopyWebpackPlugin = require（'copy-webpack-plugin'）; 
 
 module.exports = {
条目：__dirname +/src/index.js，
 target： node，
输出：{
 filename：server.js，
路径：__dirname +/ dist
}，
 
 / / b / b 
 
 $ b $添加'.ts'和'.tsx'作为可解析的扩展名。
 devtool：source-map 
 extensions：[.webpack.js，.web.js，.ts .tsx，.js] 
}，
 
模块：{
规则：[
 //所有带有'.ts'或' .tsx'扩展名将由'awesome-typescript-loader'处理。 
 {test：/\.tsx?$/，loader：awesome-typescript-loader}，
 {test：/\ json$/，loader：'json-loader'} ，
 
 //所有输出的'.js'文件将具有由'source-map-loader'重新处理的任何源代码。 
 {强制执行：pre，测试：/\.js$/，loader：source-map-loader} 
] 
}，
 
插件：[
 new CopyWebpackPlugin（[
 {from：'src / views'，to：'views'} 
]）
]，
 
节点：{
 fs：空
} 
}; 
  

src / index.js

  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'）; //<  - 错误源自这里AFAIK 
}） ; 
 app.listen（8000）; 
  

views / index.ejs

  hello world 
  

复制步骤：

• 运行 webpack 构建项目


• 使用 node dist / server.js


• 访问 http：// localhost：8000 / li>
  
• 期望看到index.ejs的内容，而不是上面堆栈跟踪

任何想法发生什么事？

解决方案

我挖掘到webpack生成的代码，我发现似乎有一个错误，上下文解析评估。有一个简单的表达式表达用于要求选择的视图引擎，但是它无法解决这个问题。

为了克服这个问题，在索引中你可以写

  const ejs = require（ejs）.__ express; 
 const app = express（）; 
 app.set（view engine，ejs）; 
 app.engine（'。ejs'，ejs）; //<  - 这是戏法
  

但是如果您想要一个明确的解决方案，请在webpack repo上打开一个问题。

I'm writing an express web app with webpack, typescript and ejs. When hitting one of the routes that's supposed to serve a .ejs file I get the following error:

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

Here's the code:

package.json:

{
  "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"
  }
}

webpack.config.js

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"
    }
};

src/index.js

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

views/index.ejs

hello world

Reproduction steps:

• Run webpack to build the project
• Start the server with node dist/server.js
• Visit http://localhost:8000
• Expect to see the contents of index.ejs, instead get above stack trace

Any idea what's going wrong?

解决方案

I digged into webpack generated code and I found it seems there is a bug with context parse evaluation of webpack. There is a simple expression that express uses to require selected view engine, but it is failing to resolve that.

To overcome this issue, in your index you can write

const ejs = require("ejs").__express;
const app = express();
app.set("view engine", "ejs");   
app.engine('.ejs', ejs);// <-- this does the trick

But if you want a definitive solution, open an issue on webpack repo.

这篇关于Webpack + Express + EJS：错误：找不到模块“。”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！