TypeError: window[_constants.accountListName] is undefined

[romanown]

if (typeof window !== 'undefined') {
is not helped
is error bellow

ymAsyncProxy
/node_modules/react-yandex-metrika/lib/index.js:41

38 | args[_key2] = arguments[_key2];
39 | }
40 |

41 | window[_constants.accountListName].forEach(function (id) {
42 | var trackerVersion = window[(0, _constants.trackerVersionName)(id)];
43 | var callbackQueue = window[(0, _constants.callbackQueueName)(trackerVersion)];
44 | if (callbackQueue) {

ym
/node_modules/react-yandex-metrika/lib/index.js:56

53 |
54 | function ym() {
55 | if (isBrowser) {

56 | ymAsyncProxy.apply(undefined, arguments);
57 | }
58 | }
59 |

./src/RoutesContainer.js/webpack_exports.a<
/src/RoutesContainer.js:67

64 | export default withRouter(props => {
65 | const isMain = props.location.pathname === '/'
66 | if (typeof window !== 'undefined') {

67 | ym('hit', props.location.pathname);
68 | }
69 |
70 | return (

[narkq]

Пожалуйста, отформатируйте вывод по-нормальному.
Ну или скриншот приложите, на худой конец 🙂
Кроме того, не вижу в Вашем сообщении собственно текста ошибки.
Когда именно возникает ошибка? При сборке webpack-ом? При открытии страницы?

[romanown]

в момент компиляции такое. TypeError: window[_constants.accountListName] is undefined. я это из браузера скопировал что в сообщении

[romanown]

`TypeError: window[_constants.accountListName] is undefined
ymAsyncProxy
/node_modules/react-yandex-metrika/lib/index.js:41

args[_key2] = arguments[_key2];

}

window[_constants.accountListName].forEach(function (id) {
var trackerVersion = window[(0, _constants.trackerVersionName)(id)];
var callbackQueue = window[(0, _constants.callbackQueueName)(trackerVersion)];
if (callbackQueue) {

ym
/node_modules/react-yandex-metrika/lib/index.js:56

function ym() {
if (isBrowser) {
ymAsyncProxy.apply(undefined, arguments);
}
}

./src/RoutesContainer.js/webpack_exports.a<
D:/npm/dress/dress/src/RoutesContainer.js:70

if (typeof window !== 'undefined') { ym('hit', props.location.pathname) } `

[romanown]

но при переносе кода в другие места эта же ошибка выходила при попытке перехода между страницами сайта. используется серверный рендеринг.

[narkq]

Я правильно понимаю, что RoutesContainer.js - это компонент роутера?
Не совсем ясно, что там за if-statement в перемешку с JSX?

Вам нужно по сути написать код, который сможет реагировать на изменения роута и посылать соответствующие события. Это ни в коем случае нельзя делать в методе render. Как правило, это делают в методе componentWillReceiveProps (вот как например в библиотеке, ссылку на которую Вы давали https://github.com/sonaye/react-with-analytics/blob/master/src/withAnalytics.js#L23 ). Впрочем, componentWillReceiveProps вроде как deprecated, так что может быть можно просто подписаться на события навигации через https://github.com/ReactTraining/history например.

[romanown]

наверное надо было полностью привести код как оно сейчас.
import { YMInitializer } from 'react-yandex-metrika'; import ym from 'react-yandex-metrika'; const HistoryListener = withRouter(class extends React.Component { componentDidMount() { this.props.history.listen((props) => { ym('hit', this.props.location.pathname); }) } render() { return null } }) export default withRouter(props => { return ( <div> <YMInitializer accounts={[49433788]} /> <HistoryListener /> <Switch> <Route exact path="/" component={Home} />

[narkq]

Так все-таки в состоянии "как оно сейчас" работает? Или такая же ошибка?

Если такая же ошибка, то скорее всего это связано с тем, что к тому времени, как срабатывает HistoryListener.componentDidMount, не успевает отработать YMInitializer.componentDidMount (который, собственно, и создает глобальные объекты типа window[_constants.accountListName]).

Чтобы такого не происходило, можно поместить YMInitializer внутрь HistoryListener-а (т.к. метод componentDidMount вызывается в порядке, обратном иерархии компонентов). Например, так:

const HistoryListener = withRouter(
  class extends React.Component {
    historyUnlisten = null

    componentDidMount() {
      this.historyUnlisten = this.props.history.listen((location, action) => {
        ym('hit', `${location.pathname}${location.search}${location.hash}`)
      })
    }

    componentWillUnmount() {
      this.historyUnlisten()
    }

    render() {
      return <YMInitializer accounts={[49433788]} />
    }
  }
)

export default withRouter(
  props => {
    return (
      <div>
        <HistoryListener />
        <Switch>
          <Route exact path="/" component={Home} />
          ...
        </Switch>
        ...
      </div>
    )
  }
)

[narkq]

ибо дидмоунт вызывается не при всех переходах

Ох. Он и не должен вызываться при всех переходах. Нужно сделать так, чтобы componentDidMount для компонентов HistoryListener и YMInitializer вызывался (желательно) ровно один раз на полную перезагрузку страницы. После этого при навигации через роутер должен вызываться только обработчик, переданный в history.listen.

[romanown]

теоретически так оно и есть. поскольку что-то показывается, то инициализация идет. а вот при переходе уже не срабатывает передача hit. хотя код туда доходит. я ставил алерт на каждое место.

[narkq]

Какая версия react-yandex-metrika подключена?
Возможно, я кое-что сломал в 2.4.0 (или оно вообще не работало для случая, когда серверный код собирается webpack-ом).

[romanown]

"version": "2.3.0"

[narkq]

Попробуйте поставить из вот этой ветки https://github.com/narkq/react-yandex-metrika/tree/fix-bundler-eval (например, просто удалить node_modules/react-yandex-metrika и склонировать туда эту ветку).

Вызов ym('hit') по идее нужен только в обработчике, который слушает события навигации.
При первоначальной загрузке страницы сама библиотека яндекс метрики отсылает hit (если только не указано defer: true при подключении счетчика).

[romanown]

после обновления все работает. спасибо. это единственный на данный момент найденный мною компонент модуль для react reactjs для отправки сообщения в яндекс метрику о совершенном переходе ya.metrika hit для SPA сайта. написал так чтобы другие нашли эту страницу.