GithubHelp home page GithubHelp logo

Comments (11)

medialwerk avatar medialwerk commented on June 8, 2024 5

Hey all,

our implementation looks like this and it's working pretty well:

module: {
  rules: [
    {
      test: /\.modernizrrc$/,
      use: ['modernizr-loader', 'json-loader'],
    },
  ]
},
resolve: {
  alias: {
    modernizr$: path.resolve(__dirname, '.modernizrrc'),
  }
}

I first tried the type: 'javascript/auto' but it seems that it's not working if the file does not end with .json? After that, I saw that webpack has an implemented type: 'json'. But webpack also doesn't recognize the json file type (thows a compile error). Could it be that this is a webpack bug or that it's only working if the file ending is fitting to the declared type? Would be nice to be able to uninstall the json-loader.

module: {
  rules: [
    {
      type: 'json',
      test: /\.modernizrrc$/,
      use: ['modernizr-loader'],
    },
  ]
}

Thanks all! :-)

from modernizr-loader.

braime avatar braime commented on June 8, 2024 3

It would be really nice, if you would share the tweak with us!

from modernizr-loader.

ctrlplusb avatar ctrlplusb commented on June 8, 2024 3

hey all, is there any consensus for a workaround that works? I tried all of the above and they each resulted in my import Modernizr from 'modernizr' being a string (a path to a static resource ala file-loader).

from modernizr-loader.

jinixx avatar jinixx commented on June 8, 2024 2 
{
    type: 'javascript/auto',
    test: /modernizrrc(\.json)?$/,
    use: ['expose-loader?Modernizr', 'modernizr-loader', 'json-loader'],
},

type: 'javascript/auto', << add this for json to load properly

from modernizr-loader.

flootr avatar flootr commented on June 8, 2024

@var-bp thanks for raising this issue. Would you mind providing a PR with a basic test case for webpack 4? We could use this as a starting point.

from modernizr-loader.

var-bp avatar var-bp commented on June 8, 2024

Done.

from modernizr-loader.

jinixx avatar jinixx commented on June 8, 2024

guys, any updates on this issue?

[edit] loader works with webpack 4 with a slight tweak of webpack config

from modernizr-loader.

blachawk avatar blachawk commented on June 8, 2024

Here is a snippet of what I have within my webpack.config.js file to get modernizr-loader working with Webpack 4.12.0

const webpack = require('webpack');
const path = require('path');

 module: {
        rules: [
        { 
            test: /\.modernizrrc$/,
            loader: "modernizr-loader!json-loader"
        },
        //Other rules to other packages here...
        ]
},
  resolve: {
        alias: {
        modernizr$: path.resolve(__dirname, 'src/.modernizrrc')
        }
    }

I intentionally placed my .modernizrrc in my /src folder. Its just a personal preference. But make sure you have the json-loader npm package installed.

My .modernizrrc file looks like the following, which loads classes on your <HTML> element in the DOM.

{
  "minify": true,
  "options": [
    "domPrefixes",
    "hasEvent",
    "testAllProps",
    "testProp",
    "html5shiv",
    "setClasses"
  ],
  "feature-detects": [
    "history",
    "flash",
    "css/boxshadow",
    "css/transitions",
    "css/fontface",
    "css/gradients",
    "css/mediaqueries",
    "es6/promises",
    "forcetouch"
  ]
}

And for fun, I also added some conditional logic for modernizr in my custom JavaScript file, which also executes...

"use strict";
import Modernizr from 'modernizr';

var detects = {
    'hasjquery': 'jQuery' in window,
    'itswednesday': function() {
      var d = new Date();
      return d.getDay() === 3;
    }
   }
   Modernizr.addTest(detects);

   console.log("is jquery running? " + Modernizr.hasjquery);
   console.log("is it Wednesday? " + Modernizr.itswednesday);

Hopefully this can save some headaches

from modernizr-loader.

jinixx avatar jinixx commented on June 8, 2024

the loaders are the same, except mine won't work without type: 'javascript/auto',

webpack 4 no longer use 'javascript/auto' as default type, and if the error encountered is of parsing of json, adding type: 'javascript/auto', could solve the problem.

from modernizr-loader.

cyrilchapon avatar cyrilchapon commented on June 8, 2024

Everything works in @medialwerk configuration, except if I use a .modernizrrc*.json* file (explicit json extension) and update config accordingly. This is pretty strange

from modernizr-loader.

HawkeyePierce89 avatar HawkeyePierce89 commented on June 8, 2024

All works fine if we will be see on webpack documentation

module: {
    rules: [{
        test: /\.modernizrrc$/,
        loader: 'modernizr-loader!json-loader',
    }],
},
resolve: {
    alias: {
        modernizr$: path.resolve(__dirname, '.modernizrrc'),
    }
}

from modernizr-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.