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.