Aliasing React with Preact on specific files?

Currently my project is on Ruby on rails with React frontend(on some parts of the app). Also uses Webpack. I am trying to use react-final-form(https://final-form.org/react) on just one part of the app, aliasing React with Preact(https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact) to lower the page weight. I was able to resolve the alias from React to Preact on the whole app, but is it possible to resolve the alias to just 1 file?

I was able to resolve the alias on the whole app in the following sample node project: index.js

import React from 'react'
import { render } from 'react-dom'
import { Form, Field } from 'react-final-form'
const onSubmit = async values => {
  window.alert(JSON.stringify(values, 0, 2))
}
const App = () => (
  <div>
    <h1>React Final Form - Simple Example</h1>
    <Form
      onSubmit={onSubmit}
      initialValues={{ stooge: 'larry', employed: false }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>First Name</label>
            <Field
              name="firstName"
              component="input"
              type="text"
              placeholder="First Name"
            />
          </div>
          <div className="buttons">
            <button type="submit" disabled={submitting || pristine}>
              Submit
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </div>
)
render(<App />, document.getElementById('root'))

package.json

{
  "name": "my-react-webpack-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "final-form": "^4.20.9",
    "preact": "^10.15.1",
**  "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",**
    "react-final-form": "^6.5.9"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-react": "^7.22.3",
    "babel-loader": "^9.1.2",
    "html-webpack-plugin": "^5.5.1",
    "webpack": "^5.85.0",
    "webpack-cli": "^5.1.2",
    "webpack-dev-server": "^4.15.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path:path.resolve(__dirname, "dist"),
  },
  resolve: {
    alias: {
**    "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",     // Must be below test-utils
      "react/jsx-runtime": "preact/jsx-runtime"**
    },
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
}

The above configuration aliases React with Preact on the whole app. Although on the actual project I can't put this in the package.json. Is it possible to apply the alias to just 1 file/page/entry point?

Not with Webpack, no. Aliases are project-wide.

It's unclear what you're after, but this probably won't work anyways. React and Preact components have no native interop. You cannot mix and match really, certainly not while also reducing page weight.