Question

我正在使用以下文件的webpack编译单个react组件

var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
mode: 'development',
devtool: 'source-map',
 entry: {
D1: './src/components/D11.js',
},
 output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].plugin.js',
library: 'D1plugin',
libraryTarget:'window'
 },
 externals: {
'./vendor': 'vendor',
react: {
  commonjs: 'react',
  commonjs2: 'react',
  amd: 'react',
  window: 'React'
}
},
module : {
rules : [
    {
        test : /\.js?/,
        include : APP_DIR,
        loader : 'babel-loader'
    }
 ]
 },
 optimization: {
  namedModules: true,
},
};

我的组件代码是

import React from 'react';
import {saveAccount} from "../actions";
import {connect} from "react-redux";
import { BrowserRouter as Router, Route } from 'react-router-dom';
class D11 extends React.Component {
constructor(props){
    super(props)
    console.log("loaded D1 constructor")
}

render() {
    console.log("rendering D1")
    return (

        <div>
            D1 loaded from plugin click on this to add account balance 100 and name plugin_account
            <button onClick={this.saveAccount}> Add account </button>
        </div>

    );
}

};
 export  default D11;

我想使用ajax调用在运行时加载此组件，这是我的方法

load=()=> {
    console.log('------')
    fetch("/dist/"+"D1"+".plugin.js")
        .then((resp) => resp.text())
        .then((resp)=>{
            console.log(resp)
          //  debugger;
            this.state.component.push("D1");
            this.pluginRegistry["D1"] =  eval(resp).default;
            this.forceUpdate();
        });

    this.forceUpdate();
}

当我使用此功能加载该组件时，这是给我的错误无法读取未定义的属性'createContext' ，这可能是此问题的问题，以及解决此问题的替代方法。 Ps Im关注此博客react run time load blog

未处理的拒绝（TypeError）：无法读取未定义的属性'createContext'

0 个答案: