'"Content and Map of this Source is not available" error after upgrading to Webpack 5

My project was working fine. When I upgraded to Webpack 5 this issue occurred. I searched online, but all the discussions seem to be from a previous version and I even tried the workarounds specified, but to no avail.

\SourceCode\node_modules\webpack\node_modules\webpack-sources\lib\SizeOnlySource.js:26 throw this._error(); ^ Error: Content and Map of this Source is not available (only size() is supported)

webpack

Solution 1:^[1]

Sometimes, such errors occur as a result of incorrect assembly. Most likely angular using a webpack just made changes with an error. Try to delete the .angular folder, then run the

npm install

command and run the project with the usual command:

ng serve --open

If there is an error, try clearing the cache, or running your IDE as administrator.

Solution 2:^[2]

When I've disabled the sourceMap generation (for both local and prod configuration) the error no longer occured. Keep in mind this would work for some people, depends on the scenario. In my case I dont need sourceMaps even on local env:

I believe this problem is related somehow to Angular (as I have Angular project), and this might be something that they should address, instead of making changes on our angular.json file config.

Solution 3:^[3]

I have encountered the same issue today and I was able to solve the problem by installing the 'source-map-support' npm package:

npm install source-map-support

I hope this works for you as well.

Solution 4:^[4]

I'm using Webpack module federation in angular for developing micro frontend architecture.

Usually lot of dependencies or version mismatch is going to happen. Ref: Error Screen

Just do:

npm install

Sometimes if you added a new node packages then there is chances of getting these type of errors. So that, to update the packages which are most likely to be dependent on the new installed packages run - npm install.

It worked for me.

Again i faced same problem then i used the below command

npm install source-map-support

Also please check the port number which you are using for the project. Try to change the port numbers to a different port numbers which are unused and safer. Eg: If you are using the port http://localhost:2000/ then change it to different one in your angular.json file

"options": {
                        "port": 5000,
                        "publicHost": "http://localhost:5000",
                        "extraWebpackConfig": "projects/core/webpack.config.js"
                    }

and also if you customized the commands for each micro frontend apps then change the port numbers in package.json file also

    "ng": "ng",
    "start": "npm run start:core",
    "start:core": "ng serve core  -o --port 5000",
    "start:dashboard": "ng serve dashboard -o --port 3000"
    }

Solution 5:^[5]

Installing the webpack sources did it for me:

npm i --save webpack-sources

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Igor Vasiliev
Solution 2	Zdravko Kolev
Solution 3	Erfan
Solution 4
Solution 5	Blank

'"Content and Map of this Source is not available" error after upgrading to Webpack 5

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]