Can't get CSS to load when I run npx webpack

Question

I am working through the Odin Project and am stuck on the first lesson where we must build a webapp using webpack. I followed the tutorials here and hereon webpack's website, and I was able to get them to work. However, when I try to set up my own files to build my own project, I can't get CSS to load or a function in my index.js file.

I have the same directory style set up, and have even tried using the exact same index.js file they use in the tutorial.

I expect to get: a webpage to load that says "hello webpack" in red text.

Instead, I get this error: when I run $npx webpack, it says:

ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .hello{
|     color: red;
| }
 @ ./src/index.js 1:0-21

Upon googling the error, I found a stack overflow article and I tried renaming my rules array to 'loaders' in my .config file as this article suggests, but I still get the same error. “You may need an appropriate loader to handle this file type” with Webpack and CSS

Also weird is the fact that some of the code in my index.js file works, and some does not. To elaborate, my console.log and alert works just fine after I run $npx webpack and load the page. However, they function that is supposed to add "hello webpack" to the DOM, does not, as evidence by the fact that nothing shows up at all. The page itself is blank.

My index.js code:


import './style.css';
console.log("console works");
alert("alert works");

function component() {
    const element = document.createElement('div');
 
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   element.classList.add('hello');
 
    return element;
  }
 
document.body.appendChild(component());

You will notice that it is nearly the exact same as the asset management index.js file from the webpack tutorial. I did this purposely to have as little variance as possible between my stuff and the tutorial.

I don't know if it is too much information, but a link to the whole repo as it currently is set up can be found here

While the question is mostly well-written, you should avoid using external resources, if they are critical to understanding the point of the problem. Please, add your webpack configuration here and the image of your project's file tree. — Vasiliy Artamonov, Nov 19 '22 at 19:28

score 1 · Answer 1 · answered Nov 17 '22 at 04:46

Update: I re-setup the file from the ground up and noticed that the CSS stopped working when I went out of my way to change the bundle.js link they had in their example to main.js. While I double-checked to make sure that I made the correct corresponding changes to output in my config file, making this change had the sum total outcome of not allowing my CSS to work for some reason.

What this reason is? I have no idea, and would be very interested to learn why this happened if someone has a suggestion

But on the offchance that one of my fellow Odin learners googles this problem, I kept the example's bundle.js instead of changing to main.js as my output script and it worked fine.

I'm going to update my github now so my original github link will likely be out of date going forward.

score 1 · Answer 2 · answered Nov 19 '22 at 19:30

Going through your GitHub repo commit history, I see that at some point you named your Webpack configuration file weback.config.js instead of webpack.config.js (the p was missing). This was likely the source of the problem, as Webpack couldn't find a loader configuration for the .css file you're importing.

Can't get CSS to load when I run npx webpack

2 Answers2