Build errors: dependencies not found

[BaronSosaa]

I'm trying to make the switch from a grunt development environment to webpack. So far it hasn't been easy, but Modernizr and this loader have been giving me a headache for two days now..

I tried several different modernizr version and loaders, but no luck....
As you can see I followed everything from the read.me but I keep getting the same errors..
The modernizr in /node_modules has a package.json file, but when I run npm install in this folder, none of the grunt plugins get installed, so theres no way I can build a custom file...
I'm really getting frustrated here, so any help would be appreciated.

`
ERROR Failed to compile with 6 errors 16:43:55

These dependencies were not found:

• fs in ./node_modules/modernizr/lib/metadata.js, ./node_modules/modernizr/lib/options.js and 2 others
• generate in ./node_modules/modernizr/lib/build.js
• lib/generate-banner in ./node_modules/modernizr/lib/build.js

To install them, you can run: npm install --save fs generate lib/generate-banner
`

However when I try to install these I get errors these repo's don't even exist anymore?

My webpack.config.js:

`const path = require('path');
const Encore = require('@symfony/webpack-encore');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';
const glob = require("glob");

Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.enableSourceMaps(!Encore.isProduction())
.enableSassLoader()
.enablePostCssLoader((options) => {
options.config = {
path: 'config/postcss.config.js'
};
})
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
.enableVueLoader()
.enableVersioning()
.cleanupOutputBeforeBuild()
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', ['./assets/scss/app.scss'])
.addEntry('img', glob.sync('./assets/img/*'))
.splitEntryChunks()
.enableSingleRuntimeChunk();

module.exports = {
module: {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
})
]
},
rules: [{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: ['env'],
},
}, {
loader: 'eslint-loader',
options: {
failOnError: true,
},
}]
},
{
test: /.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
'style-loader',
"css-loader",
'postcss-loader',
'sass-loader',
OptimizeCssAssetsPlugin.loader
]
},
{
test: /.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'url-loader',
options: {
limit: 8000
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 6
},
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
},
{
test: /.modernizrrc.js$/,
use: [ 'modernizr-loader' ]
},
],
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /.css$/,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true
}
},
canPrint: true
})
]
},
resolve: {
alias: {
modernizr$: path.resolve(__dirname, ".modernizrrc")
}
},
stats: {
colors: true,
}
};

module.exports = Encore.getWebpackConfig();
`

.modernizrrc file:

{ "minify": true, "options": [ "domPrefixes", "prefixes", "addTest", "atRule", "hasEvent", "mq", "prefixed", "prefixedCSS", "prefixedCSSValue", "testAllProps", "testProp", "testStyles", "html5shiv", "setClasses" ], "feature-detects": [ "test/ambientlight", "test/applicationcache", "test/audio", "test/battery", "test/blob", "test/canvas", "test/canvastext", "test/contenteditable", "test/contextmenu", "test/cookies", "test/cors", ] }

[jprud67]

I have a solution that works!

//webpack.config.js

const path = require ('path');
.addLoader({
loader: "webpack-modernizr-loader",
test: /.modernizrrc.js$/
})
// Add path to modernizr config as alias
.addAliases({
modernizr$: path.resolve(__dirname, '.modernizrrc.js')
})

// .modernizrrc.js
module.exports = {
// Your modernizr config, like:
"options": [
"setClasses",
],
"feature-detects": [
"test/touchevents"
]
}
Update the config file(.modernizrrc.js) with the necessary configuration.

If you need to add Modernizr by yourself to a bundle, just add following line to your main bundle javascript file:

window.Modernizr = global.Modernizr = require('modernizr');

[strarsis]

Functioning setup with roots.io sage 9 theme:

npm install --save modernizr
npm install --save-dev modernizr-loader 

webpack.config.js:

const path    = require('path');
const resolve = path.resolve;
// [...]
  module: {
    rules: [
      {
        test: /\.modernizrrc$/,
        loader: 'modernizr-loader!json-loader',
      },
// [...]
  resolve: {
    modules: [
      config.paths.assets,
      'node_modules',
    ],
    enforceExtension: false,
    alias: {
      modernizr$: resolve('.modernizrrc'),
    },
  },
// [...]

.modernizrrc

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "img/webp"
  ]
}

common.js

import 'modernizr';
// [...]

For SASS I like to use this with modernizr-mixin.