- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 rect-redux-universal-hot-example 构建同构 ReactJS 应用程序样板.
我正在使用react-hot-loader用于热模块重新加载(hmr)。
一旦我更改某些应用程序组件数据,我在浏览器中的页面不会自动重新加载。我在浏览器中收到以下错误:
[HMR] connected
main-32cd5038bd66f14eeceb.js:12141 [HMR] bundle rebuilding
main-32cd5038bd66f14eeceb.js:12149 [HMR] bundle rebuilt in 530ms
main-32cd5038bd66f14eeceb.js:30888 [HMR] Checking for updates on the server...
main-32cd5038bd66f14eeceb.js:1000 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning @ main-32cd5038bd66f14eeceb.js:1000
main-32cd5038bd66f14eeceb.js:30976 [HMR] Cannot check for update (Full reload needed)
handleError @ main-32cd5038bd66f14eeceb.js:30976
main-32cd5038bd66f14eeceb.js:30977 [HMR] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
at invariant (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:946:15)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:11215:55)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19852:24)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19815:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19736:12)
at ReactCompositeComponentWrapper.receiveComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19638:10)
at Object.receiveComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:3479:22)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19845:23)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19815:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-32cd5038bd66f14eeceb.js:19736:12)
handleError @ main-32cd5038bd66f14eeceb.js:30977
main-32cd5038bd66f14eeceb.js:946 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
at invariant (main-32cd5038bd66f14eeceb.js:946)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (main-32cd5038bd66f14eeceb.js:11215)
at ReactCompositeComponentWrapper._updateRenderedComponent (main-32cd5038bd66f14eeceb.js:19852)
at ReactCompositeComponentWrapper._performComponentUpdate (main-32cd5038bd66f14eeceb.js:19815)
at ReactCompositeComponentWrapper.updateComponent (main-32cd5038bd66f14eeceb.js:19736)
at ReactCompositeComponentWrapper.receiveComponent (main-32cd5038bd66f14eeceb.js:19638)
at Object.receiveComponent (main-32cd5038bd66f14eeceb.js:3479)
at ReactCompositeComponentWrapper._updateRenderedComponent (main-32cd5038bd66f14eeceb.js:19845)
at ReactCompositeComponentWrapper._performComponentUpdate (main-32cd5038bd66f14eeceb.js:19815)
at ReactCompositeComponentWrapper.updateComponent (main-32cd5038bd66f14eeceb.js:19736)
这是我的设置:
.babelrc
{
"presets": ["react", "es2015", "stage-0"],
"plugins": [
"transform-runtime",
"add-module-exports",
"transform-react-display-name",
"flow-runtime",
"react-hot-loader/babel"
]
}
client.js
import ReactDOM from 'react-dom';
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import App from './component/App/app';
const NextApp = require('./component/App/app').default;
const dest = document.getElementById('content');
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
dest
);
};
render(App);
console.log('MODULE HOT:');
console.log(module.hot);
if (module.hot) {
module.hot.accept('./component/App/app', () => {
render(NextApp);
});
}
** 应用程序 **
import React from 'react';
const App = () => (
<div className="wrapper">
<h1>This is my App!!!!</h1>
</div>
);
export default App;
dev.config
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'react-hot-loader/patch',
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader', 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: ['*', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
]
};
我不知道在哪里可以找到错误,因为我不太习惯使用 HMR。感谢帮助。
最佳答案
现在在控制台中,我们看到一个错误,因为 AppContainer.dev 正在尝试渲染 Redbox 模块导出,但由于 babelification,该组件位于 .default 上,并且 AppContainer 正在使用 require()。在此处输入代码
我的临时修复:
const mount = document.getElementById('app');
render(
<AppContainer errorReporter={({ error }) => {throw error}}>
<App store={store} />
</AppContainer>,
mount
);
关于javascript - React-hot-loader:React.createElement:类型无效——更新屏幕时预计会出现字符串错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43247129/
我有一个接受以下参数的函数: int setvalue(void (*)(void *)); 为了满足参数:void (*)(void *),我创建了这样一个函数: static void *
我有以下代码: typedef void VOID; int f(void); int g(VOID); 在 C 中编译得很好(在 Fedora 10 上使用 gcc 4.3.2)。与 C++ 编译的
这个问题已经有答案了: Is f(void) deprecated in modern C and C++? [duplicate] (6 个回答) 已关闭 7 年前。 B.A.T.M.A.N./A.
我在 ASP.NET Core 3.1 项目上有以下 Identity Server 4 配置: services .AddIdentityServer(y => { y.Events.R
我们有一个 O365 租户,一切都是开箱即用的。租户放置在德国云中,而不是全局 (office.de) 中。我们还开发了一个 Office 插件,使用 OAuth 2.0 授权访问共享点。首先,我们向
我有一个如下所示的路由 routes.MapRoute( name: "Default", url: "{controller}/{action}/{i
我正在尝试使用 OAuth2.0 访问 google 文档。我已经从 Google API 控制台获取了客户端 ID 和 key 。但是当我运行这段代码时,我收到了异常。如果我遗漏了什么,有人可以建议
此代码有效: let mut b: Vec = Vec::with_capacity(a.len()); for val in a.iter() { b.push(val); } 此代码不起作
使用 client_credintials 授权类型请求 EWS oauth2 v2.0 的访问 token 时出现错误。 https://login.microsoftonline.com/tena
我通过 Java 应用程序使用 Google 电子表格时遇到了问题。我创建了应用程序,该应用程序运行了 1 年多,没有任何问题,我什至在 Create Spreadsheet using Google
如何创建 匹配所有无效 Base64 字符的正则表达式?我在堆栈上找到了 [^a-zA-Z0-9+/=\n\r].*$ 但是当我尝试时我得到了带有 - 符号的结果字符串.我根本不知道正则表达式,任何人
我从 Gitlab CI/CD Pipelines 获得错误信息:yaml invalid。问题是由 .gitlab-ci.yml 脚本的第五行引起的: - 'ssh deployer@gita
我有 3 个数据源,设置如下: @Configuration @Component public class DataSourceConfig { @Bean("foo") @Conf
你好,我想用bulkCreate ex 插入数据: [ { "typeId": 5, "devEui": "0094E796CBFCFEF9", "application_name": "Pressu
UIApplicationExitsOnSuspend 不会强制我的应用程序退出。我已经清理过目标、删除了应用程序、重建并重新安装了很多次。 我确实需要退出我的应用程序。 最佳答案 您是否链接了 SD
在 iPhone 配置门户上,显示我的 iPhone 团队配置配置文件无效。有一个“由 Xcode 管理”文本。 “续订”按钮被禁用。 我该如何解决这个问题?谢谢 最佳答案 使用 Xcode 3.2.
好的,所以今天我用我们的“实时”数据库中的新信息更新了我的数据库……从那时起,我的一个表格就出现了问题。如果您需要任何代码,请告诉我,我将对其进行编辑并发布所需的代码... 我有一个报告表格,其中有一
我有一个结构体,其中有一个元素表示为 void (*func)(); 我知道 void 指针通常用于函数指针,但我似乎无法定义该函数。我不断收到取消引用指向不完整类型的指针。我用谷歌搜索了一下但没有结
我正在尝试使用 Coldfusion 9 从 ning 网络获取凭证,所以首先这是测试 api 的 curl 语法: curl -k https://external.ningapis.com/xn/
这个问题已经有答案了: Does C have references? (2 个回答) 已关闭 4 年前。 我正在学习 C 语言引用,这是我的代码: #include int main(void)
我是一名优秀的程序员,十分优秀!