How to fix "ERROR in Entry module not found: Error: Can't resolve" error in Webpack?

R

RaDir2017-04-11 20:14:34

Node.js

RaDir, 2017-04-11 20:14:34

Hello.
webpack.config.js:

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Plugins options array - BEGIN
var pluginsOptions = [];
// Plugins options array - END

// HtmlWebpackPlugin options - BEGIN
var titles = {
    home: "iDea | Home",
    shop: "iDea | Shop",
    cart: "iDea | Cart"
};

for (var title in titles) {
    pluginsOptions.push(
        new HtmlWebpackPlugin({
            title: titles[title],
            template: `ejs-render!/${title}/${title}.ejs`,
            chunks: [title],
            filename: `${title}.html`
        })
    );
};
// HtmlWebpackPlugin options - END

module.exports = {
    //context: __dirname + '/bundles',
    context: path.join(__dirname, '/bundles'),
    entry: {
        home: './home/home.js',
        shop: './shop/shop.js',
        cart: './cart/cart.js'
    },
    output: {
        path: path.resolve(__dirname, "www"),
        filename: '[name].js'
    },

    watch: false,

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }]
            },
            {
                test: /\.ejs$/,
                use: ['ejs-loader']
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, "www"),
        compress: false,
        port: 8080,
        open: true
    },

    plugins: pluginsOptions
};

root:
-bundles
--home
---home.ejs
---logo.ejs
--shop
---shop.ejs
--cart
---cart.ejs
-www (output)
home.ejs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TestTitle</title>
</head>
<body>
    <%- include logo.ejs %>
    <hr>
    <p>Custom content goes here.</p>
</body>
</html>

logo.ejs: Errors:
<div class="logo">Logo goes here.</div>

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/home/home.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles':
  Error: Can't resolve '/home/home.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'

 ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/shop/shop.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles':
  Error: Can't resolve '/shop/shop.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'
  
ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/cart/cart.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles':
  Error: Can't resolve '/cart/cart.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'


Child html-webpack-plugin for "home.html":

    ERROR in Entry module not found: Error: Can't resolve '/home/home.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'
Child html-webpack-plugin for "shop.html":

    ERROR in Entry module not found: Error: Can't resolve '/shop/shop.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'
Child html-webpack-plugin for "cart.html":

    ERROR in Entry module not found: Error: Can't resolve '/cart/cart.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "devw"
npm ERR! node v7.7.4
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] devw: `npm run clean && webpack -d`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] devw script 'npm run clean && webpack -d'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the idea.test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run clean && webpack -d
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs idea.test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls idea.test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\OpenServer\domains\test\idea.test\npm-debug.log

What is causing this error and how to fix it: "ERROR in Entry module not found: Error: Can't resolve '/home/home.ejs' in 'D:\OpenServer\domains\test\idea.test\bundles'" ?
Folks, please help!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

RaDir, 2017-04-11
@RaDir

Install the ejs-render-loader loader.
In my webpack.config.js I fixed:

...
for (var title in titles) {
    pluginsOptions.push(
        new HtmlWebpackPlugin({
            title: titles[title],
            template: `./${title}/${title}.ejs`, // здесь убираем "ejs-render!"
            chunks: [title],
            filename: `${title}.html`
        })
    );
};
...
 {
                test: /\.ejs$/,
                use: ['ejs-render-loader'] // указываем лоадер, который поставили
            },
...

Everything, now the template engine honestly works out the time spent on it.
home.ejs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TestTitle</title>
</head>
<body>
    <%- include('logo', {class1: 'classContent1', class2: 'classContent2'}) %>
    <hr>
    <p>Custom content goes here.</p>
</body>
</html>

logo.ejs:
But such templating is not flexible and imposes limitations. For example, if you do not pass the "class1" parameter to home.ejs, you will catch a compilation error, and the conditions in logo.ejs will not save you.
There are a lot of template engines, I implemented the idea on ejs.
PS Having studied WebPack, I made the following conclusions for myself: webpack does not impose restrictions, and you can fasten any logic. But I like the BEM approach - the full bam stack fits perfectly with my approach and idea of front-end development, so I see no reason to fence BEM on webpack.