HTML meta viewport tag is not picking up viewport export in layout.tsx in Next.js?

[lancejpollard]

Summary

I am seeing this locally and in production on Vercel:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

However, I have this in my app/layout.tsx:

export { viewport } from '~/site/shared/base/value/viewport'

And that module is like this:

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported by less commonly used
  // interactiveWidget: 'resizes-visual',
}

So I should be seeing this in the view-source HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

For reference, it is causing this UI issue in production.

My Next.js config is like this:

/** @type {import('next').NextConfig} */
import createMDXPlugin from '@next/mdx'
import withYaml from 'next-plugin-yaml'
import path from 'path'
import { fileURLToPath } from 'url'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

if (
  process.env.LD_LIBRARY_PATH == null ||
  !process.env.LD_LIBRARY_PATH.includes(
    `${process.env.PWD}/node_modules/canvas/build/Release:`,
  )
) {
  process.env.LD_LIBRARY_PATH = `${
    process.env.PWD
  }/node_modules/canvas/build/Release:${
    process.env.LD_LIBRARY_PATH || ''
  }`
}

const mdxConfig = {
  extension: /\.mdx?$/,
  options: {
    providerImportSource: '@mdx-js/react',
    rehypePlugins: [[rehypeSlug], [rehypeKatex]],
    remarkPlugins: [[remarkMath], [remarkGfm]],
  },
}

const withMDX = createMDXPlugin(mdxConfig)

function addLocale(data) {
  return [
    {
      ...data,
      destination: `${data.destination}?locale=en`,
    },
    {
      ...data,
      source: `/:locale${data.source === '/' ? '' : data.source}`,
      destination: `${data.destination}?locale=:locale`,
    },
  ]
}

const REWRITES = {
  view: [
    {
      source: '/',
      destination: '/site/view',
      locale: false,
    },
    {
      source: '/svg/:path*',
      destination: '/site/view/svg/:path*',
      locale: false,
    },
    {
      source: '/html/:path*',
      destination: '/site/view/html/:path*',
      locale: false,
    },
    {
      source: '/css/:path*',
      destination: '/site/view/css/:path*',
      locale: false,
    },
    {
      source: '/word/:path*',
      destination: '/site/view/word/:path*',
      locale: false,
    },
    {
      source: '/percentage/:path*',
      destination: '/site/view/percentage/:path*',
      locale: false,
    },
  ]
    .map(addLocale)
    .flat(),
  code: [
    {
      source: '/',
      destination: '/site/code',
    },
    {
      source: '/format/:path*',
      destination: '/site/code/format/:path*',
    },
  ],
  beat: [
    {
      source: '/',
      destination: '/site/beat',
    },
    {
      source: '/guitar/:path*',
      destination: '/site/beat/guitar/:path*',
    },
  ],
  mill: [
    {
      source: '/',
      destination: '/site/mill',
    },
    {
      source: '/display/:path*',
      destination: '/site/mill/display/:path*',
    },
    {
      source: '/convert/:path*',
      destination: '/site/mill/convert/:path*',
    },
    {
      source: '/inspect/:path*',
      destination: '/site/mill/inspect/:path*',
    },
    {
      source: '/detect/:path*',
      destination: '/site/mill/detect/:path*',
    },
    {
      source: '/split/:path*',
      destination: '/site/mill/split/:path*',
    },
    {
      source: '/format/:path*',
      destination: '/site/code/format/:path*',
    },
  ],
}

const rewrites = REWRITES[String(process.env.NEXT_PUBLIC_SITE)] ?? []

const nextConfig = withYaml(
  withMDX({
    i18n: {
      locales: [
        'en',
        'fr',
        'de',
        'hi',
        'bn',
        'vi',
        'zh',
        'ar',
        'es',
        'pt',
        'ru',
      ],
      defaultLocale: 'en',
    },
    async rewrites() {
      return rewrites
    },
    swcMinify: true,
    optimizeFonts: false,
    transpilePackages: [
      'pdfjs-dist',
    ],
    experimental: {
      serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
      // missingSuspenseWithCSRBailout: false,
    },
    pageExtensions: ['mdx', 'md', 'tsx', 'ts'],
    poweredByHeader: false,
    trailingSlash: false,
    webpack: (config, options) => {
      config.experiments = {
        asyncWebAssembly: true,
        syncWebAssembly: true,
        layers: true,
        topLevelAwait: true,
      }
      config.resolve.fallback = {
        fs: false,
        path: false,
        dns: false,
        net: false,
        tls: false,
      }

      config.resolve = {
        ...config.resolve,
        extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],
      }

      config.plugins ??= []

      config.module.rules.push({
        test: /\.mdx?$/,
        use: [
          // Note that Webpack runs right-to-left: `@mdx-js/loader` is used first, then
          // `babel-loader`.
          { loader: 'babel-loader', options: {} },
          {
            loader: '@mdx-js/loader',
            /** @type {import('@mdx-js/loader').Options} */
            options: {},
          },
        ],
      })

      config.resolve.alias.canvas = false

      config.module.rules.push({
        test: /\.(glsl|vs|fs|vert|frag)$/,
        type: 'asset/source',
      })

      config.module.rules.push({
        test: /\.(txt|node)$/,
        loader: 'raw-loader',
      })

      return config
    },
  }),
)

export default nextConfig

I have an ENV variable on Vercel which I set like NEXT_PUBLIC_SITE=view next build, so it can host multiple sites. Then I have this folder structure:

./app
  /layout.tsx
  /site
    /view # site1
      /page.tsx
    /mill # site2
    # ...

So why wouldn't it be loading my viewport data? Do I need to put a layout in each site folder or something? Or export it explicitly in each page.tsx instead?

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:51 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.4.0
  Yarn: 1.22.19
  pnpm: 9.1.0
Relevant Packages:
  next: 14.2.3 // There is a newer version (14.2.4) available, upgrade recommended!
  eslint-config-next: 13.1.5
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.4) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Example

No response

[lancejpollard]

I'll have you know, too, that I have error pages at the top level like this too, and they are only working locally, not on Vercel. Locally, visiting a non-route goes to the "Not Found" error page and shows correctly. But on Vercel, it shows the default Vercel error page.

app/not-found.tsx
app/error.tsx
app/global-error.tsx

Is it something to do with my multi-site and localization (i18n) approach here that is throwing things off? Seems like a related problem to the viewport meta tag issue I'm describing.

[lootopia-eu]

Hello, did you find any solution ? We are facing the same issue...

[lancejpollard]

No, just exporting viewport in every page instead.