javascript - Can't resolve 'semantic-ui-react' - Stack Overflow

admin管理员组

文章数量:1399981

I think I followed all steps for set up 'semantic-ui-react' that other said to do but there is an error.

ERROR in ./assets/ponents/UserPage/UserPageQuestion/UserPageQuestion.js Module not found: Error: Can't resolve 'semantic-ui-react' in 'C:\Users\1Sun\Cebula3\cebula_react\assets\ponents\UserPage\UserPageQuestion' @ ./assets/ponents/UserPage/UserPageQuestion/UserPageQuestion.js 31:0-67 91:63-70 91:98-104 93:29-35 93:76-81 95:31-38 95:66-72 98:29-35 100:42-47 @ ./assets/ponents/UserPage/index.js @ ./assets/ponents/UserPage/UserPage.js @ multi ./assets/ponents/UserPage/UserPage.js

package.json

...

"dependencies": {
    ...
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.4",
    ...
  }

...

UserPageQuestion.js

import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'

import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.js';
import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.css';

const UserPageQuestion = () => {
     return (
          <Segment>
                 <Dimmer active>
                       <Loader>Loading</Loader>
                 </Dimmer>
                 <Image src='/images/wireframe/short-paragraph.png' />
          </Segment>
     )

}

What's the problem??

I think I followed all steps for set up 'semantic-ui-react' that other said to do but there is an error.

ERROR in ./assets/ponents/UserPage/UserPageQuestion/UserPageQuestion.js Module not found: Error: Can't resolve 'semantic-ui-react' in 'C:\Users\1Sun\Cebula3\cebula_react\assets\ponents\UserPage\UserPageQuestion' @ ./assets/ponents/UserPage/UserPageQuestion/UserPageQuestion.js 31:0-67 91:63-70 91:98-104 93:29-35 93:76-81 95:31-38 95:66-72 98:29-35 100:42-47 @ ./assets/ponents/UserPage/index.js @ ./assets/ponents/UserPage/UserPage.js @ multi ./assets/ponents/UserPage/UserPage.js

package.json

...

"dependencies": {
    ...
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.4",
    ...
  }

...

UserPageQuestion.js

import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'

import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.js';
import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.css';

const UserPageQuestion = () => {
     return (
          <Segment>
                 <Dimmer active>
                       <Loader>Loading</Loader>
                 </Dimmer>
                 <Image src='/images/wireframe/short-paragraph.png' />
          </Segment>
     )

}

What's the problem??

• javascript
• reactjs
• semantic-ui
• semantic-ui-react

Share Improve this question Follow asked Sep 30, 2018 at 1:28 1Sun1Sun 2,36555 gold badges1515 silver badges2222 bronze badges 1

• why have you imported semantic.min.* ? – Amir-Mousavi Commented Sep 30, 2018 at 2:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In your UserPageQuestion.js remove the following 2 imports:

import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.js';
import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.css';

Just include the minified CSS file in your index.js file:

import 'semantic-ui-css/semantic.min.css';

Source: Semantic UI docs

You can use the following to solve your problem:

export default UserPageQuestion

本文标签： javascriptCan39t resolve 39semanticuireact39Stack Overflow