javascriptreactjstypescriptnpmwebpack

"You may need an additional loader to handle the result of these loaders."

I am currently trying to build a State Management Library for ReactJs. But as soon as I implement it into my React project (created with create-react-app), it starts dropping this error:

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
|

If I comment out the highlighted lines of code mentioned in the error, it jumps to another point and complains there. But it can't be a syntax error because then TypeScript would complain in the IDE, too.

How the tool works: At the start you have to define a framework, in this case React. Then you can create a State and subscribe this State to a React Functional Component via a Hook. The Hook used to bind the State to the React Component simply creates a callback which triggers a re-render (via mutating a useReducer) and assigns this callback to the subscribed State.

If you want to know more checkout this repo: https://github.com/agile-ts/agile

Dependencies:

Third Party State Management library:

  "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"
  }

React Project:

"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:../../"
  },
Solution

  • The problem is that you're emitting ES2020 to dist/. If you look at the line it's complaining about:

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

    you can see it's using the optional chaining operator in the emitted code. Consumers of your library will therefore need to have appropriate configuration to handle this kind of code. Your example consumer, the CRA app, is using Babel; although the setup does have the transform for optional chaining, it's only run on the source code for the React app itself, not its dependencies (including your library).

    One option for fixing it is to emit less modern code, which will reduce the amount of configuration needed by consumers. For example, if you target ES6 using the following settings in tsconfig.json:

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

    the React app can at least start without you needing to change your source code.