Basic setup of Webpack with React App. --- font not showing. #15768

Elindo586 · 2022-05-04T14:02:08Z

Elindo586
May 4, 2022

So, I am trying to use webpack to do SRR with REACT.

You can see the entire code here:
https://github.com/Elindo586/myWebpackTest

Right now I got no errors showing, but the localhost isn't showing any text, however, it is showing the css for the background? Go figure..

Is there any links to follow a basic setup for REACT? Maybe I am missing a plugin? a loader?

Following the REACT regular set up, and the webpack-config.js the main files that I think are in play look like this:

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="app"></h1>
  </body>
</html>

App.js

import "../styles.css";
import "../styles.scss";

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
    </div>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("app"));

vankop · 2022-05-04T14:40:37Z

vankop
May 4, 2022
Collaborator

you can use create-react-app this tool is on top of webpack. Also it allows to "eject" CRA (create-react-app) by running https://create-react-app.dev/docs/available-scripts/#npm-run-eject

1 reply

Elindo586 May 4, 2022
Author

Oh... I already have react installed.

npm install react react-dom

I just don't know why the text isn't showing.

Not sure if it is because I am missing something from webpack, or for something else.

Elindo586 · 2022-05-04T19:27:36Z

Elindo586
May 4, 2022
Author

I had to import React to the App.js

This is working different than the regular REACT app set up.

import React from "react";
import ReactDOM from "react-dom/client";

import "../styles.css";
import "../styles.scss";

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
    </div>
  );
}

export default App;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack

Basic setup of Webpack with React App. --- font not showing. #15768

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

webpack

Basic setup of Webpack with React App. --- font not showing. #15768

Uh oh!

Elindo586 May 4, 2022

Replies: 2 comments · 1 reply

Uh oh!

vankop May 4, 2022 Collaborator

Uh oh!

Uh oh!

Elindo586 May 4, 2022 Author

Uh oh!

Elindo586 May 4, 2022 Author

Elindo586
May 4, 2022

Replies: 2 comments 1 reply

vankop
May 4, 2022
Collaborator

Elindo586 May 4, 2022
Author

Elindo586
May 4, 2022
Author