Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts linked are linked to wrong path in production #1480

Closed
Booli opened this issue Feb 3, 2017 · 5 comments
Closed

Fonts linked are linked to wrong path in production #1480

Booli opened this issue Feb 3, 2017 · 5 comments
Milestone

Comments

@Booli
Copy link

Booli commented Feb 3, 2017

Description

Links to fonts imported from CSS have wrong link in production CSS file.

Expected behavior

Imported fonts in CSS load correctly in production and are loaded from static/media
Tell us what you think should happen.

Actual behavior

Font files from CSS are linked to ./static/css/static/media and therefore 404.
line in generated main.css
@font-face{font-family:Mana;src:url(./static/media/mana.9e4b11ee.eot);

http://localhost:8080/static/css/static/media/mana.b561ddbf.woff Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/static/css/static/media/mana.059227ff.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

Environment

react-scripts@0.8.5
v7.5.0
4.1.2

macOS El Capitan
Any Browser

Link to repo with error:
https://github.com/Booli/simmer

package.json

  "name": "simmer",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5",
    "sw-precache": "^4.3.0"
  },
  "dependencies": {
    "mana-font": "^1.2.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "rebass": "^0.4.0-beta.9",
    "reflexbox": "^2.2.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "./"
}

Or I am misunderstanding how to import the fonts
@gaearon
Copy link
Contributor

gaearon commented Feb 3, 2017

Thanks for filing, this is a known issue.
"homepage": "./" is a hack and not officially supported.

Please track #1094 for updates.

@aaronplanell
Copy link

Hi Booli,

As @gaearon said, there is a bug and the solution:

"homepage": "./"

It's not officially supported.

In my case (check #1487) I solved it transforming the absolute route to a relative route of the index file:

"homepage": "."

I repeate, this is a hack and it's not supported by CRA, but maybe it will solve your problem temporally.

I tryed check it with your project but you have the route public/Images defined in the .gitignore file and I have a lot of 404 errors because the files doesn't exists 😞

Best regards.

@gaearon
Copy link
Contributor

gaearon commented Feb 7, 2017

Perhaps this will be solved by #1489.

@Timer
Copy link
Contributor

Timer commented Feb 10, 2017

Hi @Booli, now that #1489 has landed can you please test it and let us know if you're still having the problem?

@Timer
Copy link
Contributor

Timer commented Feb 11, 2017

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

@Timer Timer closed this as completed Feb 11, 2017
@Timer Timer added this to the 0.9.0 milestone Feb 11, 2017
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants