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

* fix * add e2e test (cherry picked from commit 3ef4f44) Co-authored-by: Lennart <[email protected]>
gatsbyjs · Jan 13, 2023 · b229e7b · b229e7b
1 parent 7021834
commit b229e7b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/yaml.js b/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"}]`)
+  })
+})
diff --git a/e2e-tests/development-runtime/src/pages/webpack-loader/yaml.js b/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
diff --git a/e2e-tests/development-runtime/src/test-files/input.yaml b/e2e-tests/development-runtime/src/test-files/input.yaml
@@ -0,0 +1,4 @@
+- name: Paul
+- name: Leto II
+- name: Ghanima
+- name: Alia
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/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,
+        },
       }
     },