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

i86rm4rw 于 12个月前发布在 Node.js

关注(0)|答案(3)|浏览(122)

我正在用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.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的内容，而不是获取堆栈跟踪

知道出什么事了吗

node.js

来源：https://stackoverflow.com/questions/41707662/webpack-express-ejs-error-cannot-find-module

3条答案

按热度按时间

x9ybnkn61#

我深入研究了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上打开一个问题。

赞(0）回复(0）举报 12个月前

gz5pxeao2#

加上Cleiton的答案，现在在调用app.engine（string，callback）时必须有一个回调函数

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

字符串

赞(0）回复(0）举报 12个月前

eimct9ow3#

我相信你的问题与你的捆绑文件（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使views文件夹可从捆绑文件访问，更多详细信息：https://webpack.js.org/configuration/node/#components/sidebar/sidebar.jsx
该配置还可以帮助您https://gist.github.com/madx/53853c3d7b527744917f

赞(0）回复(0）举报 12个月前

我来回答

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

package.json：

webpack.js

src/index.js

views/index.ejs

复制步骤：

3条答案

相关问题

热门标签

最新问答