Module not found: Error: Cannot resolve module 'semantic-ui-css'

Question

I'm trying to use Webpack + Semantic UI but without success. I tried...

1. npm i semantic-ui-css
2. In my index.js.. import semantic from 'semantic-ui-css'

3. I add configuration into my webpack.config.js

   resolve: { 
         alias: {'semantic-ui': path.join(__dirname, "node_modules", "semantic-ui-css", semantic.min.js")
   }
   

But when I try to buid... error..

ERROR in ./src/index.js Module not found: Error: Cannot resolve module 'sematic-ui-css' in /Users/ridermansb/Projects/boilerplate-projects/vue/src @ ./src/index.js 15:20-45

Full source here

Biyearly

Are you transpiling your code? Have you tried using the babel loader for this? Instead of aliasing the library, you could just target it directly (Remove the alias and let webpack load the file automatically) – Settle

Answer 1

All you have to do:

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

js: import 'semantic-ui-css/semantic.js';

This solves my problem with webpack and react.

Remediosremedy

Answer 2

If you came here trying to use 'semantic-ui-react' you need to install 'semantic-ui-css' seperatly to grab the css files:

yarn add semantic-ui-css

and then import it in the index.js

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

Congius

Answer 3

To use 'semantic-ui-react' you need to install 'semantic-ui-css' npm add semantic-ui-css then you need to import the css file into 'index.js' file.

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

Westley

Answer 4

I'm not sure if this solution applies to the problem you are having. However, if anyone is having issues with

"Error: The following dependencies are imported but could not be resolved:"

For the semantic UI used with vite & react then you could run this command.

npm install semantic-ui-react semantic-ui-css

Gardell