Webpack + Express + EJS: Erreur: impossible de trouver le module "."

J'écris une application Web express avec le webpack, le dactylographe et les ex. Lorsque vous frappez l'une des routes censées desservir un fichier .ejs, j'ai l'erreur suivante:

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 

Voici le 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 

Etapes de la reproduction:

  • Exécutez le webpack pour construire le projet
  • Démarrez le serveur avec node dist/server.js
  • Visitez http://localhost:8000
  • Attendez-vous à voir le contenu de index.ejs, au lieu d'obtenir au-dessus de la trace de pile

Une idée de ce qui ne va pas?

J'ai creusé dans le code généré par le webpack et j'ai trouvé qu'il semblait qu'il y avait un bug avec l' analyse de l'analyse comparative du contenu sur le webpack. Il existe une expression simple qui exprime les utilisations pour exiger le moteur de vue sélectionné, mais il ne résout pas.

Pour surmonter ce problème, dans votre index, vous pouvez écrire

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

Mais si vous voulez une solution définitive, ouvrez un problème sur le compte de rechange.

Je crois que votre problème est lié au fait que votre fichier groupé (dist / server.js) n'a pas accès à vos dépendances, express, moteur de modèle, etc. Pour le trier, vous pouvez configurer le logiciel pour éviter de regrouper Dépendances (du fait que votre application fonctionne à partir du côté serveur / noeud):

 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 } 

Vous devrez peut-être également remplacer la configuration globale du noeud, en utilisant l'option d'option du noeud pour rendre accessible le dossier des vues à partir de votre fichier groupé, plus de détails: https://webpack.js.org/configuration/node/#components/sidebar/sidebar. Jsx

Cette configuration pourrait également vous aider https://gist.github.com/madx/53853c3d7b527744917f