Module not found: Error: Cannot resolve module 'react-native' when changing css

[luizkowalski]

I have two file: Navbar.js and Navbar.css
the Navbar.js is as follows

import React from 'react';
import './Navbar.css'
import githubLogo from '../github-octocat.svg';

const Navbar = React.createClass({

  render(){
    return(
      <nav className="nav">
        <div className="nav-left">
          <a className="nav-item is-brand" href="#">
            <img src={githubLogo} alt="Bulma logo" />
            Chathub
            </a>
          </div>

          <div className="nav-center">

          </div>

          <span className="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
          </span>

          <div className="nav-right nav-menu">
            {
              this.props.logged ? (
            <span className="nav-item">
              <a className="button is-primary" onClick={this.props.logout}>
                <span className="icon">
                  <i className="fa fa-cog"></i>
                </span>
                <span>Logout</span>
              </a>
            </span>
          ) : '' }
          </div>
        </nav>
      )
    }
  });

  export default Navbar;

and the css is pretty simple

.nav-item img {
    max-height: 35px;
}

but, everytime I change the css and save, I get the following error in console

Error in ./src/components/Navbar.js
Module not found: Error: Cannot resolve module 'react-native' in /Users/luizeduardo/js_dev/chub/src/components
resolve module react-native in /Users/luizeduardo/js_dev/chub/src/components
  looking for modules in /Users/luizeduardo/js_dev/chub/node_modules
    /Users/luizeduardo/js_dev/chub/node_modules/react-native doesn't exist (module as directory)
    resolve 'file' react-native in /Users/luizeduardo/js_dev/chub/node_modules
      resolve file
        /Users/luizeduardo/js_dev/chub/node_modules/react-native doesn't exist
        /Users/luizeduardo/js_dev/chub/node_modules/react-native.js doesn't exist
        /Users/luizeduardo/js_dev/chub/node_modules/react-native.json doesn't exist

and my Navbar.js becomes this mess

import React, {StyleSheet, Dimensions, PixelRatio} from "react-native";
const {width, height, scale} = Dimensions.get("window"),
    vw = width / 100,
    vh = height / 100,
    vmin = Math.min(vw, vh),
    vmax = Math.max(vw, vh);

export default StyleSheet.create({
    "nav-item img": {
        "maxHeight": 35
    }
});

I'm not sure what is going on here. It is really strange that it has something to do with react-native

anyway, here is my package.json

{
  "name": "react-test",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.2.1"
  },
  "dependencies": {
    "axios": "^0.13.1",
    "jquery": "^3.1.0",
    "material-ui": "^0.15.4",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.7.0",
    "react-tap-event-plugin": "^1.0.0",
    "react-timeago": "^3.1.2",
    "reactfire": "^1.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

[gaearon]

Can you please provide a complete project reproducing this?
It looks very weird.

[fson]

@luizkowalski Are you using Atom? Can you check if you have a package named atom-react-native-css installed? I was able to reproduce this by installing this package and saving the CSS file.

It does exactly what you described, i.e. it converts the CSS file to a React Native stylesheet and saves it to a file with the same name, changing the file extension to .js.

[gaearon]

Wow, this is funny. Thanks for explaining @fson. 👍

[luizkowalski]

@fson that was exactly the problem! thanks so much

[quadsurf]

@fson @luizkowalski @gaearon

so the same exact thing is happening to me too!

and yes i'm using atom too
and yes i had Atom Package "atom-react-native-css installed"

i assume you uninstalled that Atom Package to solve the issue, but uninstalling it did not work for me... the problem still persists

what did you guys do to solve the issue? please help!

[fson]

@quadsurf You might have to restart Atom after uninstalling the plugin for the changes to take effect.

[quadsurf]

argh, i hate when the obvious eludes me! thanks @fson ... it's solved now!

[gamooga-echoabhishek]

Hi
I'm using webstorm and facing the same issue.

[tayyab786]

@luizkowalski m new to React and i also have the same problem ..how i can reslove because i don't have package that you are asking to uninstall and m also using Atom

[bugzpodder]

@tayyab786 it could be another package within Atom? See #2529 (comment)