Well I have a system where I have a local input file which has some extra information regarding login etc. Obviously that file isn't in git so it won't be visible for the public when building or even developing on another pc.

I've tried making it hence a dynamic import that is guarded an a try-catch statement, if the file would be there it should just execute on page launch. Otherwise it shouldn't.

So in app.tsx under the main component there is this:

React.useEffect(() => {
  async function loader() {
    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
      try {
        //@ts-ignore
        const data = await import('./local/input_data');
        //@ts-ignore
        if (data['userLoginData']) {
          //@ts-ignore
          await AuthStoreCtx.authStore?.doLogin({username: data.userLoginData.username, password: data.userLoginData.password});
          if (!AuthStoreCtx.authStore?.loginFailed) {
            console.log("AUTO LOGIN SUCCEEDS");
          } else {
            console.log("AUTO LOGIN FAILED");
          }
          setUser(AuthStoreCtx.authStore?.user);
        }

      } catch (err) {
        console.log("AUTO LOGIN FAIL")
      }
    } else {
      console.log('production')
    }
  }
  if (authStore) {
    loader().then(() => {

    });
  }
}, [authStore]);

However this gives the following error:

Module not found: Error: ...

That is no surprise, but what's surprising is that the error isn't caught by the catch statement (or later by the .catch() outside the promise). How would I do such a thing?