Skip to the content Skip to the main menu

Time is Life!

Make your life fun and creative!!

  • Sitemap
A freelance web engineer. A dad for two kids :)
Be simple and practical!
  • Getting Started with Anchor Positioning
    2026-07-06
  • CSS vs. JavaScript
    2026-05-26
  • Scroll-Driven Animations
    2026-04-28
  • Squash and Stretch
    2026-04-13
  • Sneaky Header Blocker Trick
    2026-03-23
  • Sprites on the Web
    2026-02-23
  • Brand New Layouts with CSS Subgrid
    2025-11-25
  • Springs and Bounces in Native CSS
    2025-10-28
  • The Big Gotcha With @starting-style
    2025-09-22
  • Color Shifting in CSS
    2025-09-08

RSS Cointelegraph

  • Here’s what happened in crypto today 2026-10-03
  • NEAR Intents recovers entire stolen $3.8M after ultimatum to exploiter 2026-10-03
  • Community banks sue OCC over trust bank charters of crypto firms 2026-10-03
  • Trump is expected to appoint Jay Clayton as new AI czar: Reports 2026-10-03
  • European crypto users have ‘more faith’ in regulated firms under MiCA: Bitpanda co-CEO 2026-10-02

RSS CoinPost

  • WiFi共有のDePin系プロジェクト「Roam」、ソラナブロックチェーンに移行 2024-04-01
  • イーサリアムの分散化促進などを期待 ヴィタリック、開発計画「パージ」を説明 2024-04-01
  • Farcaster開発企業、パラダイム主導のラウンドで「ユニコーン」に 2024-04-01
  • コインベースがArkham新規上場、廃止銘柄も 2024-04-01
  • テザー社、ビットコイン保有が7800億円超え 2024-04-01

RSS CSS-Tricks

  • Let’s Use the Emergent CSS random() Function in all the Browsers 2026-08-31
  • What’s !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More 2026-08-31
  • Creating Web Widgets Using the Document Picture-in-Picture API 2026-08-27
  • animation-trigger 2026-08-26
  • MicroLighter: Syntax Highlighter 2026-08-25

RSS Coliss

  • ここ1,2年で大きく変わった! デザインのワークフローにAIを活用したやり方がよく分かる解説書 -AIを味方にする デザインワークフロー実践ガイド 2026-10-02
  • 長年の悩みがこれで解決! CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」 2026-10-01
  • ガラスの屈折やぼかしも美しい! WebページのさまざまなUI要素をリキッドグラスにするエフェクトライブラリ -LiquidGlass 2026-09-30
  • Web制作者は要チェック! iframeのレスポンシブなサイズ調整など、Chrome 154で新しく追加された7つのCSSの機能 2026-09-29
  • Kindle本 秋の特大セールが開催! Webや紙のデザイン、創作用辞典、イラスト関連の良書が半額で超お買い得です 2026-09-28

カテゴリー

  • AWS (4)
  • CircleCI (1)
  • CSS (2)
  • Docker (2)
  • GCP (2)
  • GraphQL (2)
  • i18n (2)
  • JavaScript (15)
  • Next.js (4)
  • Node.js (1)
  • Nuxt.js (10)
  • React (10)
  • Sass (2)
  • Storybook (1)
  • tailwindcss (1)
  • TypeScript (18)
  • Web Tech (2)
  • 転職 (2)

Make your life fun and creative!!

  • Sitemap
A freelance web engineer. A dad for two kids :)
Be simple and practical!
  • Getting Started with Anchor Positioning
    2026-07-06
  • CSS vs. JavaScript
    2026-05-26
  • Scroll-Driven Animations
    2026-04-28
  • Squash and Stretch
    2026-04-13
  • Sneaky Header Blocker Trick
    2026-03-23
  • Sprites on the Web
    2026-02-23
  • Brand New Layouts with CSS Subgrid
    2025-11-25
  • Springs and Bounces in Native CSS
    2025-10-28
  • The Big Gotcha With @starting-style
    2025-09-22
  • Color Shifting in CSS
    2025-09-08

RSS Cointelegraph

  • Here’s what happened in crypto today 2026-10-03
  • NEAR Intents recovers entire stolen $3.8M after ultimatum to exploiter 2026-10-03
  • Community banks sue OCC over trust bank charters of crypto firms 2026-10-03
  • Trump is expected to appoint Jay Clayton as new AI czar: Reports 2026-10-03
  • European crypto users have ‘more faith’ in regulated firms under MiCA: Bitpanda co-CEO 2026-10-02

RSS CoinPost

  • WiFi共有のDePin系プロジェクト「Roam」、ソラナブロックチェーンに移行 2024-04-01
  • イーサリアムの分散化促進などを期待 ヴィタリック、開発計画「パージ」を説明 2024-04-01
  • Farcaster開発企業、パラダイム主導のラウンドで「ユニコーン」に 2024-04-01
  • コインベースがArkham新規上場、廃止銘柄も 2024-04-01
  • テザー社、ビットコイン保有が7800億円超え 2024-04-01

RSS CSS-Tricks

  • Let’s Use the Emergent CSS random() Function in all the Browsers 2026-08-31
  • What’s !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More 2026-08-31
  • Creating Web Widgets Using the Document Picture-in-Picture API 2026-08-27
  • animation-trigger 2026-08-26
  • MicroLighter: Syntax Highlighter 2026-08-25

RSS Coliss

  • ここ1,2年で大きく変わった! デザインのワークフローにAIを活用したやり方がよく分かる解説書 -AIを味方にする デザインワークフロー実践ガイド 2026-10-02
  • 長年の悩みがこれで解決! CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」 2026-10-01
  • ガラスの屈折やぼかしも美しい! WebページのさまざまなUI要素をリキッドグラスにするエフェクトライブラリ -LiquidGlass 2026-09-30
  • Web制作者は要チェック! iframeのレスポンシブなサイズ調整など、Chrome 154で新しく追加された7つのCSSの機能 2026-09-29
  • Kindle本 秋の特大セールが開催! Webや紙のデザイン、創作用辞典、イラスト関連の良書が半額で超お買い得です 2026-09-28

カテゴリー

  • AWS (4)
  • CircleCI (1)
  • CSS (2)
  • Docker (2)
  • GCP (2)
  • GraphQL (2)
  • i18n (2)
  • JavaScript (15)
  • Next.js (4)
  • Node.js (1)
  • Nuxt.js (10)
  • React (10)
  • Sass (2)
  • Storybook (1)
  • tailwindcss (1)
  • TypeScript (18)
  • Web Tech (2)
  • 転職 (2)

Using package.json as a module in TypeScript

If you want to get a value like the version info from package.json, this is what to do.

Add resolveJsonModule config to tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    ...
    "resolveJsonModule": true
  }
}

Import package.json in your ts file.

import { version } from 'package.json';
  • Post date
    2021-03-31
  • Posted in JavaScript, TypeScript
Previous post: Next.js with PostCSS 100vh Fix Next post: How to seed data into Mongo with Docker

Related Posts

React: MUI toast context

  • Posted in JavaScript, React, TypeScript

Nuxt.js: Auto-complete search with Google Maps API (TypeScript)

  • Posted in GCP, Nuxt.js, TypeScript

Nuxt.js: TypeScript開発での環境構築 with nuxt-property-decorator & sass

  • Posted in Nuxt.js, TypeScript

Next.js: file/image upload using api route (pages/api)

  • Posted in Next.js, React, TypeScript

Follow me on Twitter.