React Accelerator 1.0.0-rc2 and Litium8.13 issues

I seem to be running into a few issues on a brand new installation of Litium 8.13 and the RC2 of the React Accelerator and I’m currently stuck.

A few issues I’ve run into that I’ve been able to solve:

  • The .env.example file has the wrong variable name for the Litium URL. It has LITIUM_SERVER_URL and should be RUNTIME_LITIUM_SERVER_URL

  • For some reason I cannot install the Litium.Storefront.Cli in iterm2 on Mac - Currently working around this by using bash directly.

  • A friendly reminder to add the URL your Storefront is listening on to the channel, error message here should be more clear.

And now to the issue I got as we speak that I can’t seem to be able to work around.

[GraphQL error for url https://thisisnottherealdomain.localtest.me:5001/storefront.graphql]: Message: The field `productFilterFields` does not exist on the type `AcceleratorWebsiteWebsiteFieldContainer`., Location: [{"line":104,"column":9}], Path: ["channel","website","fields"], Data: {"headers":{"cookie":null,"x-litium-storefront-context-url":"https://localhost:3001/"}}
[GraphQL Network error for url https://thisisnottherealdomain.localtest.me:5001/storefront.graphql]: ServerError: Response not successful: Received status code 400
Stack: ServerError: Response not successful: Received status code 400
    at throwServerError (webpack-internal:///(rsc)/./node_modules/@apollo/client/link/utils/throwServerError.js:6:17)
    at parseJsonBody (webpack-internal:///(rsc)/./node_modules/@apollo/client/link/http/parseAndCheckHttpResponse.js:133:74)
    at eval (webpack-internal:///(rsc)/./node_modules/@apollo/client/link/http/parseAndCheckHttpResponse.js:187:20)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ node_modules/@apollo/client/errors/index.js (39:27) @ call
 ⨯ ApolloError: Response not successful: Received status code 400
    at new Promise (<anonymous>)
    at Array.forEach (<anonymous>)

If I try to follow the steps to import the definitions here it keeps telling me that the yml files aren’t a recognised command.

bash-3.2$ litium-storefront definition import --file litium-definitions/**/*.yaml --litium https://thisisnottherealdomain.localtest.me:5001 --litium-username <redacted> --litium-password <redacted>
Unrecognized command or argument 'litium-definitions/texts/addresssummary.yaml'.
Unrecognized command or argument 'litium-definitions/texts/cartcontent.yaml'.
Unrecognized command or argument 'litium-definitions/texts/cartlineitem.yaml'.
Unrecognized command or argument 'litium-definitions/texts/categorysearchresult.yaml'.
Unrecognized command or argument 'litium-definitions/texts/checkoutcart.yaml'.
Unrecognized command or argument 'litium-definitions/texts/checkoutdiscountcodes.yaml'.
Unrecognized command or argument 'litium-definitions/texts/checkoutheader.yaml'.
Unrecognized command or argument 'litium-definitions/texts/checkoutpage.yaml'.
Unrecognized command or argument 'litium-definitions/texts/checkoutwizard.yaml'.
Unrecognized command or argument 'litium-definitions/texts/deliverysummary.yaml'.
Unrecognized command or argument 'litium-definitions/texts/emailorderconfirmation.yaml'.
Unrecognized command or argument 'litium-definitions/texts/facetedfiltercompact.yaml'.
Unrecognized command or argument 'litium-definitions/texts/filtersummary.yaml'.
Unrecognized command or argument 'litium-definitions/texts/form.yaml'.
Unrecognized command or argument 'litium-definitions/texts/minicart.yaml'.
Unrecognized command or argument 'litium-definitions/texts/orderconfirmation.yaml'.
Unrecognized command or argument 'litium-definitions/texts/orderconfirmationpage.yaml'.
Unrecognized command or argument 'litium-definitions/texts/pagesearchresult.yaml'.
Unrecognized command or argument 'litium-definitions/texts/productcard.yaml'.
Unrecognized command or argument 'litium-definitions/texts/productdetail.yaml'.
Unrecognized command or argument 'litium-definitions/texts/productlist.yaml'.
Unrecognized command or argument 'litium-definitions/texts/productsearchresult.yaml'.
Unrecognized command or argument 'litium-definitions/texts/quantityinput.yaml'.
Unrecognized command or argument 'litium-definitions/texts/searchresult.yaml'.
Unrecognized command or argument 'litium-definitions/texts/stockstatus.yaml'.
Unrecognized command or argument 'litium-definitions/texts/totalsummary.yaml'.

At this point I tried to export the existing definitions to verify how those files look and got the error

Litium version is not supported.

So now I’m at a loss :slight_smile:

Update: When importing/exporting definitions the proxy needs to be running and you need to run the command towards the proxy and not Litium backend directly.

I still got the “Unrecognized command or argument” issue during import :slight_smile:

If you using the Litium-server url directly in the command for importing the definition you don’t need to have the proxy running.

The unrecognized command sounds more that you not have an updated version of the litium.storefront.cli package, what version number will the dotnet tool list -g report for the tool?

If you install the latest version with dotnet tool update -g litium.storefront.cli --version 1.0.0-rc-* --no-cache and then trying to import again, will you get the same error?

1 Like

If I type dotnet tool list -g I get the following response

Package Id                 Version          Commands
-------------------------------------------------------------
...                  ...           ...
litium.storefront.cli      1.0.0-rc-02      litium-storefront
...                  ...           ...

As far as I know rc-02 is the latest version? And I did install this earlier today.

If I go towards the Litium URL directly I get Litium version is not supported. - It seems to work “perfectly” going through the proxy however.

I noticed that I could import a single definition file, but using the wildcard I get “Unrecognized command …”, so I overengineered this a bit with this shell script

#!/usr/bin/env bash

definitionsPath=$1
if [[ -z "$definitionsPath" ]]; then
  echo "Definitions path need to be provided"
  exit 1
fi

litiumProxyUrl=$2
if [[ -z "$litiumProxyUrl" ]]; then
  echo "You need to provide the URL to the running Litium Storefront proxy"
  exit 1
fi

litiumUsername=$3
if [[ -z "$litiumUsername" ]]; then
  echo "You need to provide a Litium username"
  exit 1
fi

litiumPassword=$4
if [[ -z "$litiumPassword" ]]; then
  echo "You need to provide a Litium password"
  exit 1
fi

echo "Looking for files in $definitionsPath"

filePaths=()
find $definitionsPath -type f -name '*.yaml' -print0 >tmpfile
while IFS=  read -r -d $'\0'; do
    echo "Processing $REPLY"
    litium-storefront definition import --litium $litiumProxyUrl --litium-username $litiumUsername --litium-password $litiumPassword --file "$REPLY"
done <tmpfile
rm -f tmpfile

echo 'Import definitions done'

Which seems to work to a certain degree, except for a few files. An example is here:

Processing ClientPortal.Litium.StoreFront/litium-definitions/websites/fieldTemplates/Home.yaml
Reference for block field template types [Banner] that not exists in definition.

Error when processing file: /Users/michaelask/development/exsitec/ProjectName.Litium.StoreFront/litium-definitions/websites/fieldTemplates/Home.yaml for yaml
websiteTemplates:
- blockContainers:
  - id: Main
    name:
      sv-SE: Main
      en-US: Main
    childBlocks:
      combination: IncludeSelected
      selections:
      - id: Banner
  settings:
    indexThePage: true
  type: Page
  fieldGroups:
  - id: General
    name:
      en-US: General
      sv-SE: Allmänt
    fields:
    - id: _name
    administration:
      collapsed: false
    storefront:
      visible: false
  id: Home
  name:
    en-US: Home page
    sv-SE: Startsida

Alright, I just figured figured out why multiple imports didn’t work and it now works using the proxy.

The shell interprets wildcards, and not dotnet. If I escape the wildcards it works.
litium-storefront definition import --litium https://localhost:3001 --litium-username usernamehere --litium-password passwordhere --file litium-definitions/\*\*/\*.yaml

Running towards Litium directly does not work however, as you get Litium version is not supported.

1 Like

For the escaping, will it work to put the litium-definitions/**/*.yaml inside quotes? (single or double)

Can you test if it works if you use the --insecure flag on the command and going directly to Litium server url?

Yes, and yes!

Quotation marks (single and double) works. So this could be added to the documentation.

If you provide the --insecure flag while importing it works towards the Litium backend directly.

1 Like

To summarise this thread a bit then:

General issues:

  • The error that will show up in generate-possible-types.js is fixed by changing the LITIUM_SERVER_URL variable name to RUNTIME_LITIUM_SERVER_URL in your .env file. Hopefully you’ll fix this before 1.0.0 (or RC3)
  • You can import the litium-definitions through the storefront proxy directly or by adding the --insecure flag towards Litium in your local environment
    Through proxy: litium-storefront definition import --litium https://localhost:3001 --litium-username usernamehere --litium-password passwordhere --file "litium-definitions/**/*.yaml"
    Towards Litium directly: litium-storefront definition import --litium https://litium.localtest.me:5001 --litium-username usernamehere --litium-password passwordhere --file "litium-definitions/**/*.yaml" --insecure
  • Remember to add your proxy url to the channel in Litium

MacOS specific problems:

  • Microsoft is a bit oblivious to how MacOS works, so you need to make changes where to find your dotnet tools in order to not be forced to run bash directly (more info here macOS dotnet CLI path for global tools is bad - Installer issue · Issue #23165 · dotnet/sdk · GitHub) - The litium-db command works when you’re in a dotnet project, but the litium-storefront (and probably the serverless cloud cli as well?) won’t work outside of a dotnet project with the .tools directory.
  • Importing the Litium definitions on another system than Windows fails using wildcards (/**/*.yaml)
    The shell interprets the wildcard before dotnet does. You need to escape the wildcards or put them into a quote. (litium-definitions/\*\*/\*.yaml, "litium-definitions/**/*.yaml" or 'litium-definitions/**/*.yaml')
1 Like

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.