За ngrock спасибо

Консоль будет писаться через document.write ей в телефон

Поднимаешь ноду на 4000 порту. В package.json клиентского проекта пишешь "proxy": { "/log": { "target": "http://localhost:4000/log", "changeOrigin": true }, Перезапускаешь дев сервер. Теперь все запросы на /log будут на сервак идти window.onerror = (e) => fetch('/log', JSON.stringify(e)) (ну вроде того)

пакеж.жсон

Ребят, можете, пожалуйста, подсказать где почитать про migration из client-side rendering на server side?

просто почти все статьи про написание с 0 и только всякие элементарные штуки подключения рассказывают

просто почти все статьи про написание с 0 и только всякие элементарные штуки подключения рассказывают

у всех разные проекты, никто не напишет про конкретно твой случай. Читай по каждой библиотеке отдельно

ну тут естественно я имею ввиду react ssr

просто я сейчас как раз делаю миграцию, но куча ошибок постоянно и непонятно, из-за чего

методом тыка только фиксится все

просто я сейчас как раз делаю миграцию, но куча ошибок постоянно и непонятно, из-за чего

ну вот, миграцию делаешь, а статью не пишешь

вот потому их и нет

в react-router(4) как-то можно перехватить изменение роута и подмещать что-нибудь в него?

ну вот, миграцию делаешь, а статью не пишешь

я походу напишу, если проверну все) Просто всегда все упирается во время и некогда перебирать

ну тут естественно я имею ввиду react ssr

чистый реакт? каждую библиотеку нужно прикруть: helmet, redux, sc ...

ну helmet то не проблема, да естественно с редаксом и реакт-роутером 4+

ну helmet то не проблема, да естественно с редаксом и реакт-роутером 4+

а в чем проблема?

в правильной настройке вебпака и ошибках, которые при сервер рендере возникают

вот почему выдает, допустим, React is not defined

то есть уже сбилдилось все и застился сервер, но он отдает 500 с такой ошибкой

значит где-то реакт не заимпорчен

дело в том, что это по сути тот же клиентский код, который лежит в проде и работает

который я сейчас просто пытаюсь сделать сервер сайд рендерингом

вот почему выдает, допустим, React is not defined

в каком то файле ты юзаешь jsx. JSX преобразуеться в нечто подобное React.createElement(....). Если ты где-то не заимпортил React то и получишь такую ошбику

так а может быть такое что с клиент-сайд рендером это будет работать, а с серверм сайдом нет?

так а может быть такое что с клиент-сайд рендером это будет работать, а с серверм сайдом нет?

да

разные настройки вебпака/бабеля

привет, подскажите, плиз, впочему такая ошибка?

через бабель пропустил?

код бабеля: { "presets": ["env", "react", "stage-2"] }

а что в бабеле указать?

modules false

{ "presets": [[ "env", { "modules": false } ], "react", "stage-2"] }

так?

ну как минимум

эм... да, спс

теперь новая ошибка

import React from 'react'; ^^^^ SyntaxError: Unexpected token import at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

ну как минимум

А что это значит? Что я еще упустил?

да

а можно как-то узнать где возникает ошибка? А то даже непонятно откуда это

import React from 'react'; ^^^^ SyntaxError: Unexpected token import at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

вебпак?

import React from 'react'; ^^^^ SyntaxError: Unexpected token import at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

для жеста нужно включать modules отдельно

для вебпака выключать, для жеста включать

ну и бабель не умеет импортить import()

а можно как-то узнать где возникает ошибка? А то даже непонятно откуда это

Да, прочитать описание ошибки

вебпак?

ага

Да, прочитать описание ошибки

так нет описания, там просто откуда-то внутри сервера приходит. http://prntscr.com/jl6gjt

https://www.npmjs.com/package/babel-plugin-import-node

вот это поможет для jest

так нет описания, там просто откуда-то внутри сервера приходит. http://prntscr.com/jl6gjt

а на сервере консоль же есть, что там пишет?

вот это поможет для jest

спс огромное

или это она и есть

попробую

дело в том, что он запускается без ошибки, а вот когда я захожу с браузера на localhost:3000, то получаю это и в консоле она же выдается

так нет описания, там просто откуда-то внутри сервера приходит. http://prntscr.com/jl6gjt

потерял где-то импорт реакта

потерял где-то импорт реакта - везде есть, я там для примера всего 1 файл подключил

дело в том, что он запускается без ошибки, а вот когда я захожу с браузера на localhost:3000, то получаю это и в консоле она же выдается

скорее всего не так настроен бабель/вебпак

как можно более красиво написать этот кусок ?? const sortData = () => { const {activeSortType, ascSort} = this.state; if(activeSortType === sortType){ this.setState({ activeSortType: sortType, ascSort: !ascSort }) } else { this.setState({ activeSortType: sortType, ascSort: true }) }}

когда ты заходишь по урлу он пытается сделать rendertostring и спотыкается

скорее всего не так настроен бабель/вебпак

может быть, так а что там должно быть не так как на клиенте настроено?

как можно более красиво написать этот кусок ?? const sortData = () => { const {activeSortType, ascSort} = this.state; if(activeSortType === sortType){ this.setState({ activeSortType: sortType, ascSort: !ascSort }) } else { this.setState({ activeSortType: sortType, ascSort: true }) }}

то ж самое, только не дублировать setState(...

может быть, так а что там должно быть не так как на клиенте настроено?

вот например мой конфиг бабеля для ssr { test: /\.(js|jsx|mjs)$/, include: [paths.appSrc, paths.appServer], loader: require.resolve('babel-loader'), options: { presets: ['react-app'], plugins: ['syntax-dynamic-import', 'dynamic-import-node', 'react-loadable/babel'], compact: true, }, },

какой смысл юзать jsx и mjs вместе?

больше форматов больше развлечения?

вот мой конфиг для сервера const serverCfg = { entry: './src/server.js', output: { path: resolve(__dirname, 'dist'), filename: 'server.js', publicPath: '/' }, target: 'node', externals: nodeExternals(), plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ], module: { rules: [ { test: /\.js$/, loader: 'babel-loader' } ] } };

ERROR: S client not available

да и как бы юзать один и тот же лоадер для js и mjs не резонно

вся суть разницы теряется

какой смысл юзать jsx и mjs вместе?

я не юзаю, это cra после eject

пздц

@sergeysova this.setState({ activeSortType: sortType, ascSort: (activeSortType === sortType) ? !ascSort : true });

вот мой конфиг для сервера const serverCfg = { entry: './src/server.js', output: { path: resolve(__dirname, 'dist'), filename: 'server.js', publicPath: '/' }, target: 'node', externals: nodeExternals(), plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ], module: { rules: [ { test: /\.js$/, loader: 'babel-loader' } ] } };

presets может

@sergeysova this.setState({ activeSortType: sortType, ascSort: (activeSortType === sortType) ? !ascSort : true });

ну типа того

{ "presets": [["es2015", { "modules": false }], "react", "stage-0"], "plugins": [ "react-hot-loader/babel", "syntax-dynamic-import" ] }

@sergeysova this.setState({ activeSortType: sortType, ascSort: (activeSortType === sortType) ? !ascSort : true });

this.setState((prevState) => ({activeSortType: sortType, activeSortType: (prevState.activeSortType === sortType) ? !ascSort : true}))

https://www.npmjs.com/package/babel-plugin-import-node

не помогло(

не помогло(

значит проблема на другом уровне

как можно более красиво написать этот кусок ?? const sortData = () => { const {activeSortType, ascSort} = this.state; if(activeSortType === sortType){ this.setState({ activeSortType: sortType, ascSort: !ascSort }) } else { this.setState({ activeSortType: sortType, ascSort: true }) }}

да, лучше функцией

@AsTex опа, сет стейт принимает предыдущий стейт ... не знал

this.setState((prevState) => ({activeSortType: sortType, activeSortType: (prevState.activeSortType === sortType) ? !ascSort : true}))

вот так

@AsTex опа, сет стейт принимает предыдущий стейт ... не знал

setState принимает функцию, и передает в неё предыдущий

спасибо парни

кто юзает react-datepicker, там можно с клавы дату вводить? в демках ничего про это нет. в доке к пропсам ноль описания

не делать сетсейт в рендере?

не делать сетсейт в рендере?

но мне нужно знать сколько pointов отрендеренно

точнее порядковый номер каждого

поменял скрин,не правильно показал

маи глоза

setState в рендере???

втф

маи глоза

можно по делу? а не писать чушь

setState в рендере???

я знаю,что нельзя

можно по делу? а не писать чушь

у тебя в коде пиздец

можно по делу? а не писать чушь

не чушь)

по существу мы тут будем минут 20 расписывать

ну тут реально лютяк

у тебя в коде пиздец

я знаю,что нельзя так писать.SetState в рендер методе