Open Jones-S opened 5 years ago
@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,
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:
Installing them as said would not help:
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"