ejs-html-loader icon indicating copy to clipboard operation
ejs-html-loader copied to clipboard

Help me, "Error: Child compilation failed"

Open izzuddinraffar opened this issue 7 years ago • 1 comments

Hi, I'm still beginner on webpack and now try using ejs loader, but error during compilation.

http://simpana.cloudhub.my/img/temp/ejs.png

webpack.config.js


const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
const webpack = require('webpack');
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
//const UglifyJsPlugin = require('uglify-js');
const isProd = process.argv.indexOf('-p') !== -1

//const bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;

const cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
             })
const cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output:{
        //path: __dirname + '/dist',
        path: path.resolve(__dirname, "output"),
        filename: 'js/[name].bundle.js'
    },
     devServer: {
        contentBase: path.join(__dirname, "output"),
        compress: true,
        //port: 5555,
        stats:'errors-only',
        open: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.ejs$/,
                use: 'ejs-html-loader'
            },
            {
                test: /\.jpe?g|png|gif|svg$/i,
                // use: ['file-loader?name=[hash:6].[ext]&outputPath=img/',
                //       'image-webpack-loader'
                // ]
                loaders: [
                    'file-loader?name=[hash:6].[ext]&outputPath=img/',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            progressive: true,
                            optipng: {
                                optimizationLevel: 7,
                            },
                            mozjpeg: {
                                quality: 60
                            },
                            gifsicle: {
                                interlaced: true,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            }
                        }
                    }
                    ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("init.bundle.js"),
        new HtmlWebpackPlugin({
        //title: 'Test',
        // minify:{
        //     collapseWhitespace: true
        // },
        hash: true,
        filename: 'index.html',
        template: './src/index.ejs'
    }),
    new ExtractTextPlugin({
         filename: "[name].bundle.css"
    }),
    // new PurifyCSSPlugin({
    //   // Give paths to parse for rules. These should be absolute!
    //   paths: glob.sync(path.join(__dirname, 'src/*.html')),
    // }),
    new webpack.HotModuleReplacementPlugin()
    // new webpack.NamedModulesPlugin()
    ]
}

package.json

{
  "name": "hometutor_lite",
  "version": "1.0.0",
  "description": "Hometutor Lite Version",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && webpack -p",
    "clean": "rimraf ./output/*"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "css-loader": "^0.28.4",
    "ejs": "^2.5.7",
    "ejs-html-loader": "^3.1.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.3.1",
    "node-sass": "^4.0.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "resolve-url-loader": "^2.1.0",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.1",
    "webpack-dev-server": "^2.6.1"
  }
}

Thanks..

izzuddinraffar avatar Aug 08 '17 16:08 izzuddinraffar

Same issue happened and solved by changing packages version.

  • "ejs": "^2.7.4",
  • "ejs-html-loader": "^4.0.1",

ro7584 avatar Feb 06 '20 10:02 ro7584