Icons not loaded in Firefox locally

Question

Icons not loaded in Firefox locally

onet4 opened this issue 6 years ago · comments

Hi,

I just cloned the repository to a local server and opened index.html in Firefox (v62.0.2 on Windows 7). The icons don't seem to load.

This is the console error.

TypeError: o.parentNode is null[Learn More] app.min.js:1:10433
C/</<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:10433
i
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:7350
b/<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:8751
n
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:6370
w/<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:6515

Although Google Chrome (v69.0.3497.100) displays icons fine but it also has console errors.

Uncaught TypeError: Cannot read property 'replaceChild' of null
    at app.min.js:1
    at i (app.min.js:1)
    at app.min.js:1
    at n (app.min.js:1)
    at XMLHttpRequest.<anonymous> (app.min.js:1)

なつき · Answer 1 · Sat Oct 20 2018 05:58:39 GMT+0800 (China Standard Time)

I cannot reproduce this issue with nginx, ruby Webrick, or python SimpleHTTPServer. It worked on Firefox 62.0.3 and Chrome 70.0.3538.67.

I suspect it has something to do with your web server setup.

なつき · Answer 2 · Sat Oct 20 2018 09:11:08 GMT+0800 (China Standard Time)

Okay, I think the issue is the way Git handles symlinks on Windows. You need either replace those text file version of symlinks which Git on windows creates with either real windows symlinks or with a copy of real file.

なつき · Answer 3 · Sat Oct 20 2018 11:10:02 GMT+0800 (China Standard Time)

https://github.com/git-for-windows/git/wiki/Symbolic-Links

onet4 · Answer 4 · Sat Oct 20 2018 11:52:39 GMT+0800 (China Standard Time)

You need either replace those text file version of symlinks which Git on windows creates with either real windows symlinks or with a copy of real file.

Not sure which files.

https://github.com/git-for-windows/git/wiki/Symbolic-Links

If I do this

git clone -c core.symlinks=true https://github.com/ntkme/github-buttons.git

it fails,

Cloning into 'github-buttons'...
remote: Enumerating objects: 3649, done.
remote: Total 3649 (delta 0), reused 0 (delta 0), pack-reused 3649R
Receiving objects: 100% (3649/3649), 1.84 MiB | 414.00 KiB/s, done.
Resolving deltas: 100% (2144/2144), done.
error: unable to create symlink buttons.html: Permission denied
error: unable to create symlink buttons.js: Permission denied
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'

git status gives the following

On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        deleted:    .circleci/config.yml
        deleted:    .gitignore
        deleted:    .hound.yml
        deleted:    .nojekyll
        deleted:    .npmignore
        deleted:    LICENSE.md
        deleted:    README.md
        deleted:    assets/css/buttons.css
        deleted:    assets/css/main.css
        deleted:    assets/js/app.js
        deleted:    assets/js/app.min.js
        deleted:    assets/scss/buttons.scss
        deleted:    assets/scss/main.scss
        deleted:    buttons.html
        deleted:    buttons.js
        deleted:    coffeelint.json
        deleted:    dist/angular/README.md
        deleted:    dist/angular/github-button.component.ts
        deleted:    dist/buttons.common.js
        deleted:    dist/buttons.d.ts
        deleted:    dist/buttons.esm.js
        deleted:    dist/buttons.html
        deleted:    dist/buttons.js
        deleted:    dist/buttons.min.js
        deleted:    dist/react/README.md
        deleted:    dist/react/index.js
        deleted:    dist/vue/README.md
        deleted:    dist/vue/index.js
        deleted:    favicon.ico
        deleted:    index.html
        deleted:    karma.conf.js
        deleted:    package-lock.json
        deleted:    package.json
        deleted:    rollup.config.js
        deleted:    src/alias.coffee
        deleted:    src/app.coffee
        deleted:    src/batch.coffee
        deleted:    src/config.coffee
        deleted:    src/container.coffee
        deleted:    src/content.coffee
        deleted:    src/current-script.coffee
        deleted:    src/defer.coffee
        deleted:    src/event.coffee
        deleted:    src/fetch.coffee
        deleted:    src/main.coffee
        deleted:    src/octicons.coffee
        deleted:    src/options.coffee
        deleted:    src/pixel.coffee
        deleted:    src/querystring.coffee
        deleted:    src/size.coffee
        deleted:    test/fixtures/api.github.com/repos/ntkme/github-buttons
        deleted:    test/fixtures/api.github.com/users/ntkme
        deleted:    test/unit/alias.spec.coffee
        deleted:    test/unit/config.spec.coffee
        deleted:    test/unit/content.spec.coffee
        deleted:    test/unit/current-script.spec.coffee
        deleted:    test/unit/defer.spec.coffee
        deleted:    test/unit/event.spec.coffee
        deleted:    test/unit/fetch.spec.coffee
        deleted:    test/unit/jsonp.spec.coffee
        deleted:    test/unit/options.spec.coffee
        deleted:    test/unit/pixel.spec.coffee
        deleted:    test/unit/querystring.spec.coffee
        deleted:    test/unit/size.spec.coffee

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .circleci/
        .gitignore
        .hound.yml
        .nojekyll
        .npmignore
        LICENSE.md
        README.md
        assets/
        coffeelint.json
        dist/
        favicon.ico
        index.html
        karma.conf.js
        package-lock.json
        package.json
        rollup.config.js
        src/
        test/

Is it hard for you not to rely on symlinks?

なつき · Answer 5 · Sat Oct 20 2018 12:46:45 GMT+0800 (China Standard Time)

There are two part of this project:

GitHub Buttons: buttons.js & buttons.html
- These two in the Git root directory are symlinked from dist directory. The symlink is for serving the project via GitHub Pages as https://buttons.github.io/buttons.js instead of https://buttons.github.io/dist/buttons.js. It's symlink instead of copy, which is to avoid have two copies of same files in the project. The reason that it's not symlinked the other way around is that npm does not support symlinks. The files in dist, which is part of node package, has to be real one.
Buttons Generator: index.html & app.js
- It's intended to be served via GitHub Pages (or any static files server that support symlinks).

Depends on what you want, here are the solutions:

If you just want to serve the buttons.js & buttons.html locally, use the ones in dist. To do that, you can generate buttons use https://buttons.github.io and then replace the src in <script> tag:
- https://buttons.github.io/buttons.js -> http://localhost/test_javascript/github-buttons/dist/buttons.min.js
If you really want to serve the button generator on windows (not going to be supported), do a regular clone and replace the symlinks by copying:
- dist/buttons.min.js -> buttons.js
- dist/buttons.html -> buttons.html
Or you can fix the permission issue when create symlink. Google "git symlink windows" and you will find some stackoverflow articles on this.

onet4 · Answer 6 · Sat Oct 20 2018 14:46:44 GMT+0800 (China Standard Time)

I see. So these two files then which need to be copied and replaced in Windows environment.

buttons.html
buttons.js

Now index.html loads icons properly and there are no console errors in my environment Thank you.

I think there should be an easy way for Windows users to use your code. At the moment, it is seriously hard to figure out how to use it and most of them will just pass by to find another.