Gatsby: importing css module with background image rules results in compilation error.

[iamsuneeth]

Description

When using background image in css (using css modules) like:
body{ color:#888; background: url('../staticFiles/images/san-francisco.jpg') center no-repeat; }

getting the following error:
`Loader D:\Personal\Projects\gatsby\myPage\node_modules\url\url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn'tstcss-loader!./src/layouts/index.module.css 6:61-111 return a function

@ ./~/css-loader?modules&minimize&importLoaders=1&localIdentName=[path]---[name]---[local]---[hash:base64:5]&sourceMap!./~/postcss-loader!./src/layouts/index.module.css 6:61-111`

This issue is exactly similar to the comment by @rossthedevigner under closed issue #3478

Environment

• Gatsby version : 1.9.260
• gatsby-cli version : 1.1.51
• Node.js version: 8.1.3
• Operating System: Microsoft Windows 10

File contents

gatsby-config.js: module.exports = {
siteMetadata: {
title: 'Personal site',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-plugin-typography',
options: {
pathToConfigModule: './src/utils/typography.js',
},
},
{
resolve: gatsby-source-filesystem,
options: {
path: ${__dirname}/src/staticFiles,
name: 'markdown-pages',
},
},
gatsby-transformer-remark,
gatsby-transformer-json,
gatsby-transformer-sharp,
gatsby-plugin-sharp,
],
}`

[codeincontext]

I have this too. I think the cause is that Webpack is trying to load the url npm module instead of url-loader

[beamsies]

Same here.

[codeincontext]

FWIW the fix was adding url-loader to my package.json

[hug0b]

Same issue here on gatsby 1.9 I couldn't import images and npm install url-loader --save-dev solved it

[DZuz14]

Yeah, why is this not included as a dev dependency by default? I have the same issue right now, and fixed it by installing url-loader.

[KyleAMathews]

Is url-loader not in your node_modules when you run into this bug?

[DZuz14]

Not sure, but I know I had to manually npm install url loader. I would have to create a new gatsby project to see if it shows up in node modules on initial setup.

[CSumm]

Url-loader didn't seem to be in my node_modules as well, so I just installed it thanks to this. Would be great if it could be included in the standard Gatsby startup package.

[rperez2021]

It normally is installed. The current project I am working on was started about 3 days ago and url-loader was not included. I just created a new gatsby starter site and it was included. Weird.

[richardwhenever]

Same issuess on my end. Made two new separate projects today and neither had url-loader in node_modules. Manually installing myself and that fixed everything. Weird.

[LekoArts]

url-loader is already in the dependencies and hence should be installed. It seems that's a npm issue. Did you try it with yarn ? I never had any issues with yarn.
Otherwise delete the node_modules folder and install again.

[OskarHulter]

What a lifesaver! Were just tearing my hair out about this issue but installing url-loader manually fixed it. Thanks you so much guys!

[KyleAMathews]

url-loader is a dependency already of gatsby fyi https://github.com/gatsbyjs/gatsby/blob/df17bbc4f86ab1967d2e94c927540f2c39bfd085/packages/gatsby/package.json#L128

This does seem like a npm issue of some sort as @LeKoArts suggests... :-\

[codeincontext]

For context in why the bug presents itself in this way, Webpack 1 lets you
use 'url' to reference 'url-loader' which was a consistent source of
bugs/confusion. As url-loader is missing, I assume it falls back to 'url'
instead

On Mon, 6 Aug 2018, 07:17 Kyle Mathews, [e-mail] wrote:

url-loader is a dependency already of gatsby fyi
https://github.com/gatsbyjs/gatsby/blob/df17bbc4f86ab1967d2e94c927540f2c39bfd085/packages/gatsby/package.json#L128

This does seem like a npm issue of some sort as @LeKoArts
https://github.com/LeKoArts suggests... :-\

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/5479#issuecomment-410591398,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFj63hd_Weh2dgFdkaweGgyTFBzPt-hks5uN9GFgaJpZM4UFq9V
.

[KyleAMathews]

@codeincontext thanks for the explanation — but how is url-loader missing when it's a dependency?

[KyleAMathews]

Oh I see — so webpack tries to load url first and then fails because it's not actually a loader?

[codeincontext]

I'm not sure what the root cause is, I just know that the error message is
because Webpack is trying to use using the url module as a loader.
Webpack 1 interprets "url" and "url-loader" as the same

On Thu, 9 Aug 2018, 08:28 Kyle Mathews, [e-mail] wrote:

Oh I see — so webpack tries to load url first and then fails because it's
not actually a loader?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/5479#issuecomment-411651062,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFj66GapSRNtZFDEwI2I67HiMk10wVIks5uO9aPgaJpZM4UFq9V
.

[mudspringhiker]

Had exactly the same issue and url-loader also fixed it. I'm using npm and I used the default starter. Thanks!

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.