0

I am trying to add a dropdown menu to my application and I picked Selectize (https://github.com/furqanZafar/react-selectize). But it appears that it is not displayed correctly on the page. This is what is looks like, it seems that the css styles are missing. I am quite a rookie to React so please bear with me if this is not a smart question. Thanks in advance!

webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,

  entry: './assets/js/index', 

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets:['react'] }}, 
      {test: /\.css$/, loader: 'style-loader'},
      {test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]'}},
    ],
  },

  resolve: {
    modulesDirectories: ['node_modules', 'bower_components'],
    extensions: ['', '.js', '.jsx']
  },
}

Dropdown.js

import {ReactSelectize, SimpleSelect, MultiSelect} from 'react-selectize';
import React from 'react';
import 'react-selectize/themes/index.css'


export default class Dropdown extends React.Component {
    render() {
        return (
            <SimpleSelect placeholder="Select a fruit" onValueChange={value => alert(value)}>
                <option value = "apple">apple</option>
                <option value = "mango">mango</option>
                <option value = "orange">orange</option>
                <option value = "banana">banana</option>
            </SimpleSelect>
        )
    }
}

index.js

import Dropdown from "./components/dropdown"

var React = require('react')
var ReactDOM = require('react-dom')

ReactDOM.render(<Dropdown />, document.getElementById('container'))

The following error was in the console:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have 
refs. You might be adding a ref to a component that was not created 
inside a component's `render` method, or you have multiple copies of 
React loaded
3
  • what is an error in console? May me your webpack configuration is missing something. Commented Apr 28, 2017 at 4:29
  • The error is "Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded", sounds like I'm running React many times? Commented Apr 28, 2017 at 4:44
  • i dont know if you already figured this out. but if you are using css-modules with a specific indentifier you should import it as import style from './file.css' then use it as <ReactComponent className={ style.myClass } /> Commented Apr 28, 2017 at 5:56

1 Answer 1

1

For many react components, relevant CSS is included in the npm module, but cannot be loaded via import since they are not JS. Usually the styles have to be loaded separately.

The docs say:

to include the default styles add the following import statement to your > stylus file: @import 'node_modules/react-selectize/themes/index.css'

Did you include that? If you aren't using Stylus, you could just grab the css and paste it into your main CSS file.

Sign up to request clarification or add additional context in comments.

3 Comments

I actually included it directly in Dropdown.js. Sorry I forgot to include it in the code snippet above, updated. No luck yet.
I don't think you can import css that way with ES6? See second answer here: stackoverflow.com/questions/24923479/… Also, this seems to address your exact issue: github.com/JedWatson/react-select/issues/176
Thanks, I ended up including the css imports directly in the html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.