수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

programing

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

oldcodes 2023. 4. 4. 22:15

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

iframe에 문제가 생겼어요.오늘까지는 모든 것이 예상대로 작동하고 있었다.오늘 아주 간단한 Modal 컴포넌트를 추가했는데 왠지 iframe이 나타나기 시작했습니다.파일을 편집하고 핫 새로고침이 완료되면 나타납니다.또한 이 문제와 함께 콘솔에 "Uncatched ReferenceError: process is not defined"라는 오류가 표시됩니다.누가 이것 좀 도와주시겠어요?

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import Close from "../static/assets/close-white.svg"

const trapStyles = {
    position: 'absolute',
    opacity: 0
}
const Test = () => {

    return ReactDOM.createPortal(
        <div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>,
        document.getElementById("app")
    )
}

const Modal = ({ open, onClose, children }) => {

    useEffect(() => {

        if (open)document.getElementById("app").classList.add("ReactModal__Body--open");

        return () => {
            document.getElementById("app").classList.remove("ReactModal__Body--open")
        }
    })
    if (!open) return null

    return ReactDOM.createPortal(
        <>
            <Test />
            <div className="ReactModal__Overlay--after-open">
                <div className="modal-form-page"
                     tabIndex="-1" role="dialog" aria-modal="true">
                    <button onClick={onClose} className="close-modal">
                        <img id="close-button" alt="close" src={Close}/>
                    </button>
                    { children }
                </div>
            </div>
        </>,
        document.getElementById("ModalPortal")
    )
};

export default Modal;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="#000000" name="theme-color"/>
    <link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
    <title>React App</title>
</head>
<body id="app">
<noscript>You need to enable javascript to run this website</noscript>
<div id="content">
<-- All other content render here -->
</div>
<div class="ReactModalPortal" id="ModalPortal"></div>
</body>
</html>

Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload (index.js:1)
4043 @ VM128:2
r @ VM128:2
8048 @ VM128:2
r @ VM128:2
8641 @ VM128:2
r @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
e.onload @ index.js:1
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
load (async)
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
Promise.then (async)
tryApplyUpdates @ webpackHotDevClient.js:271
handleSuccess @ webpackHotDevClient.js:106
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:203

react-scripts v5로 업그레이드하는 것이 항상 해결책은 아닙니다.

이 버그의 완전한 이유는 다음과 같습니다.간단히 요약하면 다음과 같습니다.

는 에러, 에러에 것입니다.react-error-overlay(의 종속성이기 때문에 많은 사람들이 들어본 적이 없을 것입니다).이 패키지의 종속성이 업데이트되어 지원되었습니다.webpackv5와 되지 않습니다.react-scriptsv4.

방법 1(패키지 버전 덮어쓰기)

「」로 하는 react-scripts. v5를 고정하는 다른 해결 .또 다른 회피책으로 핀 접속을 시도할 수도 있습니다.react-error-overlay 「」으로6.0.9:

yarn.lock ★★★★★★★★★★★★★★★★★」package-lock.json츠키다

실 사용

실은 개봉 후 해상도 필드를 고려합니다.

"resolutions": {
  "//": "See https://github.com/facebook/create-react-app/issues/11773",
  "react-error-overlay": "6.0.9"
}

실 작업 공간의 경우 위의 해상도를 루트에 배치하십시오.package.json, 문제가 있는 폴더에는 없습니다.이 문제의 코멘트를 참조해 주세요.

npm 사용(>=v8.3.0)

「」에 하는 것.resolutions은 npm입니다.overrides.

"overrides": {
  "react-error-overlay": "6.0.9"
},

npm 사용 (<8.3.0)

하셔야 합니다.npm는 을 합니다.resolutions[ ] 를 실행하는 npm install인스톨을 자동화하려면 , 다음의 회답을 참조해 주세요.

방법 2(웹 팩 플러그인 사용)

또 다른 (인기적이지 않은) 회피책은 웹 팩 플러그인을 사용하는 것입니다.

plugins:[
  new webpack.DefinePlugin({
      process: {env: {}}
  })
]

(v6.3.0+)를 사용하는 경우는, 다음의 순서를 변경하기만 하면 됩니다.craco.config.js다음 파일을 사용하여 해당 플러그인을 추가합니다.

{
  ...
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {env: {}}
        })
      ]
    }
  }
}

사용자의 경우 이 답변 또는 이 github 코멘트를 참조하십시오.

이 마지막 방법은 리액션 작업을 위해 웹 팩을 직접 터치할 필요가 없는 CRA 사용자가 많지 않기 때문에 일반적이지 않습니다.

react-scripts를 5.0.0으로 업데이트하려고 했지만 소용이 없었습니다.

솔루션: -

「」를 사용하고 npm: -

npm i -D react-error-overlay@6.0.9

「」를 사용하고 yarn: -

yarn add -D react-error-overlay@6.0.9

이 코드를 패키지에 추가합니다.json

"devDependencies": {
  "react-error-overlay": "6.0.9"  
}

후 ★★★npm install명령어를 입력합니다.인터넷에서 이틀 동안 스크롤을 했더니 효과가 있었어요.

수정이 완료될 때까지(아마 이 PR), npm(실 이외)을 사용하는 모든 사용자에게 솔루션은 다음과 같습니다.

패키지에 추가합니다.json:

"resolutions": {
    "react-error-overlay": "6.0.9"
},

"scripts":{
    "preinstall": "npx npm-force-resolutions",
    ....
},

"devDependencies":{
    "react-error-overlay": "6.0.9",
...
}

그리고 나서

npm install

이 문제는 react-scripts를 5.0.0으로 업데이트하여 해결되었습니다.

나는 최고의 해결책을 찾았다.

이 잃어버렸기 입니다.window.process React is node,respect hotloads는 node에 하지 않습니다.

따라서 앱이 로드될 때 브라우저에 삽입해야 합니다.

은 을 때 쓰다에 추가해 주세요.App.js

useEffect(() => {
    window.process = {
      ...window.process,
    };
  }, []);

이 이 보다 하는 것을 제안하고 있습니다.react-error-overlay로로 합니다.6.0.9 using이2020202020(2022년 2월 )을 사용하고 있었습니다.react-scripts 5.0.0 ★★★★★★★★★★★★★★★★★」react-error-overlay 6.0.10오버레이 덮어쓰기를 시도하기 전에 먼저 입력해 주세요.

CRA 애플리케이션(smac89에서 권장하는 바와 같이)에서 웹 팩 설정을 서둘러 정의하는 대신 다운그레이드했습니다.react-scripts로로 합니다.4.0.3.

하면 잘 요.react-scripts: 4.0.3react-error-overlay로로 합니다.6.0.10.

그래서 내 해결책은:

★★"react-scripts": "4.0.3"sonj어jjjjj.
잠금 파일(yarn.lock 또는 package-lock.json)과 node_modules를 삭제합니다.
설치 실행

웹을 사용하는 실행npm install -D dotenv-webpack를 사용하는 npm install -D @types/dotenv-webpack.
다음 웹 에서 "하다"를 합니다.import Dotenv from "dotenv-webpack"; ★★★★★★★★★★★★★★★★★.

...
plugins: [
    ...
    new Dotenv(),
],
...

https://github.com/mrsteele/dotenv-webpack/blob/master/README.md 를 참조해 주세요.

다른 모든 것을 시도해 본 결과, 이것은 나에게 효과가 있었다.

나에게 효과가 있었던 유일한 해결책은 @smac89가 craco에 쓴 것을 수정한 것입니다.먼저 프로세스를 종속성으로 추가합니다.

yarn add process or npm i process

그런 다음 이 행을 craco.config.js에 추가합니다.

const webpack = require('webpack');

module.exports = {
webpack: {
     ...
     plugins: {
        add: [
            new webpack.ProvidePlugin({
                process: 'process/browser.js',
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            }),
        ],
      },
    },
};

또한 프로젝트를 시작할 때마다 콘솔에 다음 경고가 표시되지 않습니다.

DefinePlugin의 경고 'process.env'에 대한 값이 충돌합니다.

react-scripts 4.0.3에서 5.0.0으로의 업그레이드는 성공하지 못했습니다.마지막으로 효과가 있었던 것은 위에서 제안한 솔루션뿐입니다.

실 사용

  "devDependencies": {
        "react-error-overlay": "6.0.9"
      },
  "resolutions": {
        "react-error-overlay": "6.0.9"
      }

그 후 실 설치

npm의 경우 "결의"는 "결의"로 대체되어야 한다고 생각합니다.

> 을 사용하고 있는 는, npm > v8.3 을 사용할 수 .overrides your your your your your 에서와 같이package.json.

  "overrides": {
    "react-error-overlay": "6.0.9"
  }

재정의에 대한 자세한 내용은 여기를 참조하십시오.

이 문제는 에서의 급격한 변화이다.6.0.10 , , , .react-dev-utils는, 「이 버전」을 해도, 이을 인스톨 합니다.react-error-overlay로로 합니다.6.0.9오버라이드를 사용하는 것이 필요한 이유입니다.

Vite를 사용하여 반응 앱을 생성한 경우 환경 변수 앞에 .env 파일의 VITE_APP를 붙입니다.

VITE_APP_API_URL=http://localhost:5000

다음의 방법으로 액세스 할 수 있습니다.

import.meta.env.VITE_APP_API_URL

const createDeck = async (title) => {
  const response = await request.post(`${import.meta.env.VITE_APP_API_URL}/deck`, {title});
  return response.data;
}

자세한 내용은 https://vitejs.dev/guide/env-and-mode.html을 참조하십시오.

react-scripts 4.0.3에서 5.0.0으로 업그레이드한 것이 도움이 되었습니다.

다음과 같은 오류가 발생하였습니다(craco를 사용하는 경우 관련).

TypeError: match.loader.options.플러그인은 기능이 아닙니다.

이 문제는 @weiwei에 의해 해결되었습니다.

오늘(2월 14일) ReactJS 앱용 Docker 컨테이너를 사용하여 동일한 문제에 직면하여 리액트 스크립트 버전을 4.0.3으로 다운그레이드하고 버전 6.0.9에 react-error-overlay를 설치했습니다.순서는 다음과 같습니다.

package-lock.json 파일을 삭제합니다.
패키지에 넣어주세요.json 파일
1. 의존관계 "react-scripts"를 바꿉니다(4.0).3인치
2. react-error-overlay를 사용하여 dev 의존관계에 react-error-overlay 추가: "6.0.9"
업데이트 npm: npm 업데이트

시간 절약에 도움이 됐으면 좋겠네요, 치어스

create-react-app과 customize-cra를 함께 사용하는 사용자는 addWebPackPlugin을 사용하여 @smac89의 메서드2 솔루션을 사용할 수 있습니다.이 방법은 도움이 됩니다.

react-flash: 5.0.0 Web 팩: 5.64.4

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      process: { env: {} },
    })
  )
);

이 솔루션은 npm 시작 시 경고를 발생시키지만 응용 프로그램은 올바르게 컴파일됩니다.

WARNING in DefinePlugin
Conflicting values for 'process.env'

이 경고로 브레이크는 걸리지 않았습니다만, 수정 방법을 알고 있는 분은, 이 스레드에 회답해 주세요.

warn.lock 또는 package-lock.json 파일에서 문자열을 찾습니다.

"react-error-overlay@npm:^6.0.9":
  version: 6.0.10 <-- here problem
  etc...

대체하다

react-error-overlay@^6.0.9:
  version "6.0.9"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

저장된 파일 및 실행 실 설치

react-script 버전을 업데이트한 지 얼마 안 됐어요.

  "dependencies": {    
    "react-scripts": "5.0.0",
  },

reactJs에서도 같은 문제가 발생하여 다음 단계로 수정했습니다.

패키지에 추가합니다.json:

"preinstall": { "preinstall": "npx npm-force-recolutions"}
"해결책": {"param-error-display": "6.0.9"}

고마워, 칼렙이 말한대로 이건 나한테 효과가 있어

웹 팩을 사용하는 경우 npm install -D dotenv-webpack을 실행하고 typescript npm을 사용하는 경우 -D @types/dotenv-webpack을 설치합니다.그런 다음 웹 팩 구성에서 "dotenv-webpack"에서 Import Dotenv를 추가합니다.

plugins: [
    ...
    new Dotenv(),
],

리액트 스크립트의 v5로 이행하면 다른 문제가 발생했기 때문에 가장 많은 표를 얻은 답변을 사용하는 것도 효과가 없었습니다.패키지에 추가하는 중입니다.json은 다음을 수행했습니다.

      "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

주의: 이 응답은 다음과 같습니다.process is not defined 관한 index.html OP 아니라 OP.입니다.

은 아마 이 사용하려고 일 거예요.process.env directly directly에index.html하지 않고<% %>

은 이렇게 있습니다.index.html:

<% if (process.env.NODE_ENV !== 'production') { %>
  <script>
    /* Disable Google Analytics locally */
    window["ga-disable-G-something"] = true;
  </script>
<% } %>

잘못된 사용법(문제일 수 있음):

<script>
if (process.env.NODE_ENV !== 'production') {
  /* Disable Google Analytics locally */
  window["ga-disable-G-something"] = true;
}
</script>

react-scripts를 v4에서 react-scripts: "^5.0.0"으로 업그레이드하면 도움이 될 것 같습니다.

언급URL : https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined

'programing' 카테고리의 다른 글

Spring Boot의 application.yml 내에서 롤링 파일어펜더를 설정하는 방법 (0)	2023.04.04
현재 카테고리를 가져오는 방법 (0)	2023.04.04
angular에서 인젝터를 검색할 수 없습니다. (0)	2023.04.04
객체 배열에서 리액트 컴포넌트 렌더링 (0)	2023.04.04
Angularjs 코드/네임 규칙이 존재합니까? (0)	2023.04.04

현재글수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

mysql, spring-boot, ReactJS, PowerShell, git, MongoDB, Android, excel, Ajax, WPF, MariaDB, JSON, AngularJS, CSS, ASP.NET, JQuery, Wordpress, c, oracle, Python,

Today :
Yesterday :

oldcodes

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

방법 1(패키지 버전 덮어쓰기)

실 사용

npm 사용(>=v8.3.0)

npm 사용 (<8.3.0)

방법 2(웹 팩 플러그인 사용)

솔루션: -

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

수집되지 않은 참조 오류 반응: 프로세스가 정의되지 않았습니다.

방법 1(패키지 버전 덮어쓰기)

실 사용

npm 사용(>=v8.3.0)

npm 사용 (<8.3.0)

방법 2(웹 팩 플러그인 사용)

솔루션: -

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바