How can I use webpack.ProvidePlugin ?

[nuxt]

How can I use webpack.ProvidePlugin ?

[dan-gamble]

I'm not 100% sure what semantic ui needs from the provide plugin but you can use it like this:

In your nuxt.config.js

const webpack = require('webpack')

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        '_': 'lodash'
        // ...etc.
      })
    ]
  }
}

[fortil]

@dan-gamble doesn't work to me... with what versión works?

[limasierra]

Hi,

I'm also having this issue. npm run dev gives me

ERROR

  Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type s  tring

  - path.js:28 assertPath
    path.js:28:11

  - path.js:1469 extname
    path.js:1469:5

  - builder.js:71 _.uniqBy.options.plugins.map
    [cve-miner-gui]/[nuxt]/lib/builder/builder.js:71:48

  - Array.map

  - builder.js:69 Builder.get plugins [as plugins]
    [cve-miner-gui]/[nuxt]/lib/builder/builder.js:69:28

  - builder.js:256 Builder.generateRoutesAndFiles
    [cve-miner-gui]/[nuxt]/lib/builder/builder.js:256:21

  - builder.js:165 Builder.build
    [cve-miner-gui]/[nuxt]/lib/builder/builder.js:165:16

What I've done in nuxt.config.js:

const webpack = require('webpack')

module.exports = {
  [...]
  plugins: [
    { src: '~plugins/myOtherPlugin.js', ssr: false },
    new webpack.ProvidePlugin({
        '$': 'jquery',
      })
  ],
  [...]

On top of that, the Nuxt.js FAQ page is at odds with the API docs:

• FAQ: How to add webpack plugins? describes exactly what I'm doing, but
• API: The plugins Property states that entries to the plugins array can only be of String or { src: String, ssr: Boolean } type.

Bottom line: I think the documentation on the FAQ page is out of date, but I cannot figure out how to solve the problem.

[limasierra]

Philcal, I just noticed something!

I placed the webpack.ProvidePlugin in

module.exports = {
  plugins: [ /* here */ ]
}

whereas it should probably be in

module.exports = {
  plugins: [ /* not here */ ],
  build: {
    plugins: [ /* but here! */ ]
  }
}

An example can be found in this issue: #1319 .
On top of that, the FAQ page I mentioned earlier also states this. I think I just missed that it should be an a different plugins array and thus used it wrongly. You may be doing the same?

hth

[Atinux]

@tsvetant can you confirm it's working?

[tsvetowntopalov]

Yes, it worked ! I just needed to put the jquery to get semantic-ui to work without extra effort

[c5n8]

@tsvetowntopalov how do you include semantic ui to nuxt?

[philcal]

Did you find a solution to this problem?

[limasierra]

No, I did not.

I needed JQuery, and ended up doing this in my component:

mounted () {
    if (process.browser) {
      let { $ } = window
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
          $('#back-to-top').fadeIn()
        } else {
          $('#back-to-top').fadeOut()
        }
      })
    }
  }

...along with this in my layout:

  head: {
    script: [
      { src: '/js/jquery-3.2.1.min.js' }
    ]
  }

You may be able to solve your problem in a similar fashion :)

[limasierra]

@philcal I investigated the issue further.

The solution suggested in the FAQ works as expected.

The problem was caused by Eslint, namely error '$' is not defined no-undef. You can quickly check if this is the problem by amending the rules in your .eslintrc.js file: 'no-unreachable': 'warn'. Then, it should work.

If you want to keep things clean, I suggest you try to merge the eslint config from a newer version of Nuxt, where this webpack stuff works out of the box :)

[akdasa]

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        '_': 'lodash'
        // ...etc.
      })
    ]
  }
}

Looks like it will inject jquery, lodash at every page. Am I right?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.