CODEWITHSUNDEEP
javascriptreactjstypescriptnpmwebpack
BennoDev
BennoDev

Reputation: 1357

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

Upvotes: 97

Views: 284895

Answers (9)

Yogi Arif Widodo
Yogi Arif Widodo

Reputation: 679

in my case specify to nextJS 14

  1. i have make a folder like @reporting-precident
  2. then its error similar about ...s/next-app-loader.js You may need an additional loader to handle the result of these loaders.
  3. solved by rename folder to @reportingPrecident

these error when running npm run build

Upvotes: 0

Yassin Slati
Yassin Slati

Reputation: 11

this solved my problem, https://github.com/TanStack/table/issues/4500#issuecomment-1523568348

"resolutions": {
    "acorn": "^8.5.0"
},

Upvotes: 1

William Hu
William Hu

Reputation: 16149

I came across this issue because I should use .tsx file but I used .ts.

Upvotes: 2

Reinaldo Zambrano
Reinaldo Zambrano

Reputation: 31

The issue in this case is that the version 3.2.0 of react-leaflet doesn't work for every project (i don't really know why). im working with react using CRA take note before doing anything Now the solution...

  1. uninstall react-leaflet
  2. Go to package.json and paste this lines
"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",  
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",

that's the way i solved the problem. the link to the answer in another website. https://www.gitmemory.com/issue/PaulLeCam/react-leaflet/891/860223422

Upvotes: 2

Aryan Shridhar
Aryan Shridhar

Reputation: 251

Though it's late but still it may help someone. In my case, I forgot to add the

"jsx": "react"

in my tsconfig.json.

Upvotes: 13

Benyamin
Benyamin

Reputation: 87

In my case I was trying to import dependencies from "react-leaflet" to my old project but then just after importing dependencies I faced the same issue. I solved my problem by these procedures.

In terminal:

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

I know this may sound irrelevant but in next step I updated these five dependencies in "package.json" to latest versions:

1- "@testing-library/jest-dom"

2- "@testing-library/react"

3- "@testing-library/user-event"

4- "react-scripts"

5- "web-vitals"

I guess the problem is somehow related to two last dependencies but I updated all five of them just in case.

then in terminal:

npm i
sudo npm update -g

Upvotes: 1

Piotr Ma&#39;niak
Piotr Ma&#39;niak

Reputation: 828

In case you are not the author of the library, or you don't want to change it as the accepted answer suggests, you can do as follows:

  1. change browserslist as @adlerer suggests:

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

    (make sure you don't have special config for development in browserslist)

  2. clear npm cache:

    npm cache clean --force

  3. reinstall things like @Gel suggests:

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

This is what helped me after hours of research and trials.

Upvotes: 48

adlerer
adlerer

Reputation: 1125

In my case setting more conservative compilation targets in package.json helped to resolve this issue:

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

Upvotes: 6

jonrsharpe
jonrsharpe

Reputation: 122023

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.

Upvotes: 49

Related Questions