Bundling fomantic-ui-css with webpack for VueJs

Question

I am trying to create a VueJs project using Vue-Cli and wanted to use fomantic-ui-css with it. I installed fomantic-ui using npm and then imported it the main.js, however when I run the application I get the ReferenceError: jQuery is not defined error from webpack.

semantic.js?2583:503 Uncaught ReferenceError: jQuery is not defined
    at eval (semantic.js?2583:503)
    at Object../node_modules/fomantic-ui-css/semantic.js (chunk-vendors.js:1216)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1009)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1023)
    at __webpack_require__ (app.js:849)
eval @ semantic.js?2583:503
./node_modules/fomantic-ui-css/semantic.js @ chunk-vendors.js:1216
__webpack_require__ @ app.js:849
fn @ app.js:151
eval @ main.js:12
./src/main.js @ app.js:1009
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1023
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
sockjs.js?9be2:1609 GET http://192.168.1.101:8080/sockjs-node/info?t=1624957335646 net::ERR_CONNECTION_REFUSED

Below is how my config looks like

main.js

import { createApp } from 'vue'
import App from './App.vue'

import 'fomantic-ui-css/semantic'
import 'fomantic-ui-css/semantic.css'

createApp(App).mount('#app')

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
        })
    ],
    entry: {
        app: './src/main.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist'
    },
}

package.json

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "css-loader": "^5.2.6",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "fomantic-ui-css": "^2.8.8",
    "jquery": "^3.6.0",
    "webpack": "^4.1.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

What am I missing here ?

score 0 · Answer 1 · answered Jul 01 '21 at 15:02

The mistake I was making was creating the separate webapack config, all I needed to do was create a vue.config.js and put the additional webpack config in there like below.

let webpack = require('webpack')

module.exports = {
  configureWebpack: {
      plugins: [
          new webpack.ProvidePlugin({
              $: 'jquery',
              jquery: 'jquery',
              'window.jQuery': 'jquery',
              jQuery: 'jquery'
          })
      ],
      entry: {
          app: './src/main.js'
      },
  }
}

And it just worked for me without making any more changes.

Bundling fomantic-ui-css with webpack for VueJs

1 Answers1