How to use semantic modules in React components?

[mihir0x69]

I'm having trouble integrating semantic modules with React components. I'm using webpack. JQuery is properly loaded, but when I try to use popup() or accordion() functions, it throws error- App.js?5185:11Uncaught TypeError: (0 , _jquery2.default)(...).popup is not a function

webpack-

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw'],
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json' ],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
}

React component -

import React, { Component } from 'react'
import 'semantic-ui/dist/semantic.min.css'

import $ from 'jquery'
import jQuery  from 'jquery'
window.jQuery = jQuery
import 'semantic-ui/dist/semantic.min.js'

export default class App extends Component{
  componentDidMount(){
    $('.example').popup({on: 'click', lastResort: true})
  }
  render(){
    return(
      <div>
        <h1>Hello, React!</h1>
          <div className="ui icon button example" data-content="Add users to your feed">
  <i className="add icon"></i>
</div>
      </div>
    )
  }
}

[IonutBajescu]

What version of semantic-ui are you using?

[mihir0x69]

@IonutBajescu I'm using 2.2.. I tried for some time then gave up. For the time being I'm using semantic-ui-css which is without any jquery hassle.

[IonutBajescu]

@mihir-harbinger Understood. If you change your mind and want the entire framework, please use the 2.1 version. It appears you're not the only one experiencing problems with webpack and Semantic UI 2.2.

[maksis]

Version 2.2 works fine for me together with jquery 2.x (jquery 3.0 breaks things though, as mentioned in #4202).

[mihir0x69]

@IonutBajescu @maksis Thank you for the quick-fix. I'll try it out asap.

[mihir0x69]

@IonutBajescu Is there any progress on jQuery version issue? I wish to use semantic-ui instead of semantic-ui-css in my react + webpack project.

[levithomason]

It is impossible to keep jQuery and React's virtual DOM in sync. There's good news, Semantic UI now has an official React project: https://github.com/TechnologyAdvice/stardust

It will soon be ported to Semantic-UI-React. Cheers! @KarandikarMihir @maksis @IonutBajescu

[mihir0x69]

@levithomason Awesome! Why is it not under Semantic-Org?

[levithomason]

We've been busy round the clock working on exactly that. See https://github.com/Semantic-Org/Semantic-UI-React.

Track our progress here:

Migrating to Semantic-UI-React
Removing jQuery
Update legacy component APIs to the v1 API

[besh]

How will the stardust integration affect this issue? Are there plans to allow theming without needing gulp since many react users are using webpack?

[levithomason]

How will the stardust integration affect this issue?

This issue is no longer an issue. The answer is you won't use any SUI modules in React, you'll use Semantic-UI-React components.

Are there plans to allow theming without needing gulp since many react users are using webpack?

Theming concerns only CSS, Semantic-UI-React concerns only JS and generating valid Semantic-UI HTML. So, theming is not within the scope of Semantic-UI-React. Use the current theming system instead.

If you search Semantic-UI-React issues, you'll see several issues and ideas that have been raised about this. Maybe someday in the future, we'll design something to ease the need to theme. In a past life, I built an in browser theme designer for Bootstrap called bootstyle (be patient, server goes to sleep). I imagine something similar for SUI except React based and much faster.

[besh]

@levithomason Thanks for the response. I was hoping that Semantic-UI would have an official documented way to use Webpack in the near future now that Semantic-UI-React is the official React integration.

[levithomason]

I don't think it is entirely reasonable as Webpack is not technically required, you could use Browserify or some other method of bundling your app. You also just put the latest published umd build in a script tag. We do this in the Codepen (see settings):

<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>

What I'm poking at is that Semantic-UI-React is a library that is agnostic to your tech stack. As much as I hate maintaining Webpack and build systems, it'd be a bummer to try and manage a guide on how to do that as well.

All said, over @TechnologyAdvice (where Semantic-UI-React came from) we've got a tool that handles running a dev server, building, testing, and linting. It is same stack that power's Semantic-UI-React. I hope to use it for Semantic-UI-React soon. We'll likely open source it when that happens.

[ghost]

Hi, anybody figure out how to get this going?

[mihir0x69]

@chriswingler It's been days. If I remember correctly, I switched to an older version of semantic-ui. The then latest version had issues with jquery 3.3.0.

[nicolaslawdune]

I have the same problem, when I bundle vendor lib with webpack containing semantic-ui.js and jquery.js, It says that my plugin/component is not a function.
I used semantic 2.2.2 then I upgrade to 2.2.9.

I've just started to use webpack, I don't understand what are requirement to use plugin with webpack.

[levithomason]

Closing this as there is now an officially supported and hosted React implementation, https://github.com/Semantic-Org/Semantic-UI-React.

@nicolaslawdune Here are some webpack setup examples:

Webpack 1: http://react.semantic-ui.com/usage#bundlers
Webpack 2 (not yet merged): Semantic-Org/Semantic-UI-React#1497