Atom-ide-ui: Failed to load resource: net::ERR_FILE_NOT_FOUND (nuclicons.ttf)

[50Wliu]

I assume that since this is the only Nuclide-related package I have installed that the error is coming from atom-ide-ui. It appears every startup in the dev tools.

Atom 1.23.0-dev-d6a3a6046
[email protected]

[hansonw]

Ah this is our little hack to get Nuclide's icons in both places. Rest assured that the error is harmless, though we should probably find another approach.

[matthewwithanm]

@nathansobo @maxbrunsfeld Do you guys have any suggestions for avoiding this warning? The problem is that we need to allow for the font to be found in one of two packages:

  src:
    url('atom://nuclide/modules/nuclide-commons-ui/styles/nuclicons.ttf') format('truetype'),
    url('atom://atom-ide-ui/modules/nuclide-commons-ui/styles/nuclicons.ttf') format('truetype');

[Arcanemagus]

Why does the font _need_ to be able to be found in both packages? atom-ide-ui shouldn't be dependent on nuclide being installed, and I'm assuming visa-versa.

[hansonw]

@Arcanemagus this is shared code between atom-ide-ui and Nuclide so things are tricky. We sync this between both packages so it has to work in both contexts.

@matthewwithanm I tried being clever and embedding the font as a base64 string, but looks like that's a dead end! Atom's content security policy forbids it:

Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQiCMJ…Z0b29scwVyZWxheQZmdW5uZWwFZXJyb3IHd2FybmluZxFzbWFsbC1hcnJvdy1yaWdodAAAAAAA' because it violates the following Content Security Policy directive: "default-src * atom://*". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I dunno if there's any way to get around that, though?

[hansonw]

It's really gross, but dynamic style injection also works:

diff --git
--- a/modules/nuclide-commons-ui/index.js
+++ b/modules/nuclide-commons-ui/index.js
@@ -13,17 +13,36 @@
 // Requiring this module will load all stylesheets in styles/.
 // The exported value can be disposed to remove the stylesheets.

+import nuclideUri from 'nuclide-commons/nuclideUri';
 import UniversalDisposable from 'nuclide-commons/UniversalDisposable';
+import dedent from 'dedent';
 import fs from 'fs';
 // eslint-disable-next-line rulesdir/prefer-nuclide-uri
 import path from 'path';

+const ttfUri = nuclideUri.nuclideUriToUri(
+  path.join(__dirname, 'styles', 'nuclicons.ttf'),
+);
+const newStyle = document.createElement('style');
+newStyle.appendChild(
+  document.createTextNode(dedent`
+    @font-face {
+      font-family: 'nuclicons';
+      src: url('${ttfUri}') format('truetype');
+      font-weight: normal;
+      font-style: normal;
+    }
+  `),
+);
+document.head.appendChild(newStyle);
+
 const styleDir = path.join(__dirname, 'styles');
 const styleDisposables = new UniversalDisposable(
   ...fs
     .readdirSync(styleDir)
     .filter(file => ['.less', '.css'].includes(path.extname(file)))
     .map(file => atom.themes.requireStylesheet(path.join(styleDir, file))),
+  () => newStyle.remove(),
 );

 module.exports = styleDisposables; // eslint-disable-line rulesdir/no-commonjs

[yubaoquan]

The error message in console is pretty annoying. Is there any way to prevent showing this error?

[50Wliu]

Changelog says that this was fixed in 0.7.2 and I can confirm that I no longer receive this error.

Thanks!