My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) #50

bogere · 2019-05-10T08:49:53Z

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the old version (1.2.0)
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The font icons and logo images used should load normally in the production build

Current Behavior

The web application runs normally but the font icons and the logo images do not load
#My reason
The font icons should load normally even in the production build
My font-icons have failed to load when i use the reactjs production build(npm run build)
Yet according to the documentation(https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files), as long as import the CSS file from JS that contains the
font icons, the fonts and css will have to go through the build pipeline,
get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files
are missing. so it must work without any other configuration

//src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css"; //font-icons that iam interested in

so please if you have done npm run build, what changes did you make to your index.html file so that
font icons can work in your production build, i removed the relative path(/static/main.js.878999) for the css to work
The build command added the font icons in the static/media folder

The text was updated successfully, but these errors were encountered:

einazare · 2019-05-10T16:40:29Z

Hello there @bogere ,

Thank you for your interest in working with our products.
Please delete the homepage prop from the package.json file.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

bogere · 2019-05-13T15:07:10Z

You are welcome,
I checked my package.json and it was missing the homepage property before i built the production version, the font icons still do not load.
To make the js , css files to work, i had to make the changes to the index.html file from
from the relative path to the absolute path to work. Take a look at my current index.html file that can now load the js and css files very well but failed for loading the icons
<link rel="manifest" href="manifest.json"><!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="manifest.json"><link rel="shortcut icon" href="favicon.ico"><link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png"><title>Biz Watch - React</title><link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"><link href="//fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet"><link href="static/css/main.33ec52e9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="static/js/main.2b1d6fa7.js"></script></body></html>

bogere · 2019-05-14T07:07:38Z

yes these font icons cannot load easily.
import "./assets/css/pe-icon-7-stroke.css"; //font-icons that iam interested in
so let me try building production version of the latest light bootstrap react version and I shall give you feedback though I am still solving some issues below. This error is common with latest create-react-app

Creating an optimized production build...
Failed to compile.
Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - $sidebar-width
^.........^

this is where iam bit stuck still solving it.

invalid CSS after "... 54px !default;": expected 1 selector or at-rule, was "#{$sidebar-width}: "
      in D:\node4\projectz\react_stuff\react_lessons\mobx\bizwatch_latest_react\src\assets\sass\lbd\_variables.scss (line 129, column 45)

einazare · 2019-05-15T07:13:27Z

Hello there @bogere ,

To solve this issue:

Creating an optimized production build...
Failed to compile.
Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - $sidebar-width
^.........^

Go inside src/assets/sass/lbd/_navbars.scss and change line width: calc(100% - $sidebar-width); with width: calc(100% - #{$sidebar-width});.

That will do the trick.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

bogere · 2019-05-15T12:29:58Z

@einazare
thank you for the feedback, I highly appreciate it
i was able to resolve above the problem using your solution but then another error came about in _variable.scss
like this one.

invalid CSS after "... 54px !default;": expected 1 selector or at-rule, was "#{$sidebar-width}: "
      in D:\node4\projectz\react_stuff\react_lessons\mobx\bizwatch_latest_react\src\assets\sass\lbd\_variables.scss (line 129, column 45)

einazare · 2019-05-16T06:28:07Z

Hello there @bogere ,

Please download again the product and only make the above changes.
You cannot declare a variable by using the #{} syntax.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

bogere · 2019-05-16T14:38:55Z

@einazare Thank you i was able to resolve the above problem.

dark-wind · 2019-05-27T11:52:45Z

Hello there @bogere ,

To solve this issue:
Creating an optimized production build...
Failed to compile.
Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - $sidebar-width
^.........^
Go inside src/assets/sass/lbd/_navbars.scss and change line width: calc(100% - $sidebar-width); with width: calc(100% - #{$sidebar-width});.

That will do the trick.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

Trying to help the open source community:

https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618

https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85

https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f

https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a

https://www.youtube.com/watch?v=no2PD2kq-dE&list=PLWxSJr7LCl87OomktWFQVW30QDWtBqFlx

https://www.youtube.com/watch?v=BMPHfnAA9iI&list=PLWxSJr7LCl87rxd7A4j9WEFUbJz4gTNLa

https://www.udemy.com/learn-reactjs-with-webpack-4-babel-7-and-material-design/

https://www.udemy.com/how-to-use-react-with-firebase-and-redux/

If you've liked what you saw, help me with a comment, like, share or subscribe.

this answer fixed my buiild error

Go inside src/assets/sass/lbd/_navbars.scss and change line width: calc(100% - $sidebar-width); with width: calc(100% - #{$sidebar-width});.

close #50

einazare added the bug label May 15, 2019

einazare mentioned this issue Jun 17, 2019

npm run build error "Lexical error " #53

Closed

einazare mentioned this issue Jun 16, 2020

[Bug] Unrecognized text. Erroneous area: 1: 100% - $sidebar-width #68

Closed

einazare added a commit that referenced this issue Sep 24, 2020

docs: add bug fixed

c0083b2

close #50

einazare added a commit that referenced this issue Jan 21, 2021

docs: solve #50

cd77ce7

einazare mentioned this issue Jan 21, 2021

Update Dependencies #76

Merged

einazare closed this as completed in #76 Jan 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) #50

My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) #50

bogere commented May 10, 2019 •

edited

Loading

einazare commented May 10, 2019 •

edited

Loading

bogere commented May 13, 2019 •

edited

Loading

bogere commented May 14, 2019 •

edited

Loading

einazare commented May 15, 2019 •

edited

Loading

bogere commented May 15, 2019 •

edited

Loading

einazare commented May 16, 2019 •

edited

Loading

bogere commented May 16, 2019

dark-wind commented May 27, 2019

My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) #50

My font-icons and logo images have failed to load when i use the reactjs production build(npm run build) #50

Comments

bogere commented May 10, 2019 • edited Loading

Prerequisites

Expected Behavior

Current Behavior

einazare commented May 10, 2019 • edited Loading

bogere commented May 13, 2019 • edited Loading

bogere commented May 14, 2019 • edited Loading

einazare commented May 15, 2019 • edited Loading

bogere commented May 15, 2019 • edited Loading

einazare commented May 16, 2019 • edited Loading

bogere commented May 16, 2019

dark-wind commented May 27, 2019

bogere commented May 10, 2019 •

edited

Loading

einazare commented May 10, 2019 •

edited

Loading

bogere commented May 13, 2019 •

edited

Loading

bogere commented May 14, 2019 •

edited

Loading

einazare commented May 15, 2019 •

edited

Loading

bogere commented May 15, 2019 •

edited

Loading

einazare commented May 16, 2019 •

edited

Loading