Modelesq Modelesq - 13 days ago 11
Javascript Question

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?

Answer

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.