Javascript React/Node应用程序无法在Chrome上运行”;运行模板时出错:不变冲突:无效挂钩调用;
我的react/node/meteor应用程序中出现错误。特别是,该应用程序无法在Chrome上加载,但可以在所有其他浏览器(edge、firefox)上正常工作。在Chrome上,我得到一个500错误,页面无法加载。在我运行应用程序的终端上,我得到以下信息:Javascript React/Node应用程序无法在Chrome上运行”;运行模板时出错:不变冲突:无效挂钩调用;,javascript,node.js,reactjs,meteor,Javascript,Node.js,Reactjs,Meteor,我的react/node/meteor应用程序中出现错误。特别是,该应用程序无法在Chrome上加载,但可以在所有其他浏览器(edge、firefox)上正常工作。在Chrome上,我得到一个500错误,页面无法加载。在我运行应用程序的终端上,我得到以下信息: (webapp_server.js:1010) Error running template: Invariant Violation: Invalid hook call. Hooks can only be called ins
(webapp_server.js:1010) Error running template: Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks...
正如我们在这里看到的,我知道这一错误有三个常见原因:
但我使用的是“react”:“^16.8.0”,“react dom”:“^16.8.0”,我不使用react native
我不认为我使用钩子不当
我运行了以下命令:
流星npm ls反应
并得到以下回复:
`-- react@16.8.6
我已经重置了我的机器,但问题仍然存在:Edge工作正常,Chrome无法加载
以下是出现错误的代码:
import React from 'react';
import MeteorLoadable from 'meteor/nemms:meteor-react-loadable';
import acceptLanguage from 'accept-language';
import { renderToString } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';
import { Meteor } from 'meteor/meteor';
import { onPageLoad } from 'meteor/server-render';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider, getDataFromTree } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { StaticRouter, Route } from 'react-router-dom';
import Helmet from 'react-helmet';
import fetch from 'node-fetch';
import App from '/app/ui/components/smart/app';
import HeaderTitle from '/app/ui/components/smart/header/header-title';
import LanguagePicker from '/app/ui/components/dumb/language-picker';
import Routes from '/app/ui/routes';
import { primaryLocale, otherLocales } from '/app/intl';
const locales = primaryLocale ? [primaryLocale, ...otherLocales] : otherLocales;
acceptLanguage.languages(locales);
const render = async (sink) => {
const ssrClient = new ApolloClient({
link: new HttpLink({
uri: Meteor.absoluteUrl('/graphql'),
fetch,
}),
cache: new InMemoryCache(),
ssrMode: true,
});
const preferredLocale = acceptLanguage.get(sink.request.headers['accept-language']);
let locale = otherLocales.find(l => sink.request.url.path.startsWith(`/${l}`));
let prefix = locale;
// /app-shell is a special route that does no server-side rendering
// It's used by the service worker for all navigation routes, so after the first visit
// the initial server response is very quick to display the app shell, and the client
// adds in the data.
// In the case of a first visit or a robot, we render everything on the server.
if (sink.request.url.path === '/app-shell') {
sink.appendToBody(`<script>window.__APOLLO_STATE__=${JSON.stringify(ssrClient.extract())};</script>`);
sink.appendToBody(`<script>window.__PREFERRED_LOCALE__='${preferredLocale}';</script>`);
sink.appendToBody(MeteorLoadable.getLoadedModulesScriptTag());
return;
}
// We first check if we need to redirect to a locale
// We can only do this is there isn't a primary locale.
if (!primaryLocale) {
if (!locale) {
sink.setStatusCode(307);
sink.redirect(`/${preferredLocale || otherLocales[0]}${sink.request.url.path}`);
return;
}
} else if (!locale) {
// If there's no locale prefix, we use the primaryLocale instead
locale = primaryLocale;
prefix = '';
}
const ServerApp = ({ component, context }) => (
<MeteorLoadable.Capture>
<StaticRouter location={sink.request.url} context={context}>
<ApolloProvider client={ssrClient}>
<Route
path={`/${prefix}`}
render={props => <App component={component} {...props} locale={locale} section="app" />}
/>
</ApolloProvider>
</StaticRouter>
</MeteorLoadable.Capture>
);
// Load all data from local server
const context = {};
await getDataFromTree(<ServerApp component={Routes} context={context} />);
// Elements that we want rendered on the server
const sheet = new ServerStyleSheet();
sink.renderIntoElementById('header-title', renderToString(sheet.collectStyles(<ServerApp component={HeaderTitle} context={context} />)));
sink.renderIntoElementById('header-lang-picker', renderToString(sheet.collectStyles(<ServerApp component={LanguagePicker} context={context} />)));
sink.renderIntoElementById('main', renderToString(sheet.collectStyles(<ServerApp component={Routes} context={context} />)));
// Append helmet and styles
const helmetResult = Helmet.renderStatic();
['title', 'meta', 'link', 'script'].forEach(k => sink.appendToHead(helmetResult[k].toString()));
sink.appendToHead(sheet.getStyleTags());
// Append user's preferred locale
sink.appendToBody(`<script>window.__PREFERRED_LOCALE__='${preferredLocale}';</script>`);
// Append Apollo data
sink.appendToBody(`<script>window.__APOLLO_STATE__=${JSON.stringify(ssrClient.extract())};</script>`);
// Append preloaded ReactLoadabe modules
sink.appendToBody(MeteorLoadable.getLoadedModulesScriptTag());
};
Meteor.startup(async () => {
await MeteorLoadable.preloadComponents();
onPageLoad(render);
});
await getDataFromTree(<ServerApp component={Routes} context={context} />);
从“React”导入React;
从“meteor/nemms:meteor react loadable”导入MeteorLoadable;
从“接受语言”导入接受语言;
从'react dom/server'导入{renderToString};
从“样式化组件”导入{ServerStyleSheet};
从“流星/流星”导入{Meteor};
从“meteor/server render”导入{onPageLoad};
从“apollo客户端”导入{apollo客户端};
从'react apollo'导入{ApolloProvider,getDataFromTree};
从'apollo cache inmemory'导入{InMemoryCache};
从“阿波罗链接http”导入{HttpLink};
从“react router dom”导入{StaticRouter,Route};
从“反应头盔”导入头盔;
从“节点获取”导入获取;
从“/App/ui/components/smart/App”导入应用程序;
从“/app/ui/components/smart/header/header title”导入标题;
从“/app/ui/components/dumb/language picker”导入LanguagePicker;
从“/app/ui/Routes”导入路由;
从'/app/intl'导入{primaryLocale,otherLocales};
const locales=primaryLocale?[主要地区,…其他地区]:其他地区;
acceptLanguage.语言(地区);
常量呈现=异步(接收器)=>{
const ssrClient=新客户端({
链接:新的HttpLink({
uri:Meteor.absoluteUrl('/graphql'),
取来
}),
缓存:新的InMemoryCache(),
是的,
});
const preferredLocale=acceptLanguage.get(sink.request.headers['accept-language']);
让locale=otherLocales.find(l=>sink.request.url.path.startsWith(`/${l}`));
让prefix=locale;
///app shell是一种不进行服务器端渲染的特殊路由
//服务人员将其用于所有导航路线,因此在第一次访问之后
//初始服务器响应非常快,可以显示应用程序外壳和客户端
//添加到数据中。
//对于首次访问或机器人,我们在服务器上渲染所有内容。
if(sink.request.url.path=='/app shell'){
sink.appendToBody(`window.APOLLO\u STATE\\=${JSON.stringify(ssrClient.extract())};`);
sink.appendToBody(`window.\\\\\\\\\\'${preferredLocale}';`);
sink.appendToBody(MeteoLoadable.GetLoadedModulesScriptag());
返回;
}
//我们首先检查是否需要重定向到区域设置
//我们只能这样做,因为没有主区域设置。
如果(!primaryLocale){
如果(!区域设置){
sink.setStatusCode(307);
重定向(`/${preferredLocale | | otherLocales[0]}${sink.request.url.path}`);
返回;
}
}else如果(!locale){
//如果没有区域设置前缀,则使用primaryLocale
语言环境=主语言环境;
前缀=“”;
}
const ServerApp=({component,context})=>(
看起来这不符合hooks,因此我更改了以下代码:
await getDataFromTree(<ServerApp component={Routes} context={context} />);
等待getDataFromTree();
为此:
const aServerApp = () => (
<ServerApp component={Routes} context={context} />
);
await getDataFromTree(aServerApp);
const aServerApp=()=>(
);
等待getDataFromTree(aServerApp);
而且它似乎工作得很好。看起来这不符合hooks,因此我更改了以下代码:
await getDataFromTree(<ServerApp component={Routes} context={context} />);
等待getDataFromTree();
为此:
const aServerApp = () => (
<ServerApp component={Routes} context={context} />
);
await getDataFromTree(aServerApp);
const aServerApp=()=>(
);
等待getDataFromTree(aServerApp);
它似乎工作得很好。我想我们需要看看你的代码来解决这个问题。@ChristianFritz我上传了一些代码。我想我们需要看看你的代码来解决这个问题。@ChristianFritz我上传了一些代码。