Mobx statechange not detected

Question

I have a small simple setup. With mobx and preact.

class AppStore {
    loadingobjects = true;

    constructor() {
        makeObservable(this, {
            loadingobjects: observable,
        });
        this.fetchCommonObjects();
    }

    fetchCommonObjects = () => {
        window
            .fetch(url)
            .then((res) => res.json())
            .then((json) => {
                /* data processing */
                this.loadingobjects = false;
            });
    };
}

export const AppStoreContext = createContext();

function AppStoreProvider({ children }) {
    return (
        <AppStoreContext.Provider value={new AppStore()}>
            {children}
        </AppStoreContext.Provider>
    );
}

export default AppStoreProvider;

export default function useAppStore() {
    return useContext(AppStoreContext);
}

const List = observer(() => {
    const store = useAppStore();

    if (store.loadingobjects) {
        return <div class="ui active centered inline loader"></div>;
    } else {
        return (page content);
    }
});

problem is that store.loadingobjects Is always false. Seems like im doing something wrong but i cant put my finger on it...

What am i missing or doing wrong?

Edit addding my configs:

package.json

{
  "name": "project",
  "version": "0.0.2",
  "license": "MIT",
  "scripts": {
    "start": "set NODE_ENV=dev && webpack serve --mode=development",
    "build": "set NODE_ENV=production && webpack -p",
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "babel-plugin-import": "^1.13.6",
    "html-webpack-plugin": "^5.5.0",
    "surge": "^0.19.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "mobx": "^6.7.0",
    "mobx-react": "^7.6.0",
    "preact": "^10.11.3"
  }
}

webpack.config.js

const path = require('path');
const isProd = (process.env.NODE_ENV === 'production');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    //input
    entry: ["@babel/polyfill",'./src'],

    resolve: {
        alias:{
            "react": "preact/compat",
            "react-dom": "preact/compat",
            "react/jsx-runtime": "preact/jsx-runtime"
        }
    },
    //output
    output: {
        path : path.join(__dirname, 'build'),
        filename : 'bundle.js'
    },

    //transformations
    module: {
        rules : [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            }
        ]
    },
       
    //sourcemaps
    devtool: 'source-map',
    
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        favicon: "./src/favicon.ico"
    })],

    //server
    devServer: {
        compress: true,
        historyApiFallback: true
    }
}

.babelrc

{
  "presets": ["@babel/preset-react", ["@babel/preset-env", {"useBuiltIns": "usage",}]],
  "plugins": [
      ["@babel/plugin-transform-runtime"],
      [
          "@babel/plugin-transform-react-jsx",
          {
              "pragma": "h",
              "pragmaFrag": "Fragment"
          }
      ]
  ]
}

Answer 1

I found the issue. I started cutting the components into smaller pieces and then adding and removing them into the component hierarchy until i found the component causing the issue. It turned out that i had done onClick={method()} and this was changeing state causing the endless rerenders.