Error: while using devtool="source-map" option in webpack config version 5

Question

I am getting this error while using "source-map" as value to the devtool option in webpack configurations but while using "eval" it works (but I don't want "eval"). It could be a chance that asset can be undefined or not an array. I am new to webpack, could anyone please help me with suggestions like what could be the possibility here?

sourceMap = /** @type {SourceMap} */ (asset.map(options));
                                                                ^
    
    TypeError: asset.map is not a function
        at getTaskForFile (/Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:82:47)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:269:22
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:91:34
        at Array.<anonymous> (/Users/Desktop/lib-webpack/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:91:19
        at Hook.eval [as callAsync] (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:17:1)
        at Cache.get (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:75:18)
        at ItemCacheFacade.get (/Users/Desktop/lib-webpack/node_modules/webpack/lib/CacheFacade.js:117:15)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:220:18
        at arrayEach (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/neo-async/async.js:2405:9)
        at Object.each (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/neo-async/async.js:2846:9)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:204:15
        at fn (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:404:9)
        at _next1 (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:397:10
        at Hook.eval [as callAsync] (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:5:1)
        at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
        at fn (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:381:45)
        at _next0 (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)

Could anyone help me, what is the asset is referring to here ? — hitendra
– hitendra, Commented Apr 5, 2021 at 10:01

hitendra · Accepted Answer · 2021-04-09 03:12:36Z

2

This is because I was using the incorrect format of asset's source object, I need to modify chunk later because I was using white labelling of css.

earlier in webpack 4 =>

assets[filename] = {
    source: function() {
        return result.css;
    },
    size: function() {
        return result.css.length;
    },
};

earlier in webpack 5 =>

assets[filename] = new webpack.sources.RawSource(result.css.toString());

answered Apr 9, 2021 at 3:12

hitendra

2093 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Payne Over a year ago

where webpack is --> apply(compiler) { const { webpack } = compiler;

Collectives™ on Stack Overflow

Error: while using devtool="source-map" option in webpack config version 5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related