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 trialPoJung Chen
5,856 PointsWhy 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
10,343 Pointsthe 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"],
Helmut Granda
10,343 PointsWithout 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
5,856 PointsI have add some information below. Thanks a lot.
PoJung Chen
5,856 PointsI 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>
PoJung Chen
5,856 PointsPoJung Chen
5,856 PointsThanks for helping find the error very much ! It works successfully now.