Q:

Importing semantic ui into a react component

I've installed semantic ui via npm. Its currently within node_modules and was built into /dist/. Looks like so:
"devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "semantic-ui": "^2.2.2"
  }

And file structure looks like...
 /node_modules/
        |- ...
        |- semantic-ui
               |- dist
                    |- components
                    |- themes
                    |- semantic.min.css
                    |- semantic.min.js

In my react component app.jsx, i'm importing react, react-dom, jquery, but it seems to have an issue with semantic-ui-
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import * from 'semantic-ui';

ERROR in ./assets/js/app.jsx
Module build failed: SyntaxError: /Users/maude/Projects/coffee/assets/js/app.jsx: Unexpected token (4:9)
  2 | import ReactDOM from 'react-dom';
  3 | import $ from 'jquery';
> 4 | import * from 'semantic-ui';

Why is this import a problem? How can I bring semantic-ui css/js into my project?

A:

If you want to import an entire module for side effects only, without importing any bindings, then write:
import 'semantic-ui';
Otherwise, you will need to name it:
import * as semantic from 'semantic-ui';
Although it likely has a default export, so you can just write:
import semantic from 'semantic-ui';
Edit: Although, for semantic-ui, the import process appears to work a little differently than you might expect. Have a look at this discussion.

