Typescript import cannot resolve path to node_module

Question

I am working on a typescript project, trying to import 'path'.

It's for a Figma plug-in so I followed their getting started guide (https://www.figma.com/plugin-docs/libraries-and-bundling/#bundling-with-webpack) , which led me to npm install typescript, webpack and a bunch of other things I don't really know much about.

In the process of trying to import packages I ended up with several errors, most of which I was able to resolve. The last one seems to be a conflict between the folder setup in my environment and the way the path to the modules is defined.

I am trying to import like so (./src/code.ts):

const path = require('../path');

I tried nearly all iterations to define the relative path but always end up getting a version of this error when running npm run build:

    ERROR in ./src/code.ts 12:13-31
    Module not found: Error: Can't resolve '../path' in 'C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\src'
    resolve '../path' in 'C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\src'
      using description file: C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\package.json (relative path: ./src)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\package.json (relative path: ./path)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\path doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\path.ts doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\path.js doesn't exist
          as directory
            C:\Users\alexa\OneDrive\Analytics\Projects\tableau-theme-editor\path doesn't exist

I have a (./webpack.config.js) file, copied from the Figma guide:

    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = (env, argv) => ({
    mode: argv.mode === 'production' ? 'production' : 'development',
    
    // This is necessary because Figma's 'eval' works differently than normal eval
    devtool: argv.mode === 'production' ? false : 'inline-source-map',
      entry: {
        code: './src/code.ts' // This is the entry point for our plugin code.
      },
      module: {
        rules: [
          // Converts TypeScript code to JavaScript
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
        ],
      },
      // Webpack tries these extensions for you if you omit the extension like "import './file'"
      resolve: {
        extensions: ['.ts', '.js'],
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
      },
    });

And considering that I don't get an error with the import in that file, I assumed that in my file I just need to go up one directory from the src folder. Obviously that assumption was wrong.

I have a few more configuration files: ./tsconfig.json

    {
      "compilerOptions": {
        "target": "es6",
        "lib": ["es6"],
        "strict": true,
        "moduleResolution":"node",
        "moduleDetection": "force",
        "skipLibCheck": true,
        "typeRoots": [
          "./node_modules/@types",
          "./node_modules/@figma"
        ],
        "outDir": "./dist",
        "jsx": "react",
        "allowJs": true,
      },
      "include": ["src/**/*.ts"]
    }

./package.json

    {
      "name": "tableau-theme-editor",
      "version": "1.0.0",
      "description": "Your Figma Plugin",
      "main": "dist/code.js",
      "scripts": {
        "build": "webpack",
        "lint": "eslint --ext .ts,.tsx --ignore-pattern node_modules .",
        "lint:fix": "eslint --ext .ts,.tsx --ignore-pattern node_modules --fix .",
        "watch": "npm run build -- --watch"
      },
      "author": "",
      "license": "",
      "devDependencies": {
        "@figma/eslint-plugin-figma-plugins": "*",
        "@figma/plugin-typings": "^1.97.0",
        "@types/node": "^20.14.10",
        "@typescript-eslint/eslint-plugin": "^6.12.0",
        "@typescript-eslint/parser": "^6.12.0",
        "eslint": "^8.54.0",
        "ts-loader": "^9.5.1",
        "typescript": "^5.5.3",
        "webpack": "^5.92.1",
        "webpack-cli": "^5.1.4"
      },
      "eslintConfig": {
        "extends": [
          "eslint:recommended",
          "plugin:@typescript-eslint/recommended",
          "plugin:@figma/figma-plugins/recommended"
        ],
        "parser": "@typescript-eslint/parser",
        "parserOptions": {
          "project": "./tsconfig.json"
        },
        "root": true,
        "rules": {
          "@typescript-eslint/no-unused-vars": [
            "error",
            {
              "argsIgnorePattern": "^_",
              "varsIgnorePattern": "^_",
              "caughtErrorsIgnorePattern": "^_"
            }
          ]
        }
      }
    }

./manifest.json

    {
      "name": "Tableau-Theme-Editor",
      "id": "xxx",
      "api": "1.0.0",
      "main": "dist/code.js",
      "capabilities": [],
      "enableProposedApi": false,
      "documentAccess": "dynamic-page",
      "editorType": [
        "figma"
      ],
      "ui": "ui.html",
      "networkAccess": {
        "allowedDomains": [
          "none"
        ]
      }
    }