Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Supercharging webpack with Loaders

PoJung Chen
PoJung Chen
5,856 Points
Posted by PoJung Chen
PoJung Chen
5,856 Points

Why I get "ERROR in ./src/me.png Module build failed: TypeError: Cannot read property 'toString'" ...

In the style.scss, I follow the step in the video, and modify the background-image attribute

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    float: left;
    margin-right: 20px;
    background-color: gray;
    background-image: url('me.png');
    background-size: contain;
  }

However, I get error message when running 'npm start'.

The error message was shown below:

ERROR in ./src/me.png Module build failed: TypeError: Cannot read property 'toString' of undefined at Object.module.exports (/Users/pjchender/Projects/TreeHouse/JSTrack/webpack-workshop/node_modules/url-loader/index.js:16:111) @ ./~/css-loader!./~/sass-loader!./src/styles.scss 6:553-572

When I comment out the background-image line, it can work successfully.

Could anyone know what problem is it?

For more information, Package.json

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.11.0",
    "css-loader": "^0.23.1",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.22.0",
    "image-loader": "0.0.1",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.8",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

and webpack.config.js

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

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

module.exports = webpackConfig;

3 Answers

Helmut Granda
Helmut Granda
10,343 Points

the NPM package that you are using is "image-loader" but in fact you need to use "img-loader". 

    "image-loader": "0.0.1",

npm install --save-dev img-loader

from:

loaders: ["url","image"],

to:

loaders: ["url","img"],
PoJung Chen
PoJung Chen
5,856 Points
PoJung Chen
PoJung Chen
5,856 Points

Thanks for helping find the error very much ! It works successfully now.

Helmut Granda
Helmut Granda
10,343 Points
Helmut Granda
Helmut Granda
10,343 Points

Without seeing your index.ejs file I have the strong feeling it has to do with the single quotes you are using and WebPack.

Would you mind removing the quotes around the URL and report back?

PoJung Chen
PoJung Chen
5,856 Points
PoJung Chen
PoJung Chen
5,856 Points

I have add some information below. Thanks a lot.

PoJung Chen
PoJung Chen
5,856 Points
PoJung Chen
PoJung Chen
5,856 Points

I have removed the quotes and still get the same error:

ERROR in ./src/me.png
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at Object.module.exports (/Users/pjchender/Projects/TreeHouse/JSTrack/webpack-workshop/node_modules/url-loader/index.js:16:111)
 @ ./~/css-loader!./~/sass-loader!./src/styles.scss 6:553-572
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 481 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.ejs 2.4 kB {0} [built]
        [1] ./~/lodash/lodash.js 478 kB {0} [built]
        [2] (webpack)/buildin/module.js 259 bytes {0} [built]
        [3] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
webpack: Failed to compile.

Here is the part of ejsfile(I did not modify anything)

<header>
            <div class="avatar"></div>
            <h1>Jane Smith</h1>
            <p>Location: Portland, Oregon, USA</p>
</header>