react.js stateless component gives "is invalid" error when importing

Question

I'm getting an error type is invalid when I try to import a stateless component into my App.js to run. When I run the same code in App.js, it works just fine but when I import it, it breaks. What is the solution here and what is going on?

Thank you in advance

my mobile.js

import React from 'react';

//this part will be imported via a component.  Need to check and make sure how to update state via component.
const checkIfMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
    return (
      checkIfMobile.Android() ||
      checkIfMobile.BlackBerry() ||
      checkIfMobile.iOS() ||
      checkIfMobile.Opera() ||
      checkIfMobile.Windows()
    );
  }
};

export default checkIfMobile;

Which is imported into App.js and gives me the type is invalid error.

import React, { Component } from 'react';
import ChromePluginNotice from '../components/banner/ChromePluginNotice';
import Content from './Content';
import Banner from './Banner';
import Footer from '../components/footer/Footer';
import checkIfMobile from '../components/banner/checks/mobile';

// //this part will be imported via a component.  Need to check and make sure how to update state via component.
// const checkIfMobile = {
//   Android: function() {
//     return navigator.userAgent.match(/Android/i);
//   },
//   BlackBerry: function() {
//     return navigator.userAgent.match(/BlackBerry/i);
//   },
//   iOS: function() {
//     return navigator.userAgent.match(/iPhone|iPad|iPod/i);
//   },
//   Opera: function() {
//     return navigator.userAgent.match(/Opera Mini/i);
//   },
//   Windows: function() {
//     return navigator.userAgent.match(/IEMobile/i);
//   },
//   any: function() {
//     return (
//       checkIfMobile.Android() ||
//       checkIfMobile.BlackBerry() ||
//       checkIfMobile.iOS() ||
//       checkIfMobile.Opera() ||
//       checkIfMobile.Windows()
//     );
//   }
// };

export default class App extends Component {
  constructor() {
    super();
    this.state = { isMobile: checkIfMobile.any() };
  }
  render() {
    const { isMobile } = this.state; // destructure isMobile to variable

    return (
      <div>
        <ChromePluginNotice />

        <Banner isMobile={isMobile} />
        <Content isMobile={isMobile} />
        <Footer />
      </div>
    );
  }
}

Not sure what to do to fix it from here. The full error is

invariant.js?4599:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of invariant.js?4599:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of StatelessComponent .

Answer 1

这是一些恶意代码试图访问我的 mobile.js 的旧版本，现在一切正常。