Nuxt3 project bug sorting (1): After the Nuxt3 project executes the nuxt build build command, the console date-fns reports an error

After the Nuxt3 project executes the nuxt build build command, the console date-fns reports an error

date-fns is a date tool library. The reason for the error is that some date components are introduced on the page, such as the n-date-picker component of naive-ui:

<span class="filterDate">
  <n-date-picker
    v-model:value="historyDay"
    type="date"
    clearable
    placeholder="历史"
    @update:formatted-value="onMyDateChange"
  />
</span>

We only need to add configuration to the nuxt.config.ts configuration file of the Nuxt3 project:

export default defineNuxtConfig({
    
    
  ......
  build: {
    
    
    transpile:
      process.env.NODE_ENV === 'production'
        ? [
          'naive-ui',
          'vueuc',
          '@css-render/vue3-ssr',
          '@juggle/resize-observer',
          "date-fns", // 加入后可解决报错
        ]
        : ['@juggle/resize-observer']
  },
  vite: {
    
    
    envDir: '~/env', // 指定env文件夹
    optimizeDeps: {
    
    
      include:
        process.env.NODE_ENV === 'development'
          ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
          : []
    },
  }
})

process.env.NODE_ENV === 'production' needs to determine whether it is a production environment, because this error will only be reported when the build command of nuxt build is executed .