Uncaught TypeError: Cannot read properties of undefined (reading 'native') at ./node_modules/fs-extra/lib/fs/index.js

Question

I'm building a webapp using webpack. Im trying to read a json file and to do so I want to use fs-extra module. However, I cannot manage to get it to work as I am getting this error when I try to initialize the app:

Uncaught TypeError: Cannot read properties of undefined (reading 'native') at ./node_modules/fs-extra/lib/fs/index.js

This is my webpack config:

const path = require("path");
const outputDir = "./dist";

// to load html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// modules that shouldn't be bundled
const webpack = require('webpack');

module.exports = {
    entry: ['babel-polyfill',path.resolve(__dirname, "index.js")], //
    output: {
        path: path.join(__dirname, outputDir),
        filename: "main.js",
        publicPath: "/dist/"
    },
    module: {
        rules: [{
            test: /\.js$/, // if we were using React.js, we would use \.jsx?$/
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                    exclude: /node_modules/
                } // if we were using React.js, we would include "react"
            }
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|svg|jpg|jpeg|gif|ogg|mp3|wav)$/i,
            type: 'asset/resource',
        },
        {
            test: /\.json$/,
            loader: 'json-loader',
            type: 'asset/resource',
            // type: 'javascript/auto', // Ensure that JSON files are treated as modules
        }
        ]
    },
    resolve: {
        modules: [
            path.resolve('./node_modules'), path.resolve('./src')
        ],
        fallback: {
            path: require.resolve('path-browserify'),
            buffer: require.resolve('buffer/'),
            fs: false
        },
        extensions: ['.json', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({template: "./index.html", inject: false, hash: true}),
        new webpack.ProvidePlugin({process: 'process/browser', Buffer: ['buffer', 'Buffer']})
    ]
};

Importing fs-extra

const fs = require('fs-extra');

Any help will be much appreciated!