„Möglicherweise benötigen Sie einen zusätzlichen Loader, um das Ergebnis dieser Loader zu verarbeiten.“

Ich versuche derzeit, eine State Management Library für ReactJs zu erstellen. Aber sobald ich es in mein React-Projekt (erstellt mit create-react-app), fängt es an, diesen Fehler zu löschen:

Failed to compile.

path/to/agile/dist/runtime.js 116:104
Module parse failed: Unexpected token (116:104)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (subscriptionContainer instanceof sub_1.CallbackContainer) subscriptionContainer.callback(); // If Component based subscription call the updateMethod which every framework has to define
|
>       if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer));
|     }); // Log Job
|

Wenn ich die im Fehler erwähnten hervorgehobenen Codezeilen auskommentiere, springt es an eine andere Stelle und beschwert sich dort. Es kann sich aber nicht um einen Syntaxfehler handeln, denn dann würde sich TypeScript auch in der IDE beschweren.

So funktioniert das Tool:
Zu Beginn müssen Sie ein Framework definieren, in diesem Fall React. Anschließend können Sie einen Status erstellen und diesen Status über einen Hook einer React-Funktionskomponente abonnieren. Der Hook, der zum Binden des Status an die React-Komponente verwendet wird, erstellt einfach einen Rückruf, der ein erneutes Rendern auslöst (durch Mutieren eines useReducer) und weist diesen Rückruf dem abonnierten Zustand zu.

Wenn Sie mehr wissen möchten, schauen Sie sich dieses Repo an:
https://github.com/agile-ts/agile

Abhängigkeiten:

Bibliothek zur Statusverwaltung von Drittanbietern:

  "dependencies": {
    "@types/chai": "^4.2.12",
    "@types/mocha": "^8.0.2",
    "chai": "^4.2.0",
    "eslint-config-prettier": "^6.11.0",
    "mocha": "^8.1.1",
    "prettier": "2.0.5",
    "ts-node": "^8.10.2",
    "tsc-watch": "^4.1.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.7"
  }

• Knoten: v14.8.0

Reaktionsprojekt:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2",
    "agile-framework": "file:../../"
  },

• Reagieren: 16.13.1
• NPM: 6.14.7

Das Problem ist, dass Sie ES2020 ausgeben dist/. Wenn Sie sich die Zeile ansehen, über die es sich beschwert:

if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer));
                                                                                              // ^^                                         // ^^

Sie können sehen, dass es verwendet wird optionale Verkettung Operator im ausgegebenen Code. Verbraucher Ihrer Bibliothek müssen daher über eine entsprechende Konfiguration verfügen, um mit dieser Art von Code umgehen zu können. Ihr Beispielkonsument, die CRA-App, verwendet Babel; obwohl das Setup tut Habe die Transformation für optionale Verkettung, sie wird nur auf dem Quellcode für die React-App selbst ausgeführt, nicht seine Abhängigkeiten (einschließlich Ihrer Bibliothek).

Eine Möglichkeit, das Problem zu beheben, besteht darin, weniger modernen Code auszugeben, wodurch der Konfigurationsaufwand für Verbraucher verringert wird. Wenn Sie beispielsweise auf ES6 abzielen, verwenden Sie die folgenden Einstellungen in tsconfig.json:

{
    "target": "ES6",
    "lib": ["DOM", "ES6", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
    // ...
}

Die React-App kann zumindest gestartet werden, ohne dass Sie Ihren Quellcode ändern müssen.

Falls Sie nicht der Autor der Bibliothek sind oder diese nicht ändern möchten, wie die akzeptierte Antwort nahelegt, können Sie wie folgt vorgehen:

1. Ändern Sie die Browserliste, wie @adlerer vorschlägt:

   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   

   (Stellen Sie sicher, dass Sie keine spezielle Konfiguration für haben development In browserslist)

2. NPM-Cache leeren:

   npm cache clean --force
   

3. Installieren Sie Dinge neu, wie @Gel vorschlägt:

   rm -rf node_modules && rm -f package-lock.json && npm i
   

Das hat mir nach stundenlangen Recherchen und Versuchen geholfen.

Obwohl es spät ist, kann es trotzdem jemandem helfen. In meinem Fall habe ich vergessen, das hinzuzufügen

"jsx": "react"

in meiner tsconfig.json.

In meinem Fall werden konservativere Kompilierungsziele festgelegt package.json hat geholfen, dieses Problem zu lösen:

"browserslist": [
">0.2%",
"not dead",
"not op_mini all"],

Das Problem in diesem Fall ist, dass die Version 3.2.0 von React-Leaflet nicht für jedes Projekt funktioniert (ich weiß nicht wirklich warum). Ich arbeite mit Reagieren unter Verwendung von CRA. Beachten Sie dies, bevor Sie etwas unternehmen. Jetzt die Lösung …

1. React-Leaflet deinstallieren
2. Gehe zu package.json und fügen Sie diese Zeilen ein

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",  
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",

So habe ich das Problem gelöst. Der Link zur Antwort auf einer anderen Website.
https://www.gitmemory.com/issue/PaulLeCam/react-leaflet/891/860223422

In meinem Fall habe ich versucht, Abhängigkeiten von „react-leaflet“ in mein altes Projekt zu importieren, aber kurz nach dem Importieren der Abhängigkeiten stand ich vor dem gleichen Problem. Ich habe mein Problem durch diese Verfahren gelöst.

Im Terminal:

rm -rf node_modules && rm -f package-lock.json
npm cache clean --force

Ich weiß, dass das vielleicht irrelevant klingt, aber im nächsten Schritt habe ich diese fünf Abhängigkeiten in „package.json“ auf die neuesten Versionen aktualisiert:

1- „@testing-library/jest-dom“

2- „@testing-library/react“

3- „@testing-library/user-event“

4- „Reaktionsskripte“

5- „Webvitale“

Ich vermute, dass das Problem irgendwie mit den beiden letzten Abhängigkeiten zusammenhängt, aber ich habe für alle Fälle alle fünf aktualisiert.

dann im Terminal:

npm i
sudo npm update -g