Javascript 网页包外部响应不工作_Javascript_Reactjs_Webpack

Javascript 网页包外部响应不工作

javascript reactjs webpack

Javascript 网页包外部响应不工作,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我似乎无法正确获取Web包的外部配置当react作为供应商从node_模块捆绑导入时，该应用程序可以工作。但是，当我删除供应商包并尝试使用CDN中的react时，我得到了以下错误警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘了导出您的组件，该组件来自定义它的文件。printWarning@react.js:3640 警告@react.js:3664 createElement@react.js:2

我似乎无法正确获取Web包的外部配置

当react作为供应商从node_模块捆绑导入时，该应用程序可以工作。但是，当我删除供应商包并尝试使用CDN中的react时，我得到了以下错误

警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘了导出您的组件，该组件来自定义它的文件。printWarning@react.js:3640 警告@react.js:3664 createElement@react.js:2357 module.exports@ app.js:122 网页需要@app.js:20（匿名）@app.js:429 webpack\u require@app.js:20 module.exports@app.js:66（匿名）@app.js:69

完整代码在

这是我的网页配置

let LiveReloadPlugin = require('webpack-livereload-plugin');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let webpack = require('webpack');

module.exports = {
    entry: {
        'app': './@Client.js',
        // 'vendor': [
        //     "react",
        //     "react-dom",
        //     "react-router"
        // ],
    },
    output: {
        path: __dirname + '/_dist',
        publicPath: '/',
        filename: "[name].js"
    },
    externals: {
        "react": 'React',
        "react-dom": 'ReactDOM',
        "react-router": 'ReactRouter'
    },
    devServer: {
        contentBase: '_dist'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        "react",
                        "es2015",
                        "stage-2"
                    ]
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                BROWSER: JSON.stringify(true)
            }
        }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'vendor',
        //     filename: 'vendor.js',
        //     minChunks: Infinity
        // }),
        new ExtractTextPlugin("css/[name].css"),
        new LiveReloadPlugin()
    ]
};

还有布局组件

import React, { Component } from 'react';
import { Link } from 'react-router'

// http://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components
if (process.env.BROWSER) {
  require('./layout.scss');
  console.log('lalala')
}

export class Layout extends Component {
  handleClick() {
    alert(0);
  }
  render() {
    let {custom, children} = this.props;
    return (
      <html>
        <head>
          <title>{custom.title}</title>
          <link rel="stylesheet" type="text/css" href="css/app.css" />
        </head>
        <body>
          <h1>{custom.title}</h1>
          <button onClick={this.handleClick}>Click me</button>
          {children}
          <ul>
            <li>
              <Link to="/">Index</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/foo">404</Link>
            </li>
          </ul>


          <script dangerouslySetInnerHTML={{
            __html: 'window.PROPS=' + JSON.stringify(custom)
          }}></script>
          {/*<script src="vendor.js"></script>*/}
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.2/react-router.js" />
          <script src="app.js" />
        </body>
      </html>
    );
  }
}

根据粘贴的错误判断，React工作正常。你的问题在别的地方

但是，您的代码中存在多个缺陷。首先，从React生成整个页面并不常见，我在

render

方法中看到了

html

、

head

和

body

标记

其次，如果您正在从React加载React CDN脚本，那么该如何工作？：）你竟然会犯这样的错误，真是奇迹

有一个带有基本html框架的index.html。如果您正在进行服务器端渲染，请使用一个简单的模板执行同样的操作，并将React的服务器端渲染嵌入到一个

占位符中。

从粘贴的错误判断，React工作正常。你的问题在别的地方

但是，您的代码中存在多个缺陷。首先，从React生成整个页面并不常见，我在

render

方法中看到了

html

、

head

和

body

标记

其次，如果您正在从React加载React CDN脚本，那么该如何工作？：）你竟然会犯这样的错误，真是奇迹

有一个带有基本html框架的index.html。如果您正在进行服务器端渲染，请使用一个简单的模板执行同样的操作，并将React的服务器端渲染嵌入到一个

占位符中。

与您的问题无关，但与您的提问方式有关；这是相关的。您的

ReactDOM.render

调用在哪里？（保留问题中的所有相关代码）。你能启用源地图以便更好地看到实际错误在哪里吗（并向我们展示？app.js:line没有帮助，因为它是一个构建工件）@Dan Pantry I启用了webpacks dev工具源地图，但它似乎没有任何帮助。请看图片。你检查了吗？与你的问题无关，但你是如何问的；这是相关的。您的

ReactDOM.render

调用在哪里？（保留问题中的所有相关代码）。您能否启用源映射以便更好地查看实际错误的位置（并向我们展示？app.js:line由于它是构建工件，所以没有帮助）@Dan Pantry我启用了webpacks开发工具源代码映射，但它似乎没有任何帮助。请参见图片。您检查了吗？是的，我正在使用服务器端渲染，因此服务器返回渲染的完整页面时应加载react脚本。我不明白的是，为什么它不适用于CDN，但如果我使用Web包供应商区块的react，它将是一个通过app.js的脚本，它就可以工作。因此，设置基本相同。在

路由

中使用的某个组件中，您可能缺少

导出默认值

。是的，我正在使用服务器端呈现，因此服务器返回呈现的完整页面时应加载react脚本。我不明白的是，为什么它不适用于CDN，但如果我使用Web包供应商区块的react，它将是一个通过app.js的脚本，它就可以工作。因此，基本上是相同的设置。在

路由

中使用的某个组件中，您可能缺少一个

导出默认值

。

import ReactDOM from 'react-dom';
import routes from './routes/routes.jsx'

ReactDOM.render(routes, document);