0

Here's my advancedsearchfiles.css

.AdvancedSearchGrid {
    width: 70%; 
    margin: auto;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
  }

  .AdvancedSearchField {
    padding: none;
    width: 320px;
    height: 20px;
    line-height: 20px;
    text-align: left;
    border: none;
    box-shadow: none;
  }

Here's my ReactJS class where I import it and use it:

import React, {Component} from 'react';
//...other imports...
import './styles/advancedsearchfields.css';

// irrelevant stuff

<div className="AdvancedSearchGrid">
  <TextField className="AdvancedSearchField" name="firstName" value=
  {this.state.firstName} onChange={this.handleChange.bind(this)} 
  floatingLabelText="Firstname" inputStyle={{boxShadow: 'none'}} 
  floatingLabelFocusStyle={{color: '#4e90c8'}} underlineFocusStyle=
  {{backgroundColor: '#4e90c8', height: '2px'}}/>
</div>

When building the project now I get the error:

events.js:160
        throw er; // Unhandled 'error' event

SyntaxError: Unexpected token

If I remove the import of the css file, this error doesn't occur. Removing any of the other related code doesn't remove the error, so it is definitely the import of the css that causes it.

What am I doing wrong? I was following a tutorial that did it like this.

Steve Waters
  • 3,348
  • 9
  • 54
  • 94
  • That is a bad error message. You open a defect for that with reactjs. But then did you follow reactjs documentation for including css. – bhantol Jan 16 '18 at 17:43
  • @bhantol, I followed the 1. option in this: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 – Steve Waters Jan 16 '18 at 17:48
  • Guessing that your webpack config may have some issues. Follow this https://javascriptplayground.com/css-modules-webpack-react/ to see if you have all the setup. – bhantol Jan 16 '18 at 17:57
  • https://stackoverflow.com/a/39853767/2103767 – bhantol Jan 16 '18 at 18:00
  • I can't find a webpack config in this project. Project wide search with the word webpack only shows that it's in the package.json. This is a Angular 1 project with one ReactJS view in it. – Steve Waters Jan 17 '18 at 06:59
  • Well, I fixed it by changing ng-app from html tag to body tag in index.html. So I could use the styled-components and didn't have to use stylesheet. This particular problem still remains a mystery though. – Steve Waters Jan 17 '18 at 10:44

0 Answers0