0

Google マップ API を使用して React を実装するためのオンライン チュートリアルに従っています。マップ コンポーネントを構築しようとしてきましたが、配信されたとおりに指示に従いました。しかし、ブラウザでページを読み込もうとすると、何も表示されず、解決に苦労しているコンソール エラーがいくつかあります。

以下は私の単純なHTMLページです

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=visualization"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="build/bundle.js" ></script>
    </body>
</html>

ここに私のapp.jsファイルがあります

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'

class App extends Component {
    render() {
        const location = {
            lat: 28.5962,
            lng: 81.3064
        }

        return (
            <div>
                This is the REACT APP!
                <div style={{width: 300, height:600, background: '#777'}}>
                    <Map center={location} />
                </div>

                <Places />
            </div>
        )
    }
}

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

以下は、問題を引き起こしていると思われる Map.js ファイルです。

import React, { Component } from 'react';
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps';
import GoogleMapLoader from "react-google-maps-loader"

class Map extends Component {
    render(){
        const mapContainer = <div style={{height: '100%', width:'100%'}}></div>

        return (
            <GoogleMapLoader
                containerElement = { mapContainer }
                googleMapElement =  {
                    <GoogleMap
                        defaultZoom={15}
                        defaultCenter={this.props.center}
                        options={{streetViewControl: false, mapTypeControl: false}}>
                    </GoogleMap>
                } />
        )
    }
}

export default Map

これは、JSX コードを ES2015 に変換する webpack.config.js ファイルです。

let webpack = require("webpack");
let path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: 'build/bundle.js',
        sourceMapFilename: 'build/bundle.map'
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query:{
                    presets:['react', 'es2015']
                }
            }
        ]
    }
}

これは、私のhtmlページにリンクされているbundle.jsコードを含むフィドルです。

bundle.js コードを含むフィドル

ブラウザで開こうとすると、次のコンソール エラーが表示されます

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

のレンダリング方法を確認してくださいMap。in Map (App によって作成された) in div (App によって作成された) in div (App によって作成された) in App invariant.js:49 Uncaught Error: Element type is invalid: expected a string (組み込みコンポーネントの場合) または a class/ function (複合コンポーネントの場合) >but got: undefined. コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きインポートを混同している可能性があります。

のレンダリング方法を確認してくださいMap。invariant (invariant.js:42) で createFiberFromElement (react-dom.development.js:5753) で reconcileSingleElement (react-dom.development.js:7531) で reconcileChildFibers (react-dom.development.js:7635) で reconcileChildrenAtExpirationTime (react-dom.development.js:7756) reconcileChildren (react-dom.development.js:7747) で finishClassComponent (react-dom.development.js:7881) で updateClassComponent (react-dom.development.js:7850) beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224) react-dom.development.js:9747 コンポーネントで上記のエラーが発生しました: マップ内 (アプリで作成) in div (アプリで作成) in div (アプリで作成) in アプリ

react-dom.development.js:10994 キャッチされないエラー: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きのインポートを混同している可能性があります。

のレンダリング方法を確認してくださいMap。invariant (invariant.js:42) で createFiberFromElement (react-dom.development.js:5753) で reconcileSingleElement (react-dom.development.js:7531) で reconcileChildFibers (react-dom.development.js:7635) で reconcileChildrenAtExpirationTime (react-dom.development.js:7756) reconcileChildren (react-dom.development.js:7747) で finishClassComponent (react-dom.development.js:7881) で updateClassComponent (react-dom.development.js:7850) beginWork (react-dom.development.js:8225) で performUnitOfWork (react-dom.development.js:10224) で

問題は GoogleMapLoader にあると思っていたので、react-google-maps-loader のインポートを追加しましたが、明らかにそうではありませんでした。また、Webstorm には JSX を ES2015 コードに変換する際に問題があると読んだので、Webstorm の使用から Sublime Text に切り替えましたが、それも問題ではありませんでした。足りないものはありますか？

4

1 に答える 1