web-dev-qa-db-ja.com

警告：React.createElement：タイプが無効です-bundle.js

React JS、すべてが順調だったので、数日間、簡単な例を実行して、推奨される基本構成を実行し、さらにいくつかのアドオンを実行できました。 JavaScriptバージョンを認識するために追加します。

数日間プロジェクトをレビューしなくなった後、コマンドは正常に動作していますが、コマンドを実行するとエラーは表示されませんが、ブラウザーには何も表示されず、このコンソールには複数のエラーのみが表示されます。

私はreacとreact-domをアンインストールして再インストールしましたが、問題は解決しません。新しいプロジェクトで友人からクローンを作成してみてください。正常に機能し、同じ構造をコピーしただけです。

課題

警告：React.createElement：タイプは無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、未定義：コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れているか、デフォルトのインポートと名前付きインポートが混在している可能性があります。

上記のエラーは、Reactコンポーネントのいずれかで発生しました。エラー処理動作をカスタマイズするために、ツリーにエラー境界を追加することを検討してください。

ファイルにエラーが表示されることに注意してくださいbundle.js、webpackを介して生成されたコードを保存するために使用されます

errores

tree

package.json

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "concurrently \"node server.js\" \"webpack -w\" "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "serve-static": "^1.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.1",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.7.0",
    "webpack": "^3.10.0"
  }
}

webpack.config.js

const path = require('path');

const config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('js'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {                
                test: /.jsx$/,
                use:{
                    loader:'babel-loader'
                },
                exclude: /node_module/
            }
        ]
    }
}

module.exports = config;

app.jsx

import React, {Component} from 'react';
import {render} from 'react-dom';

class App extends Component{
    render(){
        return(
            <div>                
                <h1>Mi Aplicacion React Js</h1>
                <h3>Probando la exportacion</h3>
            </div>
        )       
    }
}

デフォルトのアプリをエクスポートします。

index.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';

render(
    <App/>,
    document.getElementById('appStart')
)

index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>Aprendiendo React</title>
    </head>

    <body>
        <div id="appStart"></div>
        <script src="js/bundle.js"></script>
    </body>

</html>

コンソール

C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev

> [email protected] dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"

[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1]     Asset    Size  Chunks                    Chunk Names
[1] bundle.js  729 kB       0  [emitted]  [big]  main
[1]   [14] ./src/index.jsx 381 bytes {0} [built]
[1]     + 27 hidden modules
javascriptnode.jsreactjswebpackreact-dom
5
Pedro Miguel Pimienta Morales

App.jsxでは、コンポーネントは次のようにエクスポートされます。

export default App;

しかし、それは次のようにインポートされています：

import {App} from './components/app.jsx';

Appエクスポートがapp.jsxから存在しないため、コードが失敗し、エラーが示すようにundefinedが表示されます。代わりにdefaultとしてエクスポートされます。

これはそれをインポートする正しい方法です：

// The recommended way
import App from './components/app.jsx';

// The alternative way, to better illustrate what's going on
import { default as App } from './components/app.jsx';

ESモジュールの概要は次のとおりです。 http://exploringjs.com/es6/ch_modules.html

7
kingdaro