webpack-modernizr-loader
webpack-modernizr-loader copied to clipboard
Problems with dependencies
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://[email protected]/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"
@Jones-S Can you create minimum reproducible test repo? Looks you have something wrong in your configuration
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.
@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)
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
...
Try to remove enforce: 'pre'
and exclude: /(node_modules)/
(last is unnecessary you already use specify test: /\.modernizrrc\.js$/,
)
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
@Jones-S What message you get?
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
@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
Ok. Thanks. I will try this. Thanks for the help anyway.
@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
I think better place for this issue in nuxt
repo,