React Components Rendering Error in Electron-React-Boilerplate

Question

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.