Issue while using ConfigurableUiContent

[hsanand61564]

Hi

When I am rendering ConfigurableUiContent in my react component following error is being shown.

Basically, I am trying to make a separate react component for my viewer and use the same as an NPM package.

Any help in this regards would be really appreciated

[DanEastBentley]

We are unable to determine the cause of the problem based on the call stack. Are you able to provide the application source code?

[aruniverse]

Please check your lockfile to confirm that there is only one copy of react & react-dom in your application

[hsanand61564]

@bsteinbk @aruniverse @DanEastBentley I am unable to get away out for the same and still stuck on the same issue. I am attaching the code to my application herein.

Bentley_Code_Final.zip

Herein my npm package is imodel-hub-viewer whereas my main package is ms-viewer. Currently, I have made the direct reference of my npm package in my main package. You just have to put the file path of any local bim file, here is the file wherein that change has to be made.

I would be really thankful if you could have a look into our code and suggest us something so that I can get out of this particular issue.

[aruniverse]

@hsanand61564 Are you writing a desktop or web application?

If you're writing a web app, then unfortunately you can't open a local model/snapshot without a local backend. Having a web app point to a local backend defeats the entire purpose and is highly discouraged; we suggest you think about writing a desktop app then. We will be removing support for the snapshotPath in an upcoming version of the itwin-viewer for this reason.

If you're writing a desktop app, then please refer to the desktop starter where you can open a local model/snapshot.

[hsanand61564]

@aruniverse I understand that writing a web app with a local iModel/snapshot is not recommended, we were just doing this for testing and development purposes. Ultimately what we are trying to accomplish is to have an iModel Backend and iModel Frontend in a private Azure environment, where the Frontend utilizes all the core functionality available in the iTwin-Viewer-React packages.
An area where we are struggling with is that it seems the iTwin-viewer packages defaults the authentication against the iModelHub, whereas we would like to authenticate against a service that we have built into our iModel backend agent.

Is there a way to use these packages in an environment as described above?

[aruniverse]

Unfortunately, the web based itwin-viewer does not currently support what you are looking for just yet We are looking into it, but we can't give you an estimated timeline for when this will be supported (connecting to your own private IModelBank).

I believe you should be able to authenticate against your own service if you have your own OIDC-client user manager. There is an authConfig prop you can pass into your Viewer component, please refer to documentation for the itwin-viewer.

Your best bet for using a snapshot would be working off the desktop-starter template linked earlier.

Note for the future, it would be more helpful if you submitted your code to a public github repo rather than uploading a zip file for us to manually inspect/debug.

[ramanujam-raman-zz]

Is there a way to use these packages in an environment as described above?

• You should be able to open snapshots without requiring Bentley authorization (that's only needed for opening iModels hosted on iModel Hub) - examining the itwin-viewer code, it looks like you could setup ViewerProps.authConfig.oidcClient with a simple implementation of FrontendAuthorizationClient. That implementation only requires fairly generic methods that are not at all specific to Bentley authorization. Have you tried that out? If so, what was the issue you had?
• Also, on your fork of the code, we noticed that you did work on making the authorization client itself optional - were you successful with that? What was the issue you had?
• Now, with snapshots, the recommendation would be to use SnapshotConnection.openRemote() and NOT SnapshotConection.openFile(). The latter requires the path to the file at the backend - something that's typically not exposed to the frontend. With SnapshotConnection.openRemote() you pass in a key which is then resolved to the filePath at the backend through IModelHost.snapshotFileNameResolver. The current version of itwin-viewer does not expose SnapshotConnection.openRemote(), but we will be enhancing that in a future version to provide better support for web viewing of snapshots.

[bsteinbk]

@hsanand61564 I am unable to successfully run npm run build on either of your packages. Is there a reason you are not using the procedure defined on https://npm.io/package/@bentley/cra-template-itwin-viewer to get a basic starter app?

[hsanand61564]

@bsteinbk The main reason behind not using cra-template-itwin-viewer is that my backend is customized and I want to open only the offline model files in my system. So had to go out to tweek some changes so as to open local model files using my own backend.

My bad about not building up the code, have made the changes that would build the code for you. Apologies for the same.

Update code is below:

Bentley_Code_Final.zip

You just need to run npm install or yarn in both packages and run ms-viewer using npm run start.

Thanks in advance.

[hsanand61564]

@bsteinbk Any updates on the same?

I and my team are eagerly waiting for some solution regarding the issue, we would be really thankful if you could give some way out for the same.

[bsteinbk]

@hsanand61564 I did try to install and build the code in the new zip and both packages still fail to build. I did not look into it any further due to @aruniverse comments #1194 (reply in thread) since he is more familiar with itwin-viewer and he suggests a different approach.

[hsanand61564]

@aruniverse @ramanujam-raman @DanEastBentley I have made the github repo containing all the code if that could help u debug and see locally.

here is the link 👍 https://github.com/hsanand61564/web-model-viewer

[hsanand61564]

@nick4598 yeah this is like a solution, my just one last query is about two things.

1. the labels all around the viewer are not shown properly i.e. cube.left, cube.right, snapModeField.snapMode etc. Am I missing something that implements your localization part?
2. When I try to start the ms-viewer, it takes a lot of time to get bundled, is there a specific way to make it out faster?

Again thanks for all your support help and guidance.

[aruniverse]

Few comments:

1. In your Viewer component, the useEffect is missing the dependency list and might be the reason for your invalid hook call. An empty one should be fine, ie []. I would also look into what Nick mentioned above about having more than 1 copy of react and react-dom in your app, or having different versions.

2. In the same file, if you are pointing to your own backend, then you will need to pass in the backend prop to the Initiailizer.

Am I missing something that implements your localization part?

3. You have your own webpack config, so you will need to manage this yourself. In our bentley/react-scripts package we do this for you with the CopyBentleyStaticResourcesPlugin and a few other changes. Please see our recommended default config and this pr to pickup localized strings in development

When I try to start the ms-viewer, it takes a lot of time to get bundled, is there a specific way to make it out faster?

4. I have been unable to even start your client, i keep hitting an out of memory error. Once again, you have your own webpack config so we are unable to comment too much about it. I would say refer to our react-scripts fork that I have linked above. I will note, even with our webpack config it does take a few minutes to start up.

Good luck!

[hsanand61564]

@aruniverse @nick4598 Thanks a lot for your help, your help was really appreciated. All of the team is really helpful and awesome.

Thanks a ton !!!!!!!!!!!!!!!!!!

[hsanand61564]

@aruniverse @nick4598 I tried using the CopyBentleyStaticResourcesPlugin and it copeid the locales folder into my dist folder too. But when running up the viewer it is looking into the folder http://localhost:3000/locales/en-US/iModelJs.json
Here are the snapshots:

1. Webpack.config
   

2. dist folder

3. console showing error
   

Any help for the same ?

[aruniverse]

Looking at your code snippet, im guessing you added the CopyBentleyStaticResourcesPlugin plugin to imodel-hub-viewer\webpack.config.js, where as it should be added to ms-viewer\webpack.config.client.js. The plugin needs to be added to the webpack config that runs and builds your client. The above plugin will only copy localization files in a production build, so you will need to do a build of the client before running your client with the webpack dev server to see localized strings; unless you copy whats being done in the pr i had linked above earlier.

This discussion has gotten very off track from the original issue. Please try to keep the scope of this discussion to the original question so it will be easier for others in the community who hit the same issue to find a solution.