itgalaxy / webpack-modernizr-loader

Get your modernizr build bundled with webpack, use modernizr with webpack easily
MIT License
39 stars 5 forks source link

Problems with dependencies #95

Open Jones-S opened 5 years ago

Jones-S commented 5 years ago

Hi there

I am trying to use your loader in our vue/nuxt-webpack project. I followed the readme and this: https://stackoverflow.com/questions/49221027/how-to-use-modernizr-in-vuejs-webpack-project

Unfortunately I get this error when starting my watch task:


These dependencies were not found:

* fs in ./node_modules/export-files/index.js, ./node_modules/file/lib/file.js and 4 others
* lib/generate-banner in ./node_modules/modernizr/lib/build.js
* package in ./node_modules/modernizr/lib/build.js

To install them, you can run: npm install --save fs lib/generate-banner package

Installing them as said would not help:

$ yarn add fs lib/generate-banner package 
yarn add v1.7.0
warning ../../../../package.json: No license field
[1/5] 🔍  Resolving packages...
⠂ eslint-plugin-vue@next(node:57367) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://git@github.com/lib/generate-banner.git
Directory: /Users/xxx/Documents/xxxxxx/xxxxx
Output:
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

I have no idea what I could do next. I always struggle with modernizr – also this time 😅...

If you have some tipps, they would be much appreciated.

Cheers


Package.json:

"webpack": "^4.20.2" "nuxt": "^2.2.0"

alexander-akait commented 5 years ago

@Jones-S Can you create minimum reproducible test repo? Looks you have something wrong in your configuration

Jones-S commented 5 years ago

In my nuxt config you mean? Well I could do that, but if you think the config is wrong anyway, I will first try to dig a bit deeper into this. Thanks for the quick reply! I will get back to you in either case.

alexander-akait commented 5 years ago

@Jones-S Yep, anyway you can try to configure loader on simple webpack config and when move this configuration to your configuration (to avoid integration problems with other loaders/plugins)

Jones-S commented 5 years ago

Well I guess it maybe has to do with my lack of complete understanding how to use webpack loaders in a nuxt project... Anyway: https://github.com/Jones-S/nuxt-modernizr here is a sample repo, in which I would like to get the modernizr to work.

Maybe you know a bit how nuxt uses loaders or you understand code faster than me. In the meantime I will try to find out more about that.

I am right now also trying to register an alias for modernizr in the nuxt way. (see nuxt.config.js) E.g. like this: https://github.com/nuxt/nuxt.js/issues/2793#issuecomment-413204529

But I get: Cannot read property 'rootDir' of undefined Although if I log this. I can see that there is a prop options and inside I see the right rootDir...

alexander-akait commented 5 years ago

Try to remove enforce: 'pre' and exclude: /(node_modules)/ (last is unnecessary you already use specify test: /\.modernizrrc\.js$/,)

Jones-S commented 5 years ago

Hm, I removed that alreay, but now I got a message that modernizr is missing – which is not the case. I managed to register my alias though:

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, { isDev, isClient }) {
      // Run ESLint on save
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })

        config.module.rules.push({
          test: /\.modernizrrc\.js$/,
          loader: 'webpack-modernizr-loader'
        })

        config.resolve.alias['modernizr'] = '/.modernizrrc.js'
        console.log('config: ', config) // eslint-disable-line
      }
    }
  }

Ah and I have to mention that this error is thrown by the index.vue within pages, where I try to import modernizr

import modernizr from 'modernizr' https://github.com/Jones-S/nuxt-modernizr/blob/dcafb311848558c11ee9d14d93e5871dd5688fc5/pages/index.vue

alexander-akait commented 5 years ago

@Jones-S What message you get?

Jones-S commented 5 years ago
 ERROR  Failed to compile with 1 errors                                                                                                                                                                              friendly-errors 13:29:37

This dependency was not found:                                                                                                                                                                                       friendly-errors 13:29:37
                                                                                                                                                                                                                     friendly-errors 13:29:37
* modernizr in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&                                                                friendly-errors 13:29:37
                                                                                                                                                                                                                     friendly-errors 13:29:37
To install it, you can run: npm install --save modernizr                                                                                                                                                             friendly-errors 13:29:37
ℹ Waiting for file changes                                     

Can't be the reason that I have it not installed: Package.json "modernizr": "^3.6.0",


I still think this maybe could have something todo how I try to use loaders with nuxt. Unfortunately I don't fully understand the documentation on this matter. https://nuxtjs.org/api/configuration-build#loaders

I found this though: https://stackoverflow.com/a/49319953/1121268 But it would still throw the same error

alexander-akait commented 5 years ago

@Jones-S Looks you should exclude vue-loader, i am not familiar with nuxt, i think better look documentation about this or answer question in their repo

Jones-S commented 5 years ago

Ok. Thanks. I will try this. Thanks for the help anyway.

marscrusader commented 4 years ago

@Jones-S Did you manage to solve the dependency not found error? I'm using Nuxt and get the same issue despite following the docs

alexander-akait commented 4 years ago

I think better place for this issue in nuxt repo,