Webpack + Express + EJS：错误：找不到模块“。”

Posted 2023-03-08

【中文标题】Webpack + Express + EJS：错误：找不到模块“。”

【英文标题】：Webpack + Express + EJS: Error: Cannot find module "."

【发布时间】：2017-06-02 03:18:04

【问题描述】：

我正在使用 webpack、typescript 和 ejs 编写一个 express 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

代码如下：

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

复制步骤：

运行webpack 构建项目 用node dist/server.js启动服务器 访问http://localhost:8000 希望看到 index.ejs 的内容，而不是在堆栈跟踪之上

知道出了什么问题吗？

【参考方案1】：

我深入研究了 webpack 生成的代码，发现 webpack 的 context parse evaluation 似乎有一个错误。有一个 express 用于要求选择的视图引擎的简单表达式，但它无法解决这个问题。

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

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

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

【讨论】：

感谢您的帮助！此处创建的问题：github.com/webpack/webpack/issues/4009

哇...我已经研究这个问题好几个小时了。这成功了。谢谢！！

【参考方案2】：

我相信您的问题与您的捆绑文件 (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

您可能还需要使用节点选项 config 覆盖节点全局配置 要使视图文件夹可以从您的捆绑文件中访问，更多详细信息： https://webpack.js.org/configuration/node/#components/sidebar/sidebar.jsx

该配置也可以帮助您https://gist.github.com/madx/53853c3d7b527744917f

【讨论】：

这确实不以有用的方式回答了这个问题。 为什么你相信这就是答案？ 如何它是如何工作的？在没有任何上下文或含义的情况下简单地告诉某人更改他们的代码并不能帮助他们了解他们做错了什么。

很高兴用我认为问题所在的更多细节和背景来更新我的答案。抱歉，如果不够清楚，我非常感谢您的反馈@GrumpyCrouton

当你更新它时，回到这里告诉我，我会加1你:)

完成了，但是我不知道如何删除我的其他重复答案，出现了刷新问题，并且已经发布了两次。再次感谢@GrumpyCrouton。

【参考方案3】：

加上克莱顿的回答，你现在必须在调用 app.engine(string, callback) 时有一个回调函数

app.set('views', 'src/views');
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').__express); //<-- this

【讨论】：

这才是真正的答案！谢谢大家！

我正在使用 netlify-lambda 和无服务器。将其设置为 app.engine('ejs', require('ejs').__express) 就可以了。谢谢！