Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use semantic modules in React components? #4195

Closed
mihir0x69 opened this issue Jun 30, 2016 · 17 comments
Closed

How to use semantic modules in React components? #4195

mihir0x69 opened this issue Jun 30, 2016 · 17 comments

Comments

@mihir0x69
Copy link

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
Copy link
Member

What version of semantic-ui are you using?

@mihir0x69
Copy link
Author

@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
Copy link
Member

@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
Copy link

maksis commented Jul 9, 2016

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

@mihir0x69
Copy link
Author

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

@mihir0x69
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

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

@levithomason
Copy link
Member

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
Copy link

besh commented Oct 3, 2016

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
Copy link
Member

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
Copy link

besh commented Oct 13, 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.

@levithomason
Copy link
Member

levithomason commented Oct 14, 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.

@ghost
Copy link

ghost commented Nov 27, 2016

Hi, anybody figure out how to get this going?

@mihir0x69
Copy link
Author

@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
Copy link

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants