fix(gatsby): Use correct settings for yaml-loader (#37454) (#37460)

* fix

* add e2e test

(cherry picked from commit 3ef4f44)

Co-authored-by: Lennart <lekoarts@gmail.com>

e2e-tests/development-runtime/cypress/integration/functionality/yaml.js

@@ -0,0 +1,11 @@
+describe(`webpack-loader: yaml`, () => {
+  beforeEach(() => {
+    cy.visit(`/webpack-loader/yaml/`).waitForRouteChange()
+  })
+
+  it(`outputs the YAML file as JSON`, () => {
+    cy.getTestElement(`webpack-loader-yaml`)
+      .invoke(`text`)
+      .should(`eq`, `[{"name":"Paul"},{"name":"Leto II"},{"name":"Ghanima"},{"name":"Alia"}]`)
+  })
+})

e2e-tests/development-runtime/src/pages/webpack-loader/yaml.js

@@ -0,0 +1,16 @@
+import * as React from "react"
+import Layout from "../../components/layout"
+
+import inputYaml from "../../test-files/input.yaml"
+
+const YamlPage = () => (
+  <Layout>
+    <pre>
+      <code data-testid="webpack-loader-yaml">
+        {JSON.stringify(inputYaml, null, 0)}
+      </code>
+    </pre>
+  </Layout>
+)
+
+export default YamlPage

e2e-tests/development-runtime/src/test-files/input.yaml

@@ -0,0 +1,4 @@
+- name: Paul
+- name: Leto II
+- name: Ghanima
+- name: Alia

packages/gatsby/src/utils/webpack-utils.ts

@@ -228,8 +228,11 @@ export const createWebpackUtils = (
     },
     yaml: (options = {}) => {
       return {
-        options,
         loader: require.resolve(`yaml-loader`),
+        options: {
+          asJSON: true,
+          ...options,
+        },
       }
     },