TypeError: this.cacheable is not a function

[har1sh]

Am trying to create a font family with the svg and i am running into the following error,

TypeError: this.cacheable is not a function
at module.exports (/sample/node_modules/webfonts-loader/index.js:67:8)
    at data (/sample/node_modules/webpack/lib/RuleSet.js:353:40)
    at process (/sample/node_modules/webpack/lib/RuleSet.js:531:14)
    at Array.forEach (<anonymous>)
    at process (/sample/node_modules/webpack/lib/RuleSet.js:533:10)
    at RuleSet._run (/sample/node_modules/webpack/lib/RuleSet.js:542:4)
    at RuleSet._run (/sample/node_modules/webpack/lib/RuleSet.js:547:10)
    at RuleSet.exec (/sample/node_modules/webpack/lib/RuleSet.js:475:8)
    at asyncLib.parallel (/sample/node_modules/webpack/lib/NormalModuleFactory.js:270:34)
    at /sample/node_modules/neo-async/async.js:6892:13
    at normalResolver.resolve (/sample/node_modules/webpack/lib/NormalModuleFactory.js:215:9)
    at doResolve (/sample/node_modules/enhanced-resolve/lib/Resolver.js:160:12)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/sample/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:36:23)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/sample/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:43:6)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn42 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:390:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/sample/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:43:6)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn3 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:39:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn2 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:30:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at hook.callAsync (/sample/node_modules/enhanced-resolve/lib/Resolver.js:237:23)
    at _fn0 (eval at create (/sample/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.hooks.result.callAsync.err (/sample/node_modules/enhanced-resolve/lib/ResultPlugin.js:18:5)

My Current Configuration,

{
    entry: [
        './webpack-config/icons.js'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.font\.js/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    require('webfonts-loader')
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'app.bundle.css'
        })
    ]
}

module.exports = {
    files: [
        '../icons/*.svg'
    ],
    fontName: 'sample-core',
    classPrefix: 'sample-',
    baseClass: 'sample',
    fixedWidth: true,
    types: [ 'eot', 'woff', 'woff2', 'ttf', 'svg' ]
};

[the-owl]

@har1sh Replace require('webfonts-loader') with just 'webfonts-loader'. Webpack finds loaders in node_modules automatically.

[har1sh]

Yeah, but it doesn't solve my problem.

[har1sh]

@the-owl the loader works now, but i am getting

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/webfonts-loader/index.js):
Error: "options.files" is empty

But i have the files option defined in my .js file. Not sure if i need to define it elsewhere.

[har1sh]

My bad, had misconfigured the relative path, got everything to work :)