Access package.json version from frontend

StealJS
1

Hi,

I’m just starting a new project where the application version has to be displayable in an about page on the frontend. I would like to get this from the package.json version. I am using stealjs with canjs (all latest available versions). I tried

import PackageJSON from '~/package.json';

This seems to work ok, but I get a warning from steal.

The module with address http://172.16.14.216:9001/package.json is being instantiated twice.
This happens when module identifiers normalize to different module names.

Modules:
    package.json!npm
projectname@1.0.0#package.json
    - http://172.16.14.216:9001/app/config.js

Or, maybe someone has a better idea on how to achieve what I am trying to achieve. I’m thinking that perhaps I do not have to explicitly import package.json (with a bit of luck).

Thanks in advance

Rob

2

Hi @robfoweraker, you’re doing everything right. That warning is a false positive. What version of steal are you on? it was fixed in 1.5.19. If you have 1.5.19 or 1.6.0 you should not see that any more. Let me know if you do.

3

Hi Matthew,

Thanks for the reply. I was using Steal 1.5.18. I will update and report back.

Rob

4

HI Matthew,

I can confirm that I no longer see the warning in steal 1.6.0.

Thanks!

Rob

2 Likes
5

Hi Rob,

What I have used previously is to add settings to the steal configuration in the package.json file:

  "steal": {
    "main": "main.js",
    "directories": {
      "lib": "src"
    },
    "npmAlgorithm": "flat",
    "plugins": [
      "steal-stache",
      "steal-css"
    ],
    "serviceBaseURL": "http://localhost:4040/api/",  // <-- these 
    "debug": true, // <-- these 
    "localeVersion": "1" // <-- these 
  },

Then I use it like so where needed:

import loader from '@loader';

console.log(loader.debug);

Perhaps Matthew can provide some input as to the validity of this approach. I have also used a configuration.js file of sorts that just gets sucked in using a normal <script> tag and it contain some object that represents the required values:

mynamespace.configuration = {
  debug: false,
  someUrl: "http://myapi"
}
6

Hi Matthew,

I see the same problem in the production build using steal-tools@1.3.1. This problem was being hidden before as I was loading the bundle using the steal.production.js from the steal node_modules, rather than dist/steal.production.js (I read the docs! things have changed a lot recently.)

@eben_roux : thanks - will think about it some more.

Rob

7

Hi @robfoweraker, do you get the same issue if you upgrade to the latest steal-tools (1.9.2 as of right now)?

8

Hi @chasen, In fact I was building with steal-tools 1.9.1 (confused it with steal-css 1.3.1). I upgraded to 1.9.2 and there is no longer a warning message.

Thanks!
Rob

1 Like