Get version number from package.json in React Redux (create-react-app)
node.jsReactjsNpmReact ReduxCreate React-Appnode.js Problem Overview
OP EDIT: If anyone else comes across this: the app was created using create-react-app, which limits importing to within the src folder. However if you upgrade react-scripts to v1.0.11 it does let you access package.json.
I'm trying to get the version number from package.json in my app.
I've already tried these suggestions, but none of them have worked as I can't access package.json from outside the src folder (might be due to React, I'm new to this). Moving package.json into src then means I can't run npm install
, npm version minor
, and npm run build
from my root folder. I've tried using process.env.npm_package_version
but that results in undefined.
I'm using Jenkins, and I haven't set it up to push the commits up yet, but the only idea I have is to get the version from the tags in GitLab, but I have no idea how to do that, and it would add unnecessary dependency to the repo, so I would really like to find an alternative.
EDIT: My file structure is like:
--> RootAppFolder
|--> build
|--> node_modules
|--> public
|--> src
|--> Components
|--> Root.js
|
|--> package.json
So to access package.json from Root.js I have to do import packageJson from './../../package.json'
and then I get the following error:
> ./src/components/Root.js > > Module not found: You attempted to import > ./../../package.json which falls outside of the project src/ > directory. Relative imports outside of src/ are not supported. You can > either move it inside src/, or add a symlink to it from project's > node_modules/.
node.js Solutions
Solution 1 - node.js
Solving this without importing and exposing package.json
to the create-react-app
Requires: version 1.1.0+ of create-react-app
.env
REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name
index.js
console.log(`${process.env.REACT_APP_NAME} ${process.env.REACT_APP_VERSION}`)
Note: the version (and many other npm config params) can be accessed
Note 2: changes to the .env
file will be picked only after you restart the development server
Solution 2 - node.js
From your edit I would suggest to try:
import packageJson from '/package.json';
You could also try to create a symlink:
# From the project root.
cd src; ln -s ../package.json package.alias.json
List contents of src directory and you'll see the symlink.
ls
#=> package.alias.json -> ../package.json
Adding the .alias
helps reduce the "magic" for others and your future self when looking at this. Plus, it'll help text editors keep them apart. You'll thank me later. Just make sure you update your JS code to import from ./package.alias.json
instead of ./package.json
.
Also, please take a look at this question: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory
Solution 3 - node.js
Try this.
// in package.json
"version": "1.0.0"
// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"
Solution 4 - node.js
I don't think getting version by 'import' or 'require' package is correct. You can add a script in you package.json
"start": "REACT_APP_VERSION=$npm_package_version react-app-script start",
You can get it by "process.env.REACT_APP_VERSION" in any js files.
It also works in build scripts, like this:
"build": "REACT_APP_VERSION=$npm_package_version react-app-script build",
Solution 5 - node.js
import package.json
Generally speaking, importing package.json
is not good. Reasons: security & bundle size concerns
Yes, latest webpack (default config) + ES6 import
does tree-shaking (i.e. only includes the "version"
value instead of the whole package.json
) for both import packageJson from '../package.json'
and import { version } from '../package.json'
. But it is not guaranteed if you use CommonJS (require()
), or have altered your webpack config, or use another bundler/transpiler. It's weird to rely on bundler's tree-shaking to hide your sensitive data. If you insist on importing package.json
but do not want the whole package.json
exposed, you may want to add some post-build checks to ensure other values in package.json
are removed.
However the security concern here remains theoretical for open source projects whose package.json
is public after all. If both security and bundle size are not problems, or, the non-guaranteed tree-shaking is good enough for you, then go ahead)
.env
The .env
method, if it works, then it's good, but if you don't use create-react-app
, you might need to install dotenv
and do some additional configurations. There's also one small concern: it is not recommended to commit the .env
file (here and here), but if you do the .env
method, it looks like you will have to commit the file as it likely becomes essential for your program to work.
Best practice (arguably)
(this is not primarily for create-react-app
, but you still can either use react-app-rewired or eject cra in order to configure webpack
in cra)
If you use webpack
, then with DefinePlugin:
plugins: [
new webpack.DefinePlugin({
'process.env.VERSION': JSON.stringify(
process.env.npm_package_version,
),
}),
]
You can now use console.log(process.env.VERSION)
in your front-end program (development or production).
(You could simply use VERSION
instead of process.env.VERSION
, but it usually requires additional configuration to satisfy linters: add globals: {VERSION: 'readonly'}
in .eslintrc
(doc); add declare var VERSION: string;
in .d.ts
file for TypeScript)
Although it's "npm_package_version", it works with yarn
too. Here's a list of npm's exposed environment variables.
Other bundlers may have similar plugins, for example, @rollup/plugin-replace.
Solution 6 - node.js
Open your package.json file and change this line
Problem Is:
> // in package.json > > "scripts": { > "dev": "REACT_APP_VERSION=local REACT_APP_VERSION_NUMBER=$npm_package_version react-scripts start", > ... > }
Solution is
> // in package.json > > "scripts": { > "dev": "react-scripts start", > ... > }