modernizr-loader: SyntaxError: Unexpected token :

So I’m getting a weird error, and I’m hoping someone can help me out. I’m a bit new to Webpack – this is a rails app – (though I’m a fairly advanced coder) so I could be doing something dumb.

The error is as follows

ERROR in ./app/javascript/modernizrrc.json
Module build failed: [PRIVATE]/app/javascript/modernizrrc.json:2
  "classPrefix": "",
               ^

SyntaxError: Unexpected token :
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.exec ([PRIVATE]/node_modules/webpack/lib/NormalModule.js:129:12)
    at Object.module.exports ([PRIVATE]/node_modules/modernizr-loader/index.js:24:26)
 @ ./app/javascript/packs/coming_soon.js 4:0-44
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/coming_soon.js

This makes no sense though, because (to my reading) this is a parser error regarding the the JSON config file, but I actually obtained the file directly from the Modernizr GitHub repo by running

curl https://raw.githubusercontent.com/Modernizr/Modernizr/v3.5.0/lib/config-all.json > modernizrrc.json

For what it’s worth, here’s the config I’m using for my webpacker environment setup:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.?modernizrrc(\.js(on)?)?$/,
        use: [ 'modernizr-loader' ]
      }
    ]
  },
  resolve: {
    alias: {
      'modernizr$': path.resolve(__dirname, "../../../app/javascript/modernizrrc.json")
    }
  }
}

Any ideas?

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (4 by maintainers)

Most upvoted comments

Update: Retract that last bit about the clunkiness. Apparently I’m just too much of a n00b at webpack (apologies). For anyone else running into this see https://webpack.js.org/configuration/externals/. Crisis averted. 😃

For anyone who encounters this, which I did after I upgraded to Webpack 3, the fix was to add the json loader to the loader definition:

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