Semantic-ui-react: How do you get semantic-ui-react webpacked?

Created on 15 Dec 2016 · 3Comments · Source: Semantic-Org/Semantic-UI-React

Hi,

Sorry, it isn't clear to me from the webpack configs. How do you get semantic-ui-react webpacked? I am getting non-hmr capable errors that trace back to semantic-ui-react and I assume it's because the library isn't being webpacked.

So how exactly do I get it webpacked?

question

Source

Ctesias

👍5

Most helpful comment

This is not a semantic-ui-react issue. Our docs are built with webpack including webpack-dev-middleware and webpack-hot-middleware (HMR). This is working on master and other users' forks.

You can reference our doc site webpack config for example.

Also, here is a super slim example sans HMR:

webpack.config.js

module.exports = {
  entry: './main.js',
  output: { filename: 'bundle.js', path: './' },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', query: { presets: ['react', 'es2015'] } }],
  }
}

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'semantic-ui-react'

const MyApp = () => <Button>Click Me</Button>

const mountNode = document.createElement('div')
document.body.appendChild(mountNode)

ReactDOM.render(<MyApp />, mountNode)

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

Running

levithomason on 16 Dec 2016

👍5

All 3 comments

@Ctesias
I'm having the same issue... when I try to webpack it, I get the following error:

Cannot read property 'Component' of undefined

When I debug, it's actually M.Component ... so it's the 'M' that's undefined.

Here's my package.json
"dependencies": {
"axios": "^0.15.3",
"express": "^4.14.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0",
"semantic-ui-css": "^2.2.4",
"semantic-ui-react": "^0.62.1"
}

Here's my webpack.config.js:
module.exports = {
entry: [
'script!semantic-ui-css/semantic.min.js',
'script!semantic-ui-react/dist/umd/semantic-ui-react.min.js',
'./app/app.jsx'
],

Here's its require statement in my app.jsx:
require('style!css!semantic-ui-css/semantic.min.css');

Building this using webpack yields a successful build and does not throw the error mentioned above in the terminal, however Chrome & Firefox browsers do throw the above-mentioned error in the console, and it breaks the app :-(

quadsurf on 15 Dec 2016

https://github.com/webpack/webpack/issues/1701