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!
  • 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
  • An Interactive Guide to SVG Paths
    2025-08-18
  • A Friendly Introduction to SVG
    2025-07-21
  • Partial Keyframes
    2025-06-10
  • The Height Enigma
    2025-05-12
  • The Post-Developer Era
    2025-04-14
  • A Million Little Secrets
    2025-02-24

RSS Cointelegraph

  • Canton token rallies 27% after DTCC outlines tokenized Treasury plans 2025-12-25
  • Bitcoin mining’s 2026 reckoning: AI pivots, margin pressure and a fight to survive 2025-12-25
  • What the $310B stablecoin market reveals about crypto adoption 2025-12-25
  • Fed Q1 2026 outlook: Potential impact on Bitcoin and crypto markets 2025-12-25
  • Quantum computing in 2026: No crypto doomsday, but time to prepare 2025-12-25

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

  • Thank You (2025 Edition) 2025-12-23
  • text-decoration-inset is Like Padding for Text Decorations 2025-12-22
  • Masonry Layout is Now grid-lanes 2025-12-19
  • Search CSS-Tricks Raycast Extension 2025-12-18
  • Responsive List of Avatars Using Modern CSS (Part 2) 2025-12-17

RSS Coliss

  • 2026年用、日本語のフリーフォント817種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 2025-12-25
  • Figmaの使い方も進化している! デザインの現場でどのように活用するのかが分かる解説書 -Figmaではじめるデザインコラボレーション 2025-12-24
  • Affinityの有料版を買ってた人に朗報! v3無料化記念、v1, v2ユーザーは有料フォントが無料でダウンロードできます 2025-12-24
  • 2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編 2025-12-23
  • これはかっこいい! コピペで簡単に実装できる、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクト 2025-12-22

カテゴリー

  • 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!
  • 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
  • An Interactive Guide to SVG Paths
    2025-08-18
  • A Friendly Introduction to SVG
    2025-07-21
  • Partial Keyframes
    2025-06-10
  • The Height Enigma
    2025-05-12
  • The Post-Developer Era
    2025-04-14
  • A Million Little Secrets
    2025-02-24

RSS Cointelegraph

  • Canton token rallies 27% after DTCC outlines tokenized Treasury plans 2025-12-25
  • Bitcoin mining’s 2026 reckoning: AI pivots, margin pressure and a fight to survive 2025-12-25
  • What the $310B stablecoin market reveals about crypto adoption 2025-12-25
  • Fed Q1 2026 outlook: Potential impact on Bitcoin and crypto markets 2025-12-25
  • Quantum computing in 2026: No crypto doomsday, but time to prepare 2025-12-25

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

  • Thank You (2025 Edition) 2025-12-23
  • text-decoration-inset is Like Padding for Text Decorations 2025-12-22
  • Masonry Layout is Now grid-lanes 2025-12-19
  • Search CSS-Tricks Raycast Extension 2025-12-18
  • Responsive List of Avatars Using Modern CSS (Part 2) 2025-12-17

RSS Coliss

  • 2026年用、日本語のフリーフォント817種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 2025-12-25
  • Figmaの使い方も進化している! デザインの現場でどのように活用するのかが分かる解説書 -Figmaではじめるデザインコラボレーション 2025-12-24
  • Affinityの有料版を買ってた人に朗報! v3無料化記念、v1, v2ユーザーは有料フォントが無料でダウンロードできます 2025-12-24
  • 2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編 2025-12-23
  • これはかっこいい! コピペで簡単に実装できる、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクト 2025-12-22

カテゴリー

  • 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 (TypeScript): Blob/File to base64 using FileReader.readAsDataURL()

  • Posted in React, TypeScript

pdfmake: PDF download in JavaScript (React)

  • Posted in JavaScript, React

AWS Amplify: Auth関連まとめ

  • Posted in AWS, GraphQL, React, TypeScript

Nuxt.jsで Dropzone.jsを使ってみる(Vue2-Dropzone)

  • Posted in Nuxt.js, TypeScript

Follow me on Twitter.