수집되지 않은 참조 오류: 반응이 정의되지 않았습니다.

수집되지 않은 참조 오류: 반응이 정의되지 않았습니다.

리액트 시키려고 노력중이야JS는 이 자습서를 사용하여 레일과 함께 작동합니다.다음 오류가 발생하였습니다.

---

Uncaught ReferenceError: React is not defined

그러나 브라우저 콘솔에서 React 개체에 액세스할 수 있습니다.
여기에 기재된 바와 같이 public/dist/turbo-react.min.js도 추가하였습니다.//= require componentsline in application.laught를 참조해 주세요.또한.
var React = require('react')에러가 표시됩니다.
Uncaught ReferenceError: require is not defined

이 문제를 해결할 방법을 제안해 주실 수 있나요?

1 [편집 1]
다음 중 하나:
은 나의 ★★★★★★★★★★★★★★★★★★★★입니다.comments.js.jsx 일::

var Comment = React.createClass({
  render: function () {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
          {this.props.comment}
      </div>
      );
  }
});

var ready = function () {
  React.renderComponent(
    <Comment author="Richard" comment="This is a comment "/>,
    document.getElementById('comments')
  );
};

$(document).ready(ready);

이것은 나의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★.index.html.erb

<div id="comments"></div>

Babel 및 React 17을 사용하는 경우 Babel 구성에 runtime: "automatic"을 추가해야 할 수 있습니다.

».babelrc 파일은 과 같습니다config 음 、 음음음음 this 。

 {
     "presets": [
         "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
     ]
 }

를 빌드할 때이할 수 .webpack.config.json:

externals: {
    'react': 'React'
},

이 해결하지 .require('react')모듈을 변수, npm의 를 합니다.window라고 합니다.React이 와 함께 ), 파일이 를 외부에서 Resact는 javascript(javascript) 합니다).window.React존재합니다).

이 에러는, 사용중에 발생했습니다.

import ReactDOM from 'react-dom'

Import하지 않고 아래와 같이 변경하였습니다.

import React from 'react';
import ReactDOM from 'react-dom';

에러는 해결되었습니다. : )

pack을 하고 있는 는, 「필요에 React」를할 수 「React」는 필요 .require당신의 코드에 있어요.

webpack.config.js에 추가합니다.

plugins: [
   new webpack.ProvidePlugin({
      "React": "react",
   }),
],

http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin 를 참조해 주세요.

가능한 이유는 1. 리액트를 로드하지 않았습니다.JS는 당신의 페이지에 2. 위의 스크립트 뒤에 당신의 페이지에 로드했습니다.솔루션은 위에 표시된 스크립트보다 먼저 JS 파일을 로드하는 것입니다.

추신

생각할 수 있는 해결책

1. 라고 react설정 내의 후 webpack externals를 externals로 로드해야 합니다.bundle.js
2. 「 「 」라고 행이 것을 .import React from 'react';

추가 시도:

import React from 'react'
import { render } from 'react-dom'
window.React = React

before render()★★★★★★ 。

이로 인해 다음과 같은 오류가 팝업으로 반환되는 것을 방지할 수 있습니다.

리액션이 정의되어 있지 않습니다.

" " " React이 문제를 해결할 수 있습니다.

Santosh에 추가:

로드 가능한 리액트 기준

import React from 'react'

난 이 질문에 답을 알고 있다.하지만 저에게 효과가 있었던 것은 정답에 정확히 나와 있지 않기 때문에, 다른 사람에게 도움이 되었으면 하는 마음에 여기에 덧붙입니다.

나의index.js이 파일은 제가 이랬어요Uncaught ReferenceError: React is not defined.

import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById("root"));

추가 중import React from 'react';파일 맨 위에 있는 파일을 수정했습니다.

이제 나의index.js콘솔에는 에러가 표시되지 않습니다.

import React from 'react';
import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById("root"));

webpack.config.js나 그 외의 장소에서는 변경을 하지 않았습니다.

import React, { Component, PropTypes } from 'react';

이것 또한 효과가 있을 수 있습니다!

TypeScript 를 사용하고 있는 경우는, 다음의 순서에 따라 주세요.tsconfig.json가지다"jsx": "react"이내에"compilerOptions".

나도 같은 문제에 직면해 있었다.Import를 통해 해결했습니다.React그리고.ReactDOM다음과 같이 입력합니다.

import React from 'react';
import ReactDOM from 'react-dom';

코드에서 컴포넌트 정의의 철자를 소문자로 잘못 입력했기 때문에 이 오류가 발생하였습니다.react.createClass대문자 대신React.createClass.

다음을 사용했기 때문에 이 오류가 발생했습니다.

import React from 'react';

반응, 유형 스크립트 및 구획 작업 중

변경처:

import * as React from 'react';

https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-381817548에서 제안하는 문제 해결.

Import 순서가 이 에러의 원인이 되는 경우가 있습니다.상기의 순서를 모두 실행해도 곤란하다고 생각되는 경우는, 다음의 순서를 확인해 주세요.react수입이 우선이다.

import React from 'react'
import { render } from 'react-dom'

더 중요한 일을 할 수 있게 해주십시오.

표시된 오류

그 수입 반응 후에

마지막으로 react-dom 가져오기

error is react가 정의되지 않은 경우 ==를 추가하십시오.>import React from 'react';

에러가 반응하는 경우DOM이 정의되지 않았습니다. ==을(를) 추가하십시오.>import ReactDOM from 'react-수집되지 않은 참조 오류: 반응이 정의되지 않았습니다.dom';

CRA를 사용하여 이 질문에 도달한 사용자는customize-cra그리고.react-app-rewiredCRA의 바벨 프리셋을 덮어쓰기 위한 패키지입니다.그러기 위해서는,config-overrides.js루트에 이 코드 스니펫을 붙여 넣습니다.

const { override, addBabelPreset } = require('customize-cra');

module.exports = override(
    addBabelPreset('@emotion/babel-preset-css-prop'),
    addBabelPreset([
        '@babel/preset-react',
        {
            runtime: 'automatic',
            importSource: '@emotion/react',
        },
    ]),
);

패키지의 스크립트를 갱신합니다.아래 것들과 함께 json.

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",

제가 이걸 받은 이유는

import react from 'react'

대신

import React from 'react'

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