The index.html file Used by `{npm|yarn} run dev` Attempts to Set drupalSettings in an Odd Way

Created on 9 September 2024, 2 months ago
Updated 10 September 2024, 2 months ago

Problem/Motivation

Drupal settings are passed in as JSON

    <script type="application/json" data-drupal-selector="drupal-settings-json">
      {
        "pluralDelimiter": "\\x03"
      }
    </script>

However, the sample app passes them in differently.

    <script language="JavaScript">
      window.drupalSettings = {
        pluralDelimiter: '\x03',
      };
    </script>

Steps to reproduce

  1. Execute drush generate sdc-vite-react and follow the prompts
  2. Within the module where the SDC boilerplate was generated, inspect js/index.html
  3. Notice the block with "window.drupalSettings"
  4. Execute npm install or yarn install
  5. Start the app with npm run dev or yarn run dev
  6. In your browser's javascript inspector, inspect window.drupalSettings.
  7. Verify that the object window.drupalSettings matches that which is defined in js/index.html

Proposed resolution

Replace:

    <script language="JavaScript">
      window.drupalSettings = {
        pluralDelimiter: '\x03',
      };
    </script>

with:

    <script type="application/json" data-drupal-selector="drupal-settings-json">
      {
        "pluralDelimiter": "\\x03"
      }
    </script>

Remaining tasks

Update js/index.html and test sampe app running locally.

User interface changes

None

API changes

None

Data model changes

None

πŸ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States perrygeorget

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024