TypeScript importで相対パスが上手くいかずModule not found: Error

Question

https://qiita.com/markey/items/ea9ed18a1a243b39e06e
こちらの記事を参考にクローム拡張をTypeScript、webpack使って作成してます。
(windows10。node:v16.14.0)

openapi.yamlからクライアントコード次のコマンドで生成した後にcontent_scripts.tsに生成されたクライアントをインポートしました。

この状態で yarn webpack 行うと次のようなエラーが出力されます。

openapi-generator-cli generate -g typescript-fetch -i ../openapi/openapi.yaml -o ./api --additional-properties=modelPropertyNaming=camelCase,supportsES6=true,withInterfaces=true,typescriptThreePlus=true

import {browser} from 'webextension-polyfill-ts'
import {Configuration, DefaultApi, DefaultApiInterface} from "../api";

const execute = async () => {
    const value = await browser.storage.local.get('date')
    console.log(value.date || '日時が記録されていません')

    await browser.storage.local.set({date: new Date().toString()})
    console.log('現在の日時を記録しました')

    const conf = new Configuration({
        basePath: 'http://127.0.0.1', // 仮URL
    })
    const client: DefaultApiInterface = new DefaultApi(conf)
    await client.roomsRoomIdGet({roomId: 30}).then(function (resp) {
        console.log(resp)
    })
}

execute()

ERROR in ./src/content_scripts.ts
Module not found: Error: Can't resolve '../api' in 'C:\ander\ts-ex\src'
 @ ./src/content_scripts.ts 40:12-29

フォルダ構成は次の通りで、C:\ander\ts-ex\src\..\api は存在しエディタからジャンプもできます。

TypeScript初心者でどうれば yarn webpack コマンドを正常に完了できますか？
(そもそも40行もファイルが無いのに ./src/content_scripts.ts 40:12-29 と表示されのはなぜでしょうか？)

{
  "name": "chrome-extension-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "license": "MIT",
  "dependencies": {
    "webextension-polyfill-ts": "^0.11.0"
  },
  "devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.4.26",
    "@types/copy-webpack-plugin": "^5.0.0",
    "@types/webpack": "^4.41.0",
    "copy-webpack-plugin": "^5.0.5",
    "ts-loader": "^6.2.1",
    "ts-node": "^8.5.2",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

import { ConfigurationFactory } from 'webpack'
import path from 'path'
import CopyWebpackPlugin from 'copy-webpack-plugin'

const config: ConfigurationFactory = () => {
  return {
    mode: "development",
    entry: {
      content_scripts: path.join(__dirname, 'src', 'content_scripts.ts')
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /.ts$/,
          use: 'ts-loader',
          exclude: '/node_modules/'
        }
      ]
    },
    resolve: {
      extensions: ['ts', 'js']
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: 'public', to: '.' }
      ])
    ]
  }
}

export default config

Answer 1

C:\ander\ts-ex\src..\api は存在し

フォルダは（index.tsを置いていない限り）importできません。importできるのはファイルだけです。

Comments

[hogehogemastar]

ご回答ありがとうございます。すみません。スクリーンショットには映ってませんでしたが、```ts-ex\api\index.ts``` は存在します。このapiディレクトリのファイルは自動生成されたものですので特に編集はしておりません。(api配下の各ディレクトリにもindex.tsは存在します。)
```index.ts
/* tslint:disable */
/* eslint-disable */
export * from './runtime';
export * from './apis';
export * from './models';
```