Semantic-ui: How to use semantic modules in React components?

Created on 30 Jun 2016 · 17Comments · Source: Semantic-Org/Semantic-UI

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>
    )
  }
}

Source

KarandikarMihir

All 17 comments

What version of semantic-ui are you using?

IonutBajescu on 5 Jul 2016

@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.

KarandikarMihir on 5 Jul 2016

@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.

IonutBajescu on 5 Jul 2016

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

maksis on 9 Jul 2016

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

KarandikarMihir on 13 Jul 2016

@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.

KarandikarMihir on 29 Jul 2016

👍1

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

levithomason on 14 Aug 2016

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

KarandikarMihir on 16 Aug 2016

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

levithomason on 17 Aug 2016

🎉1

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

besh on 3 Oct 2016

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.

levithomason on 3 Oct 2016

@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.

besh on 13 Oct 2016

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.

levithomason on 15 Oct 2016

Hi, anybody figure out how to get this going?

ghost on 27 Nov 2016

@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.

KarandikarMihir on 27 Nov 2016

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.