Webpack + Express + EJS: Error: Cannot find module "."

Question

I am writing an express application with webpack, typescript and ejs. When hitting one of the routes that should serve the .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 is 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 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" } }; 

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

Playback Stages:

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

Any idea what goes wrong?

Answer 1

I dug the generated webpack into the code, and I found that there was an error analyzing the analysis of the web package context . There is a simple expression that expresses a usage that requires the selected viewer, but it cannot resolve this.

To overcome this problem, 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 final solution, open the problem in webpack repo.

Answer 2

I believe your problem that this is because your linked file (dist / server.js) does not have access to your dependencies, expression, template engine, etc. So that you can configure the web package to avoid dependency binding (due to the fact that your application runs on the server side / node):

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

You may also need to override the global configuration of the node using the node option to make the available browse folder accessible from your linked file, for more details: https://webpack.js.org/configuration/node/#components/sidebar/sidebar.jsx

This configuration can also help you https://gist.github.com/madx/53853c3d7b527744917f

Answer 3

By adding Cleiton's answer, you should now have a callback function when calling app.engine (string, callback)

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