How To Get Variables From package.json In Your JS / TS Code

Let’s say you have a bit of information inside package.json that you’d like to use somewhere in your code. An example of this in my case is the version string which I have to set for Electron to then generate the new file name for the “built” version of my app.

I figured if I’m specifying the version in package.json, I could display that value in the app footer. This would then, hopefully, help with a variety of first step debugging processes / help / support requests. It’s a quick visual check to ensure the user is on the latest version.

Anyway, this is one of them things that doesn’t come up for me that often, and when it does, I tend to forget how to do it.

import { version as appVersion } from '../package.json';

const Footer = () => {
  return (
        v{appVersion} © 2019 -{' '}
        {new Date().getFullYear()} A6 Software Ltd. All rights reserved.

(Ugh, seems WordPress code formatting has some … issues, shall we say, at present)

Pretty straightforward.

package.json is not a special case here, even though it might seem like it would be. This is how you can get a value from any JSON file.

This may not work immediately, it really depends on how your project is set up.

Using ReactCSSTransitionGroup with TypeScript

I wanted to use ReactCSSTransitionGroup to add a little animation to a React and TypeScript project I was working on.

Following the docs:

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6

Seems ok. But on doing this, in my .tsx  file, I ended up with a compilation error:

Failed to compile.

(2,8): Module '"/path/to/my/node_modules/@types/react-addons-css-transition-group/index"' has no default export.

The fix to this came to me, as I’d read this somewhere previously a few months ago when doing my original exploration of TypeScript.

The syntax I really needed was:

import * as ReactCSSTransitionGroup from 'react-addons-css-transition-group';

I honestly can’t remember where I first read this. But hopefully I can at least pass a helpful little tip on to you.