Recherche de site Web

typescript - Comment désactiver resolveJsonModule pour un seul fichier JSON dans une application NextJs ?

Je suis en train de créer une application Next.js, en la déployant avec Vercel. Tout fonctionnait bien, jusqu'à ce que je fasse récemment quelques modifications sur un gros fichier JSON, ce qui a encore augmenté sa taille d'environ 20 %. L'augmentation de taille semble avoir dépassé une sorte de limite, et je reçois maintenant des erreurs Webpack 5, qui semblent être dues à la résolution des types TypeScript.

J'importe le fichier JSON directement avec un import. D'après ce que j'ai pu comprendre, il semble que l'option de compilation resolveJsonModule dans tsconfig.json soit responsable de dire à webpack d'essayer de résoudre les types des fichiers JSON à la volée, afin qu'il puisse vraisemblablement vérifier que je fais des choses sensées avec le fichier JSON.

C'est en fait un fichier assez simple - c'est juste un tableau d'objets FoodItem assez simples comme suit (exemple illustratif ci-dessous) :

import allFoodOriginal from '../data/all-food-data.json'

interface FoodData {
  Calories: string,
  Kilojoules: string
}

interface FoodItem {
  id: number,
  name: string,
  folders: string[],
  slug: string,
  image?: string,
  data?: FoodData
}

const allFood = allFoodOriginal as FoodItem[]

Le fichier JSON lui-même fait environ 1,4 million de lignes, ce qui correspond à environ 82 021 éléments. Il semble que ce soit tout simplement trop volumineux, car il provoque l'erreur dans les journaux ci-dessous lors de la compilation dans le déploiement Vercel.

14:39:23.522    Installing dependencies...
14:39:28.885    npm WARN @babel/[email  requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
14:39:28.896    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email  (node_modules/@next/swc-darwin-arm64):
14:39:28.896    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email : wanted {"os":"darwin","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
14:39:28.907    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email  (node_modules/@next/swc-win32-x64-msvc):
14:39:28.908    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email : wanted {"os":"win32","arch":"x64"} (current: {"os":"linux","arch":"x64"})
14:39:28.922    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email  (node_modules/fsevents):
14:39:28.922    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email : wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:39:28.933    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email  (node_modules/@next/swc-darwin-x64):
14:39:28.933    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email : wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
14:39:28.934    
14:39:28.935    updated 1 package in 4.846s
14:39:29.060    
14:39:29.060    50 packages are looking for funding
14:39:29.060    run `npm fund` for details
14:39:29.061    
14:39:29.847    Detected Next.js version: 11.1.2
14:39:29.850    Running "npm run build"
14:39:30.131    
14:39:30.131    > [email  build /vercel/path0
14:39:30.131    > next build
14:39:30.132    
14:39:30.868    info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
14:39:31.072    info - Checking validity of types...
14:45:11.987    
14:45:11.989    > Build error occurred
14:45:12.003    RangeError: Value undefined out of range for undefined options property undefined
14:45:12.004    at Map.set (<anonymous>)
14:45:12.004    at recursiveTypeRelatedTo (/vercel/path0/node_modules/typescript/lib/typescript.js:62613:30)
14:45:12.004    at isRelatedTo (/vercel/path0/node_modules/typescript/lib/typescript.js:62112:34)
14:45:12.004    at checkTypeRelatedTo (/vercel/path0/node_modules/typescript/lib/typescript.js:61742:26)
14:45:12.004    at isTypeRelatedTo (/vercel/path0/node_modules/typescript/lib/typescript.js:61694:24)
14:45:12.005    at removeSubtypes (/vercel/path0/node_modules/typescript/lib/typescript.js:58445:33)
14:45:12.005    at getUnionType (/vercel/path0/node_modules/typescript/lib/typescript.js:58547:31)
14:45:12.005    at checkArrayLiteral (/vercel/path0/node_modules/typescript/lib/typescript.js:70038:17)
14:45:12.005    at checkExpressionWorker (/vercel/path0/node_modules/typescript/lib/typescript.js:76283:28)
14:45:12.005    at checkExpression (/vercel/path0/node_modules/typescript/lib/typescript.js:76204:38)
14:45:12.146    npm ERR! code ELIFECYCLE
14:45:12.146    npm ERR! errno 1
14:45:12.150    npm ERR! [email  build: `next build`
14:45:12.150    npm ERR! Exit status 1
14:45:12.151    npm ERR!
14:45:12.151    npm ERR! Failed at the [email  build script.
14:45:12.151    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
14:45:12.157    
14:45:12.157    npm ERR! A complete log of this run can be found in:
14:45:12.158    npm ERR! /vercel/.npm/_logs/2021-10-26T13_45_12_151Z-debug.log
14:45:12.174    Error: Command "npm run build" exited with 1

En exécutant localement npm run build, je reçois simplement une erreur de mémoire du tas Javascript.

Je suis heureux de ne pas avoir à m'occuper de la vérification de type du fichier JSON, mais je ne sais pas comment désactiver la vérification de type depuis mon application NextJs.

Si je définis resolveJsonModule sur false, il est automatiquement remis à true par le processus de build qui prétend savoir mieux.

Y a-t-il des options pour désactiver la vérification de type uniquement pour ce fichier JSON ?

Mise à jour

Il est apparemment possible de surmonter cette erreur spécifique de vérification de type en chargeant le fichier JSON avec le module fs :

import fs from 'fs'
import path from 'path'
const allFood = JSON.parse(fs.readFileSync(path.join(process.cwd(), '/data/all-food-data.json'), 'utf-8')) as FoodItem[]

Cependant, cela a introduit une erreur différente, où les pages ne se généraient plus dynamiquement à la demande, et à la place j'obtenais une erreur 404. Si je mets l'appel fs.readFileSync() à l'intérieur de la fonction getStaticProps, alors j'obtiens une erreur 500. Ces erreurs n'étaient présentes que lors du déploiement sur Vercel, et la version locale fonctionnait toujours correctement.

Il peut y avoir un moyen de résoudre ces problèmes, mais j'ai fini par trouver une solution de contournement différente :

Solution de contournement

Il a suffi de diviser le fichier JSON en deux fichiers plus petits et de les fusionner à l'exécution pour résoudre le problème.

import allFood1 from '../data/all-food-data.json'
import allFood2 from '../data/all-food-data-2.json'
const allFood = [...(allFood1 as FoodItem[]), ...(allFood2 as FoodItem[])] as FoodItem[]

Ce n'est pas vraiment une réponse particulièrement satisfaisante, donc je vais laisser la question sans réponse dans l'espoir de trouver une meilleure façon de la surmonter.