We Keep Coding

React Components Rendering Error in Electron-React-Boilerplate

Good Afternoon all,
I built a React.js web music-player application a while ago, and now I am transforming my old react application into a downloadable desktop app using Electron-react-boilerplate . I figured since I am transfomring my application from web-desktop using Electron-react-boilerplate , then any of the old components from my old applciation, can reusable in this new application. I am not quite familiar on how to use Electron-react-boilerplate yet , and thats why I am having some rendering issues in my code.
I wanted ya’ll to see my code, so I tried to push my entire electron-boilerplate file into my own git repository, but it wasn’t working so I decided that I should at least provide a reproudcible example of my code, so that my issue is still understandable. I ended up using theelectron-quick-start template as a temporary subsitiute, and I just imported some of the boilerplate folders as well as some of my own, so that problem is more clear.(link to my repo below)
What I Have So Far:
As previously stated, I am trying to import some React components from another application of mine, into my new Electron-react-boilerplate  app. The app is supposed to function as a downloadable music-player application. It contains 4 playlists Turkish.js , House.js, Rock.js, and Persian.js, and the user can listen to music from any of these 4 genres.
I imported these following folders from my old react.js application:
the public folder (contains images for the playlists)
the src folder which includes:
components folder .
In the components folder are the folllowing:
Navbar folder( named as: “NavbarA”, contains some routing as well).
Music folder(where the .mp3 files are loaded to my application via drag-drop.
firebase.js folder (included firebase web-authentication).
As well as my playlist components (Turkish.js , House.js, Rock.js, and Persian.js) , and their child components that are designated for styling purposes like the “..Card.js” and “…Button.js” components.
And I also added the __tests__,main,and renderer folders into my src folder as well.
After I imported all of this, I changed some aspects of App.tsx, so that I can reference the NavbarA component, wrapped in a react-router.
The Problem:
I received two visible errors:
Error 1: (Music/.mp3 module parse fail)
(Same Error for all .mp3 files), for example I am also getting these errors as well:
ERROR in ./src/components/music/turk1.mp3 1:0
ERROR in ./src/components/music/house1.mp3 1:0
ERROR in ./src/components/music/persian1.mp3 1:0
ERROR in ./src/components/music/rock1.mp3 1:0
Module parse failed: Unexpected character '' (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
(Source code omitted for this binary file)
# ./src/components/Rock.js 34:36-64
# ./src/components/NavbarA.js 40:31-48
# ./src/renderer/App.tsx 11:34-63
# ./src/renderer/index.tsx 10:30-46
To clarify, this error does not only pertain to rock1.mp3, I received this error for all .mp3 music files. Any idea on how to import audio in my application? How did I do it incorrectly? What is the correct import method to process this file?
Error 2: (blank screen logs string “Cannot GET /index.html”
I am currently getting back a blank screen with that error , and am not sure why.It could be possible that I am not rendering my components correctly, (possibly in the wrong folder). It can also be a routing issue, but I am not certain.
this is the error I recieved after doing npm start
(Picture of Screen Attached Below)
My Code Is Here:
You can look at it here:
link to git repository -
https://github.com/ZpoDavay/electronboilerplate-simple
Let me know what you think!
Best,
Zpo.
What I Have So Far:
As previously stated, I am trying to import some React components from another application of mine, into my new Electron-react-boilerplate  app. The app is supposed to function as a downloadable music-player application. It contains 4 playlists Turkish.js , House.js, Rock.js, and Persian.js, and the user can listen to music from any of these 4 genres.
I imported these following folders from my old react.js application:
the public folder (contains images for the playlists)
the src folder which includes:
components folder .
In the components folder are the folllowing:
Navbar folder( named as: “NavbarA”, contains some routing as well).
Music folder(where the .mp3 files are loaded to my application via drag-drop.
firebase.js folder (included firebase web-authentication).
As well as my playlist components (Turkish.js , House.js, Rock.js, and Persian.js) , and their child components that are designated for styling purposes like the “..Card.js” and “…Button.js” components.
And I also added the __tests__,main,and renderer folders into my src folder as well.
After I imported all of this, I changed some aspects of App.tsx, so that I can reference the NavbarA component, wrapped in a react-router.
The Problem:
I received two visible errors:
Error 1: (Music/.mp3 module parse fail)
(Same Error for all .mp3 files), for example I am also getting these errors as well:
ERROR in ./src/components/music/turk1.mp3 1:0
ERROR in ./src/components/music/house1.mp3 1:0
ERROR in ./src/components/music/persian1.mp3 1:0
ERROR in ./src/components/music/rock1.mp3 1:0
Module parse failed: Unexpected character '' (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
(Source code omitted for this binary file)
# ./src/components/Rock.js 34:36-64
# ./src/components/NavbarA.js 40:31-48
# ./src/renderer/App.tsx 11:34-63
# ./src/renderer/index.tsx 10:30-46
To clarify, this error does not only pertain to rock1.mp3, I received this error for all .mp3 music files. Any idea on how to import audio in my application? How did I do it incorrectly? What is the correct import method to process this file?
Error 2: (blank screen logs string “Cannot GET /index.html”
I am currently getting back a blank screen with that error , and am not sure why.It could be possible that I am not rendering my components correctly, (possibly in the wrong folder). It can also be a routing issue, but I am not certain.
this is the error I recieved after doing npm start
(Picture of Screen Attached Below)
My Code Is Here:
You can look at it here:
link to git repository -
https://github.com/ZpoDavay/electronboilerplate-simple
Let me know what you think!
Best,
Zpo.

VSCode Vetur Intellisense Not working properly for template register without .vue extension file name

My orders.js file contains this line:
Vue.component("prefix-orders", require("./Orders").default);
My template file name is: Orders.vue
I'm using Laravel 8 at the same time for that project. But I dont't have any config file for. Vue or Vetur. Maybe I should create a config file for exploring .vue files for non-extension template registrations.
When I try to "Go to definition" right click on "./Orders" It pops up an error:
Unable to open 'Orders': Unable to read file '/var/www/html/xxx/Modules/Orders/src/Resources/assets/js/Orders' (Error: Unable to resolve nonexistent file '/var/www/html/xxx/Modules/Orders/src/Resources/assets/js/Orders').
When I change to require("./Orders") to require("./Orders.vue") it works. But my project has got so many files registered without .vue extension. I don't want to change my colleagues' coding standard. They use phpstorm and it works on it. But I want to switch VSCode.
Please help to use "Go to Definition" for require without .vue extension

External Dependencies not working in Nav.svelte

I am trying to load sv-bootstrap-dropdown module in nav.svelte component but I am getting the error <Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. After that I tried to install that as devDependency but than I was getting the error that Cannot read property remove of undefined. This gets generated itself in the server js file under the sapper folder

When working with svelte and sapper you to have think about 2 types of rendering : client side rendering (sveltjs, js) and server side rendering (SSR), it's sapper (nodejs or expressjs), there are a few ways to handle this, but according to the document of dependency you are using :
for SSR you consider to import like this:
import {
Carousel,
CarouselControl,
CarouselIndicators,
CarouselItem,
CarouselCaption
} from 'sveltestrap/src';
solve it by importing from the src folder of the package.

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

Angular 2 - TypeScript File not resolving to .js extension .NET MVC Application

Background
I am migrating one of the apps from Angularjs 1.x to Angular 2. Being new to the Angular 2 , I am first trying to get grasp of different files used for configuration
Before jumping to my app, I created a small dummy app with the help of quickstart files from Angular Quickstart on gitub
https://guthub.com/angular/quickstart
I move those files into a .NET MVc 5.0 web app. When I build the app using the npm CLI
npm start
It creates an index.htm, and that successfully ran. My next step was to use a MVC View instead of this index.htm, This time, I created a default route for localhost/ pointing to PublicController with a view Index.cshtml.
Problem Statement
While using MVC views, routed through Controllers, what I see is that main.ts file when compiled omits the file extension - *.js For e.g.
import { AppComponent } from './app.component';
in my Main.ts, when compiled translates to (in main.ts)
var app_component_1 = require("./app.component");
My page ran with a console error, and I saw 404 error for not been able to resolve app.component.
All works out fine, If I manually type in .js in my main.js file. But that's not the solution.
var app_component_1 = require("./app.component.js");
Question
Which setting should I change and which file that should resolve filename in the main.ts to filename.js

Finally, found the solution.. problem is with the dot in the file name , Issue is reported here too https://github.com/systemjs/systemjs/issues/756
I added the following setting in the systemjs.config file
packages: {
'.': {
defaultExtension: 'js'
},