How to use webpack loaders in nuxt.js?

I am trying to use https://github.com/itgalaxy/webpack-modernizr-loader this loader in my nuxt/webpack project.

Unfortunately loaders are added differently than with a normal webpack project and I don't really understand nuxt's documentation on this issue:

https://nuxtjs.org/api/configuration-build#loaders

I have a sample repo with a minimal nuxt project:
https://github.com/Jones-S/nuxt-modernizr

In my nuxt.config.js (equivalent to webpack config)
I tried to include the loader and use in my pages/index.vue.

Unfortunately I am getting an error that I have modernizr not installed.
This can't be the case though.

I would be really happy if somebody could have short look into this and tell me how I correctly use loaders in nuxt.js.

For brevity my part of the nuxt.config.js

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$/,

        use: { loader: 'webpack-modernizr-loader' }

      })



      config.resolve.alias['modernizr'] = '/.modernizrrc.js'



    }

  }

}

I am pushing the new loader and register an alias below. But I would get this error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* 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&

To install it, you can run: npm install --save modernizr

thank you very much in advance.
cheers

asked Nov 20 '18 at 12:57

Merc

83511333

1

What you want isn't the loaders stuff you linked to, you want what's a bit further up the page, "extending webpack" nuxtjs.org/api/configuration-build#loaders-in-extend. The one you linked to as far as I can tell is just for customizing the builtin loaders, so if you wanna add a non-nuxt handled webpack loader then you'd be extending the webpack configuration rather than handling the internal ones.

– Simon Hyll
Nov 20 '18 at 15:13

@SimonHyll Thanks for the pointer. Could you maybe make an example how to use my loader with this. It all looks so desperately different to webpack... And if I read this, I only see an example how they change some options of the integrated loaders (looking at my link again), but not using completely new loaders...

– Merc
Nov 20 '18 at 21:40

the problem seems that webpack-modernizr-loader dont work with vue loader, and vue loader is needed for vue files

– Aldarund
Nov 21 '18 at 8:54

You're adding the loader correctly, the config object is the Webpack config object so just configure that as you would normally with Webpack. As far as I've been able to gather you either haven't installed modernizr, you need to make modernizr be run before/after vue-loader processes .vue and .js files, or babel doesn't understand modernizr so you need to assist babel in understanding it, not webpack, or since you're testing with modernizrrc.js it means that your modernizrrc.js are processed by babel, and babel doesn't understand those files.

– Simon Hyll
Nov 21 '18 at 15:10

@SimonHyll Thank you. I can follow your theory, but speaking in practical terms, I can't. Could you maybe give me some pointers how make babel understand my stuff and how to prioritize to run modernizr?

– Merc
Nov 26 '18 at 23:12

add a comment |

I am trying to use https://github.com/itgalaxy/webpack-modernizr-loader this loader in my nuxt/webpack project.

Unfortunately loaders are added differently than with a normal webpack project and I don't really understand nuxt's documentation on this issue:

https://nuxtjs.org/api/configuration-build#loaders

I have a sample repo with a minimal nuxt project:
https://github.com/Jones-S/nuxt-modernizr

In my nuxt.config.js (equivalent to webpack config)
I tried to include the loader and use in my pages/index.vue.

Unfortunately I am getting an error that I have modernizr not installed.
This can't be the case though.

I would be really happy if somebody could have short look into this and tell me how I correctly use loaders in nuxt.js.

For brevity my part of the nuxt.config.js

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$/,

        use: { loader: 'webpack-modernizr-loader' }

      })



      config.resolve.alias['modernizr'] = '/.modernizrrc.js'



    }

  }

}

I am pushing the new loader and register an alias below. But I would get this error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* 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&

To install it, you can run: npm install --save modernizr

thank you very much in advance.
cheers

asked Nov 20 '18 at 12:57

Merc

83511333

1

What you want isn't the loaders stuff you linked to, you want what's a bit further up the page, "extending webpack" nuxtjs.org/api/configuration-build#loaders-in-extend. The one you linked to as far as I can tell is just for customizing the builtin loaders, so if you wanna add a non-nuxt handled webpack loader then you'd be extending the webpack configuration rather than handling the internal ones.

– Simon Hyll
Nov 20 '18 at 15:13

@SimonHyll Thanks for the pointer. Could you maybe make an example how to use my loader with this. It all looks so desperately different to webpack... And if I read this, I only see an example how they change some options of the integrated loaders (looking at my link again), but not using completely new loaders...

– Merc
Nov 20 '18 at 21:40

the problem seems that webpack-modernizr-loader dont work with vue loader, and vue loader is needed for vue files

– Aldarund
Nov 21 '18 at 8:54

You're adding the loader correctly, the config object is the Webpack config object so just configure that as you would normally with Webpack. As far as I've been able to gather you either haven't installed modernizr, you need to make modernizr be run before/after vue-loader processes .vue and .js files, or babel doesn't understand modernizr so you need to assist babel in understanding it, not webpack, or since you're testing with modernizrrc.js it means that your modernizrrc.js are processed by babel, and babel doesn't understand those files.

– Simon Hyll
Nov 21 '18 at 15:10

@SimonHyll Thank you. I can follow your theory, but speaking in practical terms, I can't. Could you maybe give me some pointers how make babel understand my stuff and how to prioritize to run modernizr?

– Merc
Nov 26 '18 at 23:12

add a comment |

I am trying to use https://github.com/itgalaxy/webpack-modernizr-loader this loader in my nuxt/webpack project.

Unfortunately loaders are added differently than with a normal webpack project and I don't really understand nuxt's documentation on this issue:

https://nuxtjs.org/api/configuration-build#loaders

I have a sample repo with a minimal nuxt project:
https://github.com/Jones-S/nuxt-modernizr

In my nuxt.config.js (equivalent to webpack config)
I tried to include the loader and use in my pages/index.vue.

Unfortunately I am getting an error that I have modernizr not installed.
This can't be the case though.

I would be really happy if somebody could have short look into this and tell me how I correctly use loaders in nuxt.js.

For brevity my part of the nuxt.config.js

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$/,

        use: { loader: 'webpack-modernizr-loader' }

      })



      config.resolve.alias['modernizr'] = '/.modernizrrc.js'



    }

  }

}

I am pushing the new loader and register an alias below. But I would get this error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* 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&

To install it, you can run: npm install --save modernizr

thank you very much in advance.
cheers

asked Nov 20 '18 at 12:57

Merc

83511333

I am trying to use https://github.com/itgalaxy/webpack-modernizr-loader this loader in my nuxt/webpack project.

Unfortunately loaders are added differently than with a normal webpack project and I don't really understand nuxt's documentation on this issue:

https://nuxtjs.org/api/configuration-build#loaders

I have a sample repo with a minimal nuxt project:
https://github.com/Jones-S/nuxt-modernizr

In my nuxt.config.js (equivalent to webpack config)
I tried to include the loader and use in my pages/index.vue.

Unfortunately I am getting an error that I have modernizr not installed.
This can't be the case though.

I would be really happy if somebody could have short look into this and tell me how I correctly use loaders in nuxt.js.

For brevity my part of the nuxt.config.js

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$/,

        use: { loader: 'webpack-modernizr-loader' }

      })



      config.resolve.alias['modernizr'] = '/.modernizrrc.js'



    }

  }

}

I am pushing the new loader and register an alias below. But I would get this error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* 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&

To install it, you can run: npm install --save modernizr

thank you very much in advance.
cheers

javascript webpack loader nuxt.js modernizr

asked Nov 20 '18 at 12:57

Merc

83511333

asked Nov 20 '18 at 12:57

Merc

83511333

asked Nov 20 '18 at 12:57

Merc

83511333

asked Nov 20 '18 at 12:57

Merc

83511333

asked Nov 20 '18 at 12:57

Merc

83511333

1

What you want isn't the loaders stuff you linked to, you want what's a bit further up the page, "extending webpack" nuxtjs.org/api/configuration-build#loaders-in-extend. The one you linked to as far as I can tell is just for customizing the builtin loaders, so if you wanna add a non-nuxt handled webpack loader then you'd be extending the webpack configuration rather than handling the internal ones.

– Simon Hyll
Nov 20 '18 at 15:13

@SimonHyll Thanks for the pointer. Could you maybe make an example how to use my loader with this. It all looks so desperately different to webpack... And if I read this, I only see an example how they change some options of the integrated loaders (looking at my link again), but not using completely new loaders...

– Merc
Nov 20 '18 at 21:40

the problem seems that webpack-modernizr-loader dont work with vue loader, and vue loader is needed for vue files

– Aldarund
Nov 21 '18 at 8:54

You're adding the loader correctly, the config object is the Webpack config object so just configure that as you would normally with Webpack. As far as I've been able to gather you either haven't installed modernizr, you need to make modernizr be run before/after vue-loader processes .vue and .js files, or babel doesn't understand modernizr so you need to assist babel in understanding it, not webpack, or since you're testing with modernizrrc.js it means that your modernizrrc.js are processed by babel, and babel doesn't understand those files.

– Simon Hyll
Nov 21 '18 at 15:10

@SimonHyll Thank you. I can follow your theory, but speaking in practical terms, I can't. Could you maybe give me some pointers how make babel understand my stuff and how to prioritize to run modernizr?

– Merc
Nov 26 '18 at 23:12

add a comment |

1

What you want isn't the loaders stuff you linked to, you want what's a bit further up the page, "extending webpack" nuxtjs.org/api/configuration-build#loaders-in-extend. The one you linked to as far as I can tell is just for customizing the builtin loaders, so if you wanna add a non-nuxt handled webpack loader then you'd be extending the webpack configuration rather than handling the internal ones.

– Simon Hyll
Nov 20 '18 at 15:13

@SimonHyll Thanks for the pointer. Could you maybe make an example how to use my loader with this. It all looks so desperately different to webpack... And if I read this, I only see an example how they change some options of the integrated loaders (looking at my link again), but not using completely new loaders...

– Merc
Nov 20 '18 at 21:40

the problem seems that webpack-modernizr-loader dont work with vue loader, and vue loader is needed for vue files

– Aldarund
Nov 21 '18 at 8:54

You're adding the loader correctly, the config object is the Webpack config object so just configure that as you would normally with Webpack. As far as I've been able to gather you either haven't installed modernizr, you need to make modernizr be run before/after vue-loader processes .vue and .js files, or babel doesn't understand modernizr so you need to assist babel in understanding it, not webpack, or since you're testing with modernizrrc.js it means that your modernizrrc.js are processed by babel, and babel doesn't understand those files.

– Simon Hyll
Nov 21 '18 at 15:10

@SimonHyll Thank you. I can follow your theory, but speaking in practical terms, I can't. Could you maybe give me some pointers how make babel understand my stuff and how to prioritize to run modernizr?

– Merc
Nov 26 '18 at 23:12

What you want isn't the loaders stuff you linked to, you want what's a bit further up the page, "extending webpack" nuxtjs.org/api/configuration-build#loaders-in-extend. The one you linked to as far as I can tell is just for customizing the builtin loaders, so if you wanna add a non-nuxt handled webpack loader then you'd be extending the webpack configuration rather than handling the internal ones.

– Simon Hyll
Nov 20 '18 at 15:13

@SimonHyll Thanks for the pointer. Could you maybe make an example how to use my loader with this. It all looks so desperately different to webpack... And if I read this, I only see an example how they change some options of the integrated loaders (looking at my link again), but not using completely new loaders...

– Merc
Nov 20 '18 at 21:40

the problem seems that webpack-modernizr-loader dont work with vue loader, and vue loader is needed for vue files

– Aldarund
Nov 21 '18 at 8:54

You're adding the loader correctly, the config object is the Webpack config object so just configure that as you would normally with Webpack. As far as I've been able to gather you either haven't installed modernizr, you need to make modernizr be run before/after vue-loader processes .vue and .js files, or babel doesn't understand modernizr so you need to assist babel in understanding it, not webpack, or since you're testing with modernizrrc.js it means that your modernizrrc.js are processed by babel, and babel doesn't understand those files.

– Simon Hyll
Nov 21 '18 at 15:10

@SimonHyll Thank you. I can follow your theory, but speaking in practical terms, I can't. Could you maybe give me some pointers how make babel understand my stuff and how to prioritize to run modernizr?

– Merc
Nov 26 '18 at 23:12

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393515%2fhow-to-use-webpack-loaders-in-nuxt-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky