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
Z.Clemens
  • 5
  • 1
  • 4
  • what is an error in console? May me your webpack configuration is missing something. – Yogesh Patel Apr 28 '17 at 04: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? – Z.Clemens Apr 28 '17 at 04: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 `````` – Rei Dien Apr 28 '17 at 05:56

1 Answers1

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.

David Fusilier
  • 301
  • 2
  • 8
  • I actually included it directly in Dropdown.js. Sorry I forgot to include it in the code snippet above, updated. No luck yet. – Z.Clemens Apr 28 '17 at 04:41
  • I don't think you can import css that way with ES6? See second answer here: http://stackoverflow.com/questions/24923479/can-es6s-module-loader-also-load-assets-html-css Also, this seems to address your exact issue: https://github.com/JedWatson/react-select/issues/176 – David Fusilier Apr 28 '17 at 04:52
  • Thanks, I ended up including the css imports directly in the html. – Z.Clemens Apr 28 '17 at 23:44