Use src-relative imports in fe/

[enjoythecode]

Current Behavior

Currently, imports use relative imports that look like this:

# fe/src/Games/Amazons/AmazonsView.js

import { useRootStore } from "../../Store/RootStore";

This is inconvenient because the ../ prefix is file specific and requires hand-modification.

Desired Behavior

Imports in any given file should not depend on the folder depth of a file.

[enjoythecode]

Solutions Considered

Webpack Aliases

Webpack can be configured to have aliases with a syntax that looks like this:

module.exports = {
    ...
    resolve: {
      ...
      alias: {
        ...
        'components': path.resolve(__dirname, '../src/components/'),
        'images': path.resolve(__dirname, '../src/images/'),
      },
      ...
    },
    ...
};

Pros:

• customizable for different custom directories
• More powerful in the long run Cons:
• would require to eject create-react app or use a package to override CRA config

NODE_PATH Environment Variable

Exporting NODE_PATH=src will make webpack look for folders inside the src folder when importing without a relative path.

Pros:

• Simple
• Single-place to modify this configuration
• Setting this up would provide basis for .env files in Docker Compose Cons:
• All dockerfiles must remember to import the .env file
• Lacks documentation

Create React App Absolute Imports

This kind of configuration is supported in Create React App See Documentation

# contents of jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Pros:

• Native
• Straightforward
• Documented Cons: n/a

[enjoythecode]

Chosen solution: Create React App Absolute Imports