Troubleshooting

Before You Begin

This document is meant to aid when troubleshooting common issues that arise when using the @pantheon-systems/next-drupal-starter. For additional troubleshooting information related to the Pantheon platform, see Pantheon Front-End Sites Frequently Asked Questions.

Images Are Not Working

Local Development:

Check that the IMAGE_DOMAIN environment variable is set in the .env.development.local file.
Ensure the IMAGE_DOMAIN environment only contains the hostname. For example:
```
  IMAGE_DOMAIN=example.com
```

Ensure that you are using the next/image component and that you set the src by constructing the IMAGE_DOMAIN and the image source. For example:

which is exported from lib/constants.js import { IMAGE_URL } from
'../../lib/constants';

    import Image from 'next/image';

    const MyPage = (props) => {
      // ensure the sourceUrl is a relative path, not an absolute URL
      // because we will append this to the IMAGE_URL
      const sourceUrl = props.url;
      const altText = props.alt;
      return (
        <>
          <Image
            src={IMAGE_URL + sourceUrl}
            alt={altText}
            // remaining Image props...
          />
        </>
      );
    };

    ```

See
[The docs on the `next/image` component for more information](https://nextjs.org/docs/api-reference/next/image#src).

Adapting for Use With Existing Drupal Sites

Our starter kits assume that you are using Drupal's core Media module to manage images for article content. If you are instead using Drupal's default image field, you will need to make the following adjustments to the starter kit:

Update grid pages to use the field_image field instead of the field_media_image field.

In the getServerSideProps function in pages/index.jsx change the parameters used to source your articles. Change:

const articles = await store.getObject({
    objectName: 'node--article',
    params: 'include=field_media_image.field_media_image',
    refresh: true,
    res: context.res,
    anon: true,
});

to:

const articles = await store.getObject({
    objectName: 'node--article',
    params: 'include=field_image',
    refresh: true,
    res: context.res,
    anon: true,
});

Next, make the same change in pages/articles/index.jsx.

In components/grid.jsx change the imgSrc constant in the ArticleGridItem component from:

// For use with withGrid
export const ArticleGridItem = ({
    content: article,
    multiLanguage,
    locale,
}) => {
    const imgSrc = article?.field_media_image?.field_media_image?.uri?.url || '';

to:

export const ArticleGridItem = ({
    content: article,
    multiLanguage,
    locale,
}) => {
    const imgSrc = article?.field_image?.uri?.url || '';

Update article detail pages to use the field_image field instead of the field_media_image field.

If you are aliasing your articles within the /articles/* path:

Within the articleTemplate function in pages/articles/[...slug].jsx, change the imgSrc constant from:

const imgSrc = article.field_media_image?.field_media_image?.uri?.url;

to:

const imgSrc = article.field_image?.uri?.url;

Within the getServerSideProps function in pages/articles/[...slug].jsx, change the params constant from:

const params = 'include=field_media_image.field_media_image';

to:

const params = 'include=field_image';

If you are aliasing your articles using a pattern other than /articles/*:

Within the renderPage function in pages/[...alias].jsx, find the if (pageData?.type === 'node--article') conditional and change the following constants from:

const {
    title,
    body: { processed },
    field_media_image,
    thumbnail,
} = pageData;
const imgSrc = field_media_image?.field_media_image?.uri.url;

to:

const {
    title,
    body: { processed },
    field_image,
    thumbnail,
} = pageData;
const imgSrc = field_image?.uri.url;

Within the getServerSideProps function in pages/[...alias].jsx, change the value of the params constant from:

const params =
    resourceName === 'node--recipe'
        ? 'include=field_media_image.field_media_image,field_recipe_category'
        : resourceName === 'node--article'
        ? 'include=field_media_image.field_media_image'
        : '';

to:

const params =
    resourceName === 'node--recipe'
        ? 'include=field_media_image.field_media_image,field_recipe_category'
        : resourceName === 'node--article'
        ? 'include=field_image'
        : '';

After making these changes, images should now display correctly within your articles.

Decoupled Kit Health Check is Failing Valid Builds

Opt Out With an Environment Variable

To opt out of the health check, set the NO_DKHC environment variable. If this variable is set to anything, the health check will be skipped.

Unset the variable to continue running the health check before the build step.

Remove the Health Check

After you begin editing content in your Drupal CMS, you may find the @pantheon-systems/decoupled-kit-health-check unnecessary. If you would like to remove it from the build step, follow the steps below:

In a text editor, open the package.json
Find the "scripts" and remove "decoupled-kit-health-check": "npx --prefer-offline @pantheon-systems/decoupled-kit-health-check drupal"
Edit the "build" script and remove npm run decoupled-kit-health-check && from the beginning of the script
Find the "devDependencies" and remove @pantheon-systems/decoupled-kit-health-check, Or in a terminal, run npm rm @pantheon-systems/decoupled-kit-health-check

Before You Begin​

Images Are Not Working​

Adapting for Use With Existing Drupal Sites​

Decoupled Kit Health Check is Failing Valid Builds​

Opt Out With an Environment Variable​

Remove the Health Check​