"이러한 로더의 결과를 처리하기 위해서는 추가 로더가 필요할 수도 있다."

"이러한 로더의 결과를 처리하기 위해서는 추가 로더가 필요할 수도 있다."

나는 현재 ReactJs를 위한 국가 관리 도서관을 짓기 위해 노력하고 있다.그러나 React 프로젝트에 구현하는 즉시(로 생성된)create-react-app() 이 오류를 삭제하기 시작한다.

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
|

내가 오류에서 언급된 코드의 강조된 선을 언급하면, 그것은 다른 지점으로 뛰어올라 거기서 불평을 한다.그러나 그것은 구문 오류가 될 수 없다. 왜냐하면 그렇게 되면 TypeScript도 IDE에서 불평할 것이기 때문이다.

툴의 작동 방식:시작 시 프레임워크를 정의해야 한다. 이 경우 반응.그런 다음, 상태를 만들고 후크를 통해 반응 기능 구성요소에 이 상태를 등록할 수 있다.국가를 React 구성 요소에 바인딩하는 데 사용되는 후크는 단순히 콜백을 생성하여 (변형을 통해) 리렌더를 트리거한다.useReducer) 및 이 콜백을 구독 국가에 할당하십시오.

체크아웃에 대해 자세히 알고 싶으시면 https://github.com/agile-ts/agile를 방문하십시오.

종속성:

타사 상태 관리 라이브러리:

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

• 노드:v14.8.0

프로젝트 대응:

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

• 반응:16.13.1
• NPM:6.14.7

문제는 당신이 ES2020을 방출하고 있다는 겁니다.dist/이 선을 보면 다음과 같은 불평이 나온다.

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

내보낸 코드의 체인 연산자(선택 사항)를 사용하고 있는 것을 볼 수 있다.따라서 라이브러리의 소비자는 이러한 종류의 코드를 처리할 수 있는 적절한 구성이 필요하다.CRA 앱의 예: Babel을 사용하고 있는 고객. 설정에는 선택적 체인을 위한 변환 기능이 있지만, Raction 앱 자체에 대한 소스 코드에서만 실행되며, 종속성(라이브러리 포함)은 실행되지 않는다.

이를 고치는 한 가지 방법은 현대적인 코드를 덜 방출하는 것으로 소비자가 필요로 하는 구성량을 줄일 수 있다.예를 들어 다음 설정을 사용하여 ES6을 대상으로 하는 경우tsconfig.json:

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

리액션 앱은 소스코드를 변경할 필요 없이 적어도 시작할 수 있다.

이 경우 문제는 리액션 리프렛 버전 3.2.0이 모든 프로젝트에서 작동하지 않는다는 점이다(이유는 잘 모르겠다).나는 CRA를 사용하여 리액션으로 작업한다. 이제 해결책은...

1. react-react-required 제거
2. 패키지로 이동하십시오.json and paste 이 선들을 붙이다.

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
.0 properties/core": "=1.0.0 <1.1.0 | ^1.1",

그게 내가 문제를 해결한 방법이야아노테 웹사이트의 답에 대한 링크https://www.gitmemory.com/issue/PaulLeCam/react-leaflet/891/860223422

도서관의 작성자가 아니거나, 수용된 답변이 제시하는 대로 변경하고 싶지 않은 경우, 다음과 같이 할 수 있다.

1. @adler가 제안하는 대로 브라우저 목록을 변경하십시오.

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

   (특별한 구성을 가지고 있지 않은지 확인하십시오.development에browserslist)

2. npm 캐시 지우기:

   npm cache clean --force
   

3. @Gel과 같은 것을 재설치하면 다음과 같다.

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

이것이 몇 시간 동안 연구와 실험을 한 후에 나에게 도움이 된 것이다.

나는 최근에 Angular 7을 사용하고 있는데, 관리자가 우리의 결제 포털에 몇 가지 향상된 기능을 추가하고 싶다.지점을 당겼다가 내 지역구에서 운영했을 때도 같은 오류가 있었다.

나는 이것이 현재 버전의 프레임 작업에서 사용되는 js 웹팩, 프레임워크 버전 및 에크마스크립트 버전과 관련이 있다고 생각한다.

이 오류를 해결하기 위해 수행한 작업:

1. rm -rf node_modules
2. rm -f package-lock.json
3. npm install

내 경우에서 보다 보수적인 컴파일 목표를 설정package.json이 문제를 해결하는 데 도움이 됨:

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

참조URL: https://stackoverflow.com/questions/63423384/you-may-need-an-additional-loader-to-handle-the-result-of-these-loaders