javascript - React 16.14.0: Eroarea nu a fost prinsă ReferenceError: exports nu este definit

Sunt autorul bibliotecii next-translate și lucrez la o versiune experimentală la care primesc o eroare cu React 16.14.0 și nu înțeleg de ce se întâmplă asta. Actualizarea React la versiunea 17 atunci funcționează bine, dar nu vreau să forțez pe toată lumea care folosește noua versiune a bibliotecii mele să își migreze versiunea de React.

Am creat un exemplu reproductibil de eroare: https://github.com/aralroca/next-translate-error-reproduction

Pentru a reproduce această problemă:

• Clonează acest depozit
• Rulați yarn && yarn dev
• Deschide localhost:3000
• Deschide uneltele pentru dezvoltatori

Error was not caught ReferenceError: exports is not defined

Și codul prerelease al bibliotecii mele este aici:

• https://github.com/vinissimus/next-translate/tree/1.0.0-experimental.14

tsconfig.json

{
  "compilerOptions": {
    "strict": false,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "removeComments": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "declaration": true,
    "lib": ["esnext", "dom"],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./lib/esm"
  },
  "include": ["./src"]
}

tsconfig-cjs.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./lib/cjs",
    "declaration": false
  }
}

Și acesta este codul pachetului:

• https://www.runpkg.com/

Dacă cineva știe de unde a apărut această eroare și mă poate ajuta, aș fi foarte recunoscător! Am încercat să o rezolv de câteva zile, dar sunt puțin pierdut pentru că nu știu de ce se întâmplă... Mulțumesc!

Notă: Se pare că se întâmplă doar în dezvoltare, rularea yarn build && yarn start funcționează bine.

Răspuns #1

Am reparat deja, dar dacă sunt sincer, nu am înțeles de ce... Hai să vedem dacă cineva poate să mi-o explice!

Depanam și am văzut că era ceva în codul bibliotecii mele care a făcut ca TypeScript să se compileze greșit. Așa că am decomentat linie cu linie, până am văzut ce era în neregulă cu linia:

import App from 'next/app'

// Inside getInitialProps wrapper...
App.getInitialProps() // THIS LINE

Se pare că atunci când comentezi App.getInitialProps(), TypeScript se compilează bine. Din fericire, am reușit să renunț la această linie de cod în biblioteca mea și acum, cu versiunea prerelease 1.0.0-experimental.15, se pare că funcționează bine cu React 16.

Nu înțeleg cu adevărat de ce s-ar putea întâmpla asta, ar putea fi pentru că am Next.js ca peerDependency? Sper că cineva poate să-mi clarifice de ce se întâmpla asta 🙏

Răspunsul #2

Mă bucur că ai găsit bug-ul, iată explicația cazului tău.

Să comparăm rezultatul compilat al ambelor versiuni:

Uitați-vă în jur la ln:54 în ambele fișiere 1.0.0-experimental.14 1.0.0-experimental.15.

var react_1 = __importDefault(require("react"));

// The key different is the exclusion of this line:
var app_1 = __importDefault(require("next/app"));

var I18nProvider_1 = __importDefault(require("./I18nProvider"));
var loadNamespaces_1 = __importDefault(require("./loadNamespaces"));

Pentru că nu mai folosești App.getInitialProps(), import App from 'next/app' este de asemenea eliminat de TypeScript. Problema reală se află în modulul next/app.

Urmând firimiturile, vedem că next/app reexportă simplu next/dist/pages/_app:

module.exports = require('./dist/pages/_app')

În ceea ce privește conținutul lui ./dist/pages/_app, mergi să verifici acest link. Face referire la exports ca o variabilă globală peste tot, și asta cauzează problema: Error was not caught ReferenceError: exports is not defined

Problema este clară, codul din next/dist/pages/_app.js este inclus în codul JS împachetat livrat paginii web fără a fi transformat corespunzător de webpack.

Dar după acest punct nu pot oferi ajutor suplimentar deoarece nu sunt familiarizat cu stack-ul next.js. Cred că trebuie să ajustezi configurația webpack pentru a face ceva în legătură cu variabila globală exports.