YAML file in `link` element turns into empty JS file

[jtojnar]

🐛 bug report

netlify-cms supports specifying path to its configuration using <link href="path/to/config.yaml" type="text/yaml" rel="cms-config-url"> tag. However, when I add that to the HTML entry point, the YAML is turned into an empty (except for a comment) JavaScript file in the dist directory.

🎛 Configuration (.babelrc, package.json, cli command)

Building with npx parcel build admin/index.html --dist-dir public/admin/ --public-url .

No special configuration, see the minimal example.

🤔 Expected Behavior

The config file should be copied to the dist directory as is (at most minified).

😯 Current Behavior

$ cat public/admin/config.01adbe3d.js 

//# sourceMappingURL=config.01adbe3d.js.map

💻 Code Sample

https://github.com/jtojnar/repro/tree/738c2d442b504378b145edde2fdc52c8b2e217a0/parcel-netlify-cms

🌍 Your Environment

Software	Version(s)
Parcel	2.4.1
Node	16.14.2
npm/Yarn	8.5.0
Operating System	NixOS

[devongovett]

The default YAML transformer is designed to allow you to import YAML into JavaScript, so it converts it as such. You could override this behavior by adding the following to a .parcelrc file in your project:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.yaml": ["@parcel/transformer-raw"]
  }
}

[jtojnar]

That still does not make sense to me in <link> elements though. Especially when the resulting file is empty – that would not be useful in JavaScript either.

---

For now, I managed to work around this by actually using the YAML from JS:

import config from ´./config.yaml';
window.CMS_CONFIG = config;
import CMS from 'netlify-cms';

[devongovett]

The JS was probably optimized away as it was unused. You are right that it doesn't make sense for <link> but Parcel currently has no way to transform a file differently depending on which file type it was referenced in.

Did the above configuration in .parcelrc not work for you?

[jtojnar]

Yeah, that works. Though, obviously, it will not work if I later decide to also load a YAML file from JavaScript.

[devongovett]

You can use named pipelines to solve that issue. https://parceljs.org/features/plugins/#named-pipelines