Vue-cli: How to add new definitions to webpack.DefinePlugin?

[pendenaor]

Version

3.0.0-rc.3

Reproduction link

https://gist.github.com/pendenaor/591d5ffb3af4edbe640d20abeb8d999d

Steps to reproduce

1) create an app with vue-cli 3 rc3
2) copy App.vue and vue.config.js
3) Run the app

What is expected?

jQuery and lodash are available

What is actually happening?

jQuery and lodash are 'undefined'

---

inspect command output

...
  plugins: [
    /* config.plugin('vue-loader') */
    new VueLoaderPlugin(),
    /* config.plugin('define') */
    new DefinePlugin(
      {
        'process.env': {
          NODE_ENV: '"development"',
          VUE_APP_CLI_UI_URL: '""',
          BASE_URL: '"/"'
        }
      }
    ),
    /* config.plugin('case-sensitive-paths') */
    new CaseSensitivePathsPlugin(),
    /* config.plugin('friendly-errors') */
    new FriendlyErrorsWebpackPlugin(
      {
        additionalTransformers: [
          function () { /* omitted long function */ }
        ],
        additionalFormatters: [
          function () { /* omitted long function */ }
        ]
      }
    ),
    /* config.plugin('hmr') */
    new HotModuleReplacementPlugin(),
    /* config.plugin('no-emit-on-errors') */
    new NoEmitOnErrorsPlugin(),
    /* config.plugin('progress') */
    new ProgressPlugin(),
    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        template: 'C:\\Public\\Repo\\new-vue-cli\\sinoc_ui\\public\\index.html'
      }
    ),
    /* config.plugin('preload') */
    new PreloadPlugin(
      {
        rel: 'preload',
        include: 'initial',
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    /* config.plugin('prefetch') */
    new PreloadPlugin(
      {
        rel: 'prefetch',
        include: 'asyncChunks'
      }
    ),
    /* config.plugin('copy') */
    new CopyWebpackPlugin(
      [
        {
          from: 'C:\\Public\\Repo\\new-vue-cli\\sinoc_ui\\public',
          to: 'C:\\Public\\Repo\\new-vue-cli\\sinoc_ui\\dist',
          ignore: [
            'index.html',
            '.DS_Store'
          ]
        }
      ]
    ),
    {
      definitions: {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      }
    }
  ],
...

[pendenaor]

found a way:

const webpack = require('webpack')

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      })
      return definitions
    })
  }
}

[pedroresende]

@pendenaor I have a question, about this. Were you obliged to have import $ from "jquery"; in the <script> inside every vue file you wanted to use ? Did you add anything else to .eslintrc.js ?

[pendenaor]

I import jquery in my main.js. I didn't have .eslintrc.js, but in my package.json, i add these lines :

"eslintConfig": {
...
    "globals": {
      "$": false,
      "jQuery": false,
      "module": false,
      "logger": false
...

[pedroresende]

@pendenaor Thanks, however I can't make it to work ... I've added in main.js the import jquery (https://github.com/pedroresende/vue-experience/blob/master/src/main.js#L6) and I'm trying to use it in the Home.vue (https://github.com/pedroresende/vue-experience/blob/master/src/views/Home.vue#L18)

[pedroresende]

@pendenaor Thanks, finally found the problem. It seems that I have to define jquery globally

window.$ = window.jQuery = window.jquery = require("jquery");

[francoismassart]

This topic was useful!

I was trying to inject the semver version string from my package.json during the build process of my Vue app.

Here is how I injected this info via vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      definitions[0]['process.env']['PACKAGE_VERSION'] = JSON.stringify(require('./package.json').version);
      return definitions;
    });
  }
}

Then inside my sources in Vue: process.env.PACKAGE_VERSION 🥇

[AndreiSoroka]

@francoismassart
file vue.config.js:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

from: https://github.com/vuejs/vue-cli/issues/1904#issuecomment-436898726