We Keep Coding

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

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

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.

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.

Angular: Moving a service/component to another folder (in the folder structure, not in code)

SHORT: Renaming a service or component is no problem, but can you also move it to another folder?
LONG: This is the service I generated at the wrong directory with the ng new service data command:
When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory ...\data.service.ts
So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_compiler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;

TL;DR: Auto updating imports doesn't seem to work for nested Angular component folders and the error is useless. Check that those imports were updated correctly (anything in the _components folder in the poster's example).
I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in components that are grouped by folders. For example, consider the following folder structure:
> Component 1
> Component 2
> Forms
      > Name Component
      > Email Component
> Services
api.service.ts
When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _components folder to ensure the imports were updated correctly.

We can move the services and components to desired folder. In Visual Studio Code after moving the component or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly
Visual Studio Code does not seems to auto update the imports in this case.

The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.

In VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.
Let's say you have some like:
And you want to move the component named 'single-value-card' to the 'visualization' folder.
Then all you have to do is to rename the component folder as shown:
And voilá:
Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again

Ember Quickstart: Build Error when adding JS file to component

I just started using Ember. The next step in the Ember Quickstart tutorial is adding a JS file to a component:
In addition to the template, a component can also have a JavaScript
file [...]. Go ahead and create a .js file with the same name and in
the same directory as our template (app/components/people-list.js),
and paste in the following content:
I did that, but now I get a build error:
Build Error (broccoli-persistent-filter:TemplateCompiler)
EEXIST: file already exists, symlink '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-131-broccoli_merge_trees_templates/ember-quickstart/templates/components/people-list.js' -> '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-132-broccoli_persistent_filter_template_compiler/ember-quickstart/templates/components/people-list.js'
How do I get rid of this?

If I'm reading the error message correctly both you people-list.hbs and people-list.js files are in app/templates/components. In Ember Octane both files should be moved to app/components which is a new feature called component template colocation.
If that isn't the issue you may just need to restart the local ember server (though I haven't had to do that when adding a new js file for a component in the past.

How to import local model into Magenta MusicRNN?

I have trained my model locally using the python libraries and got the 3 files:
ckpt.index
ckpt.meta
ckpt.data
After that, I have followed the steps on this page, under "Dumping Your Weights" and now I also have:
weights_manifest.json
group1-shard1of2
group1-shard2of2
I have also this config.json file
But when I try to import it using the js library it crashes.
error log
values right before it crashes

The issue apparently originated from the config file. As soon as I replaced the file with the one used in the default model (config.json), it worked.

How to configure dynamic loading?

I'm using webpack 4.26.1 (latest).
The code import('./images/header.csv') produce the following error:
Uncaught (in promise) Error: Cannot find module './images/header.csv'
at webpackMissingModule (home.js:9)
My project structure:
'project-dir/src/components/home.js' (im here)
'project-dir/src/components/images/header.csv'
I tried to read https://webpack.js.org/api/module-methods/ but failed to understand what to do except adding random webpack comments which I don't understand.
Also, from the docs, I may be found the source of the problem but I'm not exactly sure I understand it and how to solve it.
Fully dynamic statements, such as import(foo), will fail because webpack requires at least some file location information. This is because foo could potentially be any path to any file in your system or project. The import() must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.
Every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption. Using the webpackInclude and webpackExclude options allows us to add regex patterns that reduce the files that webpack will bundle for this import.
More than providing me a solution, I will appreciate any answer that covers what is the actual problem with my code.
Thank you.