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!
  • 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
  • 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

RSS Cointelegraph

  • UK sanctions $20B scam market by cutting ‘legitimate’ crypto ties 2026-03-27
  • Cathie Wood's ARK taps Kalshi data to help make investment calls 2026-03-27
  • US federal judge temporarily blocks Pentagon's Anthropic ban 2026-03-27
  • Lawmakers push another bill to curb prediction market insider trading 2026-03-27
  • 80% of Strategy's ‘Stretch’ buyers are mom-and-pop investors 2026-03-27

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

  • Generative UI Notes 2026-03-26
  • Experimenting With Scroll-Driven corner-shape Animations 2026-03-23
  • JavaScript for Everyone: Destructuring 2026-03-19
  • What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More 2026-03-16
  • 4 Reasons That Make Tailwind Great for Building Layouts 2026-03-16

RSS Coliss

  • 入門書だけど、かなり実践的で詳しい! 進化したFigmaの使い方がよく分かる解説書 -Figmaのきほん 改訂版 2026-03-27
  • CSSのlight-dark()関数が画像もサポート! これでライトテーマとダークテーマの対応がさらに簡単になります 2026-03-26
  • 商用利用OKの無料版もあるぞ! レトロな雰囲気がかわいい、極太の日本語フォント「鳩とブリキのワンダランド」 2026-03-25
  • UIに使用する色のコントラストをAIで検証、基準を満たしていないときはデザインに合った代替色を提案してくれる無料ツール 2026-03-24
  • ミニマルなデザインで使いやすい! シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI 2026-03-23

カテゴリー

  • 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!
  • 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
  • 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

RSS Cointelegraph

  • UK sanctions $20B scam market by cutting ‘legitimate’ crypto ties 2026-03-27
  • Cathie Wood's ARK taps Kalshi data to help make investment calls 2026-03-27
  • US federal judge temporarily blocks Pentagon's Anthropic ban 2026-03-27
  • Lawmakers push another bill to curb prediction market insider trading 2026-03-27
  • 80% of Strategy's ‘Stretch’ buyers are mom-and-pop investors 2026-03-27

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

  • Generative UI Notes 2026-03-26
  • Experimenting With Scroll-Driven corner-shape Animations 2026-03-23
  • JavaScript for Everyone: Destructuring 2026-03-19
  • What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More 2026-03-16
  • 4 Reasons That Make Tailwind Great for Building Layouts 2026-03-16

RSS Coliss

  • 入門書だけど、かなり実践的で詳しい! 進化したFigmaの使い方がよく分かる解説書 -Figmaのきほん 改訂版 2026-03-27
  • CSSのlight-dark()関数が画像もサポート! これでライトテーマとダークテーマの対応がさらに簡単になります 2026-03-26
  • 商用利用OKの無料版もあるぞ! レトロな雰囲気がかわいい、極太の日本語フォント「鳩とブリキのワンダランド」 2026-03-25
  • UIに使用する色のコントラストをAIで検証、基準を満たしていないときはデザインに合った代替色を提案してくれる無料ツール 2026-03-24
  • ミニマルなデザインで使いやすい! シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI 2026-03-23

カテゴリー

  • 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

Tweets on web tools

  • Posted in JavaScript, Web Tech

React: MUI toast context

  • Posted in JavaScript, React, TypeScript

JavaScript: async/await をループ処理で使いたい -> Promise.all()でOK!

  • Posted in JavaScript

Axios cancelToken instead of debounce funtion

  • Posted in JavaScript, React

Follow me on Twitter.