小编Pav*_*vel的帖子
Webpack 内存不足
当我使用 webpack-dev 服务器时，问题有时会发生
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
更多在这里
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
节点版本：
node -v
v9.3.0
操作系统版本：
macOS High Sierra 10.13.6
有没有人遇到过类似的问题？
14
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
不变式失败：您不应在<Router>外使用<Route>
我react-router-dom在React应用程序中使用路由。我的应用程序的一部分提取到另一个软件包中。依赖项列表如下所示：
./app/dashboard/package.json
{
"dependencies": {
"@app/components": "^1.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0.0"
}
}
./app/components/package.json
{
"peerDependencies": {
"react-router-dom": "^5.0.0"
}
}
当我使用@app/components需要组件的组件时，react-router-dom出现以下错误：
Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>
为什么会引发此错误？在App.js我用BrowserRouter
import React, { Suspense } from 'react';
import { Switch, …13
推荐指数
推荐指数
8
解决办法
解决办法
2万
查看次数
查看次数
文字内容不匹配.React 16中的警告
我试图用服务器端渲染构建ReactJs应用程序我的客户端和服务器的入口点:
const store = createStore(window.__INITIAL_STATE__);
hydrate(
<Provider store={store}>
<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
</Provider>,
document.querySelector('#root')
);
const app = express();
if (isDev) {
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('../../webpack.config.js');
const compiler = webpack(config);
app.use(express.static('/public'));
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
stats: 'errors-only',
})
);
}
app.get('*', (req, res) => {
const helmet = Helmet.renderStatic();
const htmlAttrs = helmet.htmlAttributes.toComponent();
const bodyAttrs = helmet.bodyAttributes.toComponent();
const context = {};
const data = {};
res.set('content-type', 'text/html');
res.send(
'<!DOCTYPE html>' +
renderToString( …12
推荐指数
推荐指数
2
解决办法
解决办法
6172
查看次数
查看次数
使用Jest和Enzyme测试react-router v4
我有一个简单的应用程序,他们使用react-router v4
const App = () => (
<Switch>
<Route exact path="/" component={() => <div>Home</div>}/>
<Route path="/profile" component={() => <div>Profile</div>}/>
<Route path="/help" component={() => <div>Help</div>}/>
</Switch>
);
并测试
jest.dontMock('../App');
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { shallow } from 'enzyme';
import App from '../App';
describe('<App />', () => {
const wrapper = shallow(
<MemoryRouter>
<App/>
</MemoryRouter>
);
console.log(wrapper.html());
it('renders a static text', () => {
expect(
wrapper.contains(<div>Home</div>)
).toBe(true);
});
});
为什么这个测试会下降
我的配置:
- 酶:2.8.2
- react-scripts:1.0.7
- react-test-renderer:15.5.4
11
推荐指数
推荐指数
1
解决办法
解决办法
6657
查看次数
查看次数
如何在 create-react-app 中使用 WebAssembly (wasm)
我使用名为sax-wasm 的create-react-app库。稍微修改网络的示例代码我得到了这个：wasm
import { SaxEventType, SAXParser } from 'sax-wasm';
async function loadAndPrepareWasm() {
const saxWasmResponse = await import('sax-wasm/lib/sax-wasm.wasm');
const saxWasmbuffer = await saxWasmResponse.arrayBuffer();
const parser = new SAXParser(SaxEventType.Attribute | SaxEventType.OpenTag, {
highWaterMark: 64 * 1024,
});
const ready = await parser.prepareWasm(new Uint8Array(saxWasmbuffer));
if (ready) {
return parser;
}
}
loadAndPrepareWasm().then(console.log);
当我运行yarn start命令时，我的构建失败了：
Failed to compile.
./node_modules/sax-wasm/lib/sax-wasm.wasm
Module parse failed: magic header not detected
File was processed with these loaders:
* ./node_modules/file-loader/dist/cjs.js
You may need …10
推荐指数
推荐指数
1
解决办法
解决办法
2934
查看次数
查看次数
使用react-router v4更改url中的参数之一
我有一条这样的路
/cities/:cityGuid/responses/:responseGuid
当用户更改城市时，我需要替换:cityGuid. 为了改变城市使用了一个NavLink组件。
<NavLink to="current url with changed cityGuid" text="Moscow" />
为了获取当前 url，我需要使用location.pathname并替换cityGuid该字符串中的 a 。
current url: /cities/londonCityGuid/responses/abc1
user change city
next url is: /cities/moscowCityGuid/responses/abc1
做这个的最好方式是什么？
6
推荐指数
推荐指数
1
解决办法
解决办法
3625
查看次数
查看次数
用 SSR 反应 HMR
我正在尝试为 React 应用程序设置 SSR，当我第一次在development环境中启动服务器时一切正常（服务器发送浏览器 HTML 和 CSS），在更改我的应用程序的源代码后，出现错误：
抛出这个错误是因为服务器上的源代码已经过时，但是客户端有一个新版本并且 React 通知我这个问题。我认为解决这个问题的方法是一种称为 HMR（热模块更换）的机制，但是设置它对我来说很困难。
我的服务器 Webpack-config 如下所示：
const serverConfig = merge(commonConfig, {
name: 'server',
target: 'node',
externals: [
nodeExternals({
whitelist: ['webpack/hot/poll?1000'],
}),
],
entry: ['webpack/hot/poll?1000', appServerEntry],
output: {
path: path.resolve(appDist, 'server'),
filename: 'index.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
});
在每个请求服务器上呈现一个新版本的 UI
app.get('*', (request, response) => {
const staticAssets = getStaticAssets();
const routerContext = {};
const renderStream = renderDocumentToStream({
staticAssets,
request,
routerContext,
});
const cacheStream = …6
推荐指数
推荐指数
1
解决办法
解决办法
2459
查看次数
查看次数
React Redux 路由器错误
我正在尝试设置 Redux + React Router 应用程序。我认为问题出在 ImmutableJS 上，但我不明白如何解决它。
客户端.js
import { fromJS } from 'immutable'
import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'
import { match, Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'
function createSelectLocationState(reducerName) {
let prevRoutingState;
let prevRoutingStateJS;
return (state) => {
const …5
推荐指数
推荐指数
1
解决办法
解决办法
656
查看次数
查看次数
对象不支持属性或方法'assign'
我设置了webpack + babel配置
webpack.config.js
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
...
.babelrc
{
"plugins": ["lodash", "transform-object-rest-spread"],
"presets": [
["env", {
"targets": [
"> 4%",
"ie 11",
"safari 8"
]
}],
"react",
"react-optimize"
],
"env": {
"test": {
"presets": ["es2015", "react"]
}
}
}
在谷歌Chrome中一切都还可以,但在IE 11i中有错误
对象不支持属性或方法'assign'
5
推荐指数
推荐指数
2
解决办法
解决办法
4199
查看次数
查看次数
Docker和网络核心应用程序不起作用
我尝试使用Docker设置dotnet应用程序.
"backend"文件夹中的Dockerfile:
FROM microsoft/dotnet:1.1-sdk AS build-env
WORKDIR /app
COPY *.csproj ./
RUN dotnet restore
COPY . ./
RUN dotnet publish -c Release -o out
FROM microsoft/dotnet:1.1-runtime
WORKDIR /app
COPY --from=build-env /app/out ./
CMD ["dotnet", "backend.dll"]
"frontend"文件夹中的Dockerfile:
# build
FROM node AS build-env
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app/
RUN npm run build
# run
FROM nginx
COPY --from=build-env /usr/src/app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
nginx.conf
events {}
http {
server {
listen 80;
location / { …3
推荐指数
推荐指数
1
解决办法
解决办法
1577
查看次数
查看次数
输入对象类型 `TypeName` 必须定义一个或多个字段
我正在试验NestJS和TypeGraphQL。我有一个猫的示例模型。
import { Document } from 'mongoose';
import { ObjectType, InputType, Field, ID } from 'type-graphql';
export interface Cat extends Document {
readonly name: string;
readonly age?: number;
}
class CatBase {
@Field()
name: string;
@Field({ nullable: true })
age?: number;
}
@ObjectType()
export class CatObjectType extends CatBase implements Cat {
@Field(type => ID)
id: string;
}
@InputType()
export class CatInputType extends CatBase implements Cat {
}
在这里，我试图重用BaseCatinCatObjectType和CatInputType。但我收到此错误：
[ { …2
推荐指数
推荐指数
1
解决办法
解决办法
1793
查看次数
查看次数
标签 统计
reactjs ×6
javascript ×5
webpack ×5
react-router ×3
.net-core ×1
babel ×1
babeljs ×1
docker ×1
enzyme ×1
express ×1
graphql ×1
jestjs ×1
nestjs ×1
node.js ×1
redux ×1
typegraphql ×1
webassembly ×1