Keep getting throw error...

Question

First i should mention my webpack.config.js doesn't match instructors because I used a patch from the last video. You will mainly notice the patch uses a rules array, not shown in the instructors screen. Everything else I did exactly the same.

webpack.config.js

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

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                loader: "babel-loader",
                test: /\.js$/
            },
            {
                loaders: ['css-loader', 'style-loader', 'sass-loader'],
                test: /\.scss$/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

Second, I keep getting the following throw error....

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\xampp\htdocs\webpack-th\webpack-workshop\node_modules\html-webpack-plugin\lib\compiler.js:11:26)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\xampp\htdocs\webpack-th\webpack-workshop\node_modules\html-webpack-plugin\index.js:7:21)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-treehouse-example@0.0.1 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-treehouse-example@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jason\AppData\Roaming\npm-cache\_logs\2017-12-15T18_11_47_995Z-debug.log

PS. For some reason this topic won't let me post to the questions thread of the video I have a question about. Here is the direct URL....

https://teamtreehouse.com/library/adding-styles-to-your-application

Answer 1 · 2018-08-16T13:47:35Z

August 16, 2018 1:47pm

I looked up the official npm doc for style-loader and sass-loader and found that this worked for me:

const path = require("path");

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

var webpackConfig = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                loader: "babel-loader",
                test: /\.js$/
            },
            {
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ],
                test: /\.scss$/,
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;

Welcome to the Treehouse Community

Looking to learn something new?

jlampstack

jlampstack

Keep getting throw error...

1 Answer

Mita Una

Mita Una

liamthornback2

liamthornback2