bezenson / react-odometerjs Goto Github PK

transitionCheckStyles = document.createElement('div').style;
  ^

ReferenceError: document is not defined

new Odometer
V:/Git/canard/node_modules/odometer/odometer.js:133
  130 |   _this = this;
  131 | this.options = options;
  132 | this.el = this.options.el;
> 133 | if (this.el.odometer != null) {
  134 |   return this.el.odometer;
  135 | }
  136 | this.el.odometer = this;

ReactOdometer.componentDidMount
V:/Git/canard/node_modules/react-odometerjs/dist/index.js:43
  40 | _createClass(ReactOdometer, [{
  41 |   key: 'componentDidMount',
  42 |   value: function componentDidMount() {
> 43 |     this.odometer = new _odometer2.default(_extends({
  44 |       el: _reactDom2.default.findDOMNode(this),
  45 |       value: this.props.value
  46 |     }, this.props.options));

$ gatsby build
...
failed Building static HTML for pages - 1.838s

 ERROR #95312 

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  31 |   TRANSITION_END_EVENTS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
  32 |
> 33 |   transitionCheckStyles = document.createElement('div').style;
     | ^
  34 |
  35 |   TRANSITION_SUPPORT = (transitionCheckStyles.transition != null) || (transitionCheckStyles.webkitTransition != null) ||
(transitionCheckStyles.mozTransition != null) || (transitionCheckStyles.oTransition != null);
  36 |


  WebpackError: ReferenceError: document is not defined
  
  - odometer.js:33 
    node_modules/odometer/odometer.js:33:1
  
  - odometer.js:653 
    node_modules/odometer/odometer.js:653:2
  
  - index.js:15 
    node_modules/react-odometerjs/dist/index.js:15:17

Could not find a declaration file for module 'react-odometerjs'. '.../node_modules/react-odometerjs/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-odometerjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-odometerjs';`ts(7016)

import dynamic from 'next/dynamic';

const Odometer = dynamic(import('react-odometerjs'), {
  ssr: false,
  loading: () => 0,
});

import { Container, Content, Title, Item } from './styles';

export function OurNumbers() {
  return (
    <Container>
      <Title>Números</Title>
      <Content>
        <Item>
          <Odometer value={1234} format="(.ddd),dd" />
        </Item>
        <Item>
          <Odometer value={1234} format="(.ddd),dd" />
        </Item>
        <Item>
          <Odometer value={1234} format="(.ddd),dd" />
        </Item>
      </Content>
    </Container>
  );
}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Odometer from 'react-odometerjs';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Odometer
          value={1234}
          format="(,ddd).dd"
          options={{
            auto: false, // Don't automatically initialize everything with class 'odometer'
            selector: '.my-numbers', // Change the selector used to automatically find things to be animated
            format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
            duration: 3000, // Change how long the javascript expects the CSS animation to take
            theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
            animation: 'count'
          }}
        />
      </div>
    );
  }
}

export default App;

this.setState({ theMoney: 17.60 });

...

<Odometer value={this.state.theMoney} duration={1000} format='(,ddd).dd'/>

transitionCheckStyles = document.createElement('div').style;
   ^
 
 ReferenceError: document is not defined
     at Object.<anonymous> (/home/xxx/node_modules/odometer/odometer.js:33:3)
     at Object.<anonymous> (/home/xxx/node_modules/odometer/odometer.js:653:4)
     at Module._compile (internal/modules/cjs/loader.js:678:30)
     at Module._extensions..js (internal/modules/cjs/loader.js:689:10)
     at Object.require.extensions.(anonymous function) [as .js] (/home/xxx/node_modules/babel-register/lib/node.js:152:7)
     at Module.load (internal/modules/cjs/loader.js:589:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
     at Module._load (internal/modules/cjs/loader.js:520:3)
     at Function.module._load (/home/xxx/node_modules/piping/lib/piping.js:218:16)
     at Module.require (internal/modules/cjs/loader.js:626:17)

import Odometer from 'react-odometerjs'
{this.state.someNumber ?  <Odometer value={this.state.someNumber} format="(,ddd)" /> : '--'}

const Odometer = dynamic(() => import("react-odometerjs"), {
  ssr: false,
  loading: () => <div>0</div>,
})