React-Threekit-Single-File-bundle

Development
1

Hello everyone, Im facing an really weird issue.

My case is this, I am making an application in react. I saw that it is possible to generate a single file bundle using the --compact flag, since in my use case it is preferable to use a singe file from a private CDN to serve all the Threekit + React App javascript.

The problem I’m having is that in my local development, everything is working correctly, but when I run the yarn build-react command the application renders fine, but the attributes part returns an array with empty values to be selected. Which shows an empty dropdown, this doesn’t happen in my local version.

Even the attribute id matches the selected ones, but in the production version, the values are empty

Example of the attributes Object

// Local Dev enviroment
{
  attributes: {
    Color: {
      assetType: 'item',
      blacklist: [],
      defaultValue: { configuration: '' },
      disabledValues: [],
      enabled: true,
      hiddenValues: [],
      id: '757dd8f5-e05c-4301-8726-38220665c3d4',
      label: 'Color',
      name: 'Color',
      type: 'Asset',
      value: { configuration: '' },
      values: [{...}, {..}], // <--- I have two values here
      visible: true,
    },
  },
}

// Production Bundle
{
  attributes: {
    Color: {
      assetType: 'item',
      blacklist: [],
      defaultValue: { configuration: '' },
      disabledValues: [],
      enabled: true,
      hiddenValues: [],
      id: '757dd8f5-e05c-4301-8726-38220665c3d4',
      label: 'Color',
      name: 'Color',
      type: 'Asset',
      value: { configuration: '' },
      values: [], // <--- This is empty
      visible: true,
    },
  },
}

Does anyone have a similar problem?

2

Hey Luis, typically when the attribute values array is empty, the attributes they’re referencing in the catalog are not published. Can you ensure the items you are referencing in your attributes are published?

If they are published, can you please invite me to your environment? I will investigate for you. [email protected]

3

Hi Will, I think they are published. But I already send you the invite to the enviroment. Thanks for your help

FYI: Im doing a test, so the unique Item, is herarchy-test that’s why im trying to reach

4

Hi @Will, I was able to solve the problem I was facing. But I have another question, I am trying to embed my application in a Wordpress site, but the redux process shows me an error. I don’t know why, but when the Launch function is initialized, it performs some series of tasks, but what is happening is that when the functions are sent, Threekit is not loaded, so show me some errors in those functions.

An example of that:

Captura de Pantalla 2021-09-08 a la(s) 08.55.24

If I serve the bundle locally all works perfect, but in the site dont

5

Hi Luis. This is due to the publishing workflow on the platform. In dev on the React Dev-Kit, unpublished assets are allowed to show up, but in production those are hidden by default. Its likely this default thats causing the issue of the values not showing up.

If you’d like to allow unpublished assets to work in production as well, you simply have to replace the ThreekitProvider config object in src/index.js to allow for that change.

src/index.js

//  Old config object
  const config = Object.assign(
    {},
    process.env.NODE_ENV === 'development'
      ? { publishStage: 'draft' }
      : undefined
  );

//  New config object
const config = { publishStage: 'draft' }
6

For your second issue - the one related to the redux state - is that only happening in the Wordpress env or also when you build and serve it locally?

7

Hi @asaeed yeah only happens in the Wordpress env. Locally works perfectly