Directive AbstractStoreItemComponent in spartacus-storefront.d.ts has no selector, please add it - selector

I am trying to integrate the new Spartacus UI in my Testing application (a classical mystore application built according to the recommendations bound to Spartacus).
Having built my "mystore" application, which I have tested, and works quite well based on electronic-store-spa... I have added the 7 tgz files in a row "lib" directory // to "mystore".
Then I have done my yarn add
yarn add ...
All seems to go well but it is getting worse when I do the Yarn start (last milestone of the checklist).
I get the following error :
"ERROR in Directive AbstractStoreItemComponent in /Users/muller/work/VariantKonfigurator/spartacus4VC/js-storefront/mystore/node_modules/#spartacus/storefront/spartacus-storefront.d.ts has no selector, please add it"
Looking in Spartacus-storefront.ts at the same level, I can see that there is a type: Directive
How can I overcome this error?
Thank you.

Related

Having challenges configuring node:path not resolving in Remix

I'm trying to configure a Remix app to use i18next module for translations.
So far I've been following the guide on Github: https://github.com/sergiodxa/remix-i18next
It seems okay except I can't get node:path to resolve to a module.
I tried a few different things:
Updated nvm to use node 18 instead of 17. Neither works.
I also tried using const path = require('path') which works but then throws a different error trying to load the resource files.
I needed to remove the changeLanguage code in root.tsx to get it to start.
I'd like to isolate it by first trying to fix why the node:path isn't resolving so if someone could help with that, it would be a start?
Debug mode recommends: You can mark the path "node:path" as external to exclude it from the bundle, which will remove this error
But how do I mark it 'external' and what does that mean?

Error: Cannot find entry file ./node_modules/react-native-scripts/build/bin/crna-entry.js in any of the roots:

I keep receiving this error when running my App.js for React Native that was working perfectly well before I attempted installing Victory charts. Somehow something broke and after over three hours of work I am unable to figure out a solution. I have tried everything I could find on the web including uninstalling watchman, reinstalling watchman, reverting to React Native 0.55.4, some other recommended commands. Nothing is working.I am so confused.
$ yarn add react-native-scripts
This helped.
I think the other library may hurt the installation part of your package. To solve this issue on IOS you need to add its library like below:
First do 'yarn add react-native-scripts'. In the case that it dose't work continue other steps.
1-Go to the node module of your project and find the package folder and find the ios file inside it.
2- Then drag it into ‘library’ section of your xcode. (It is the subset of your project folders)
3- Then go to ‘build phase’ and in the ‘Link binary with libraries’ add it there by clicking on the plus sign
4- Then in some cases you need to add the correct path of the ios file inside your node module in the xcode. To do that you should go to ‘build setting’ section in the xcode and search header there. Then you need to add the path there below other paths.
5- Then clear everything (cmd+shift+k) and then finally compile it.
I hope it works for you.
In my case the "crna-entry.js" file does exist in the roots and my project should work (nothing have been modified from last time when it does work).
After hours searching, finally I figured out the reason:
the packager's directory checking is case-sensitive and in windows terminal the drive "c:/" will not be auto-corrected to "C:/" which will lead to error.
Hope this will help someone who gets the same error.
Below is the full error message:
The development server returned response error code:404 Cannot find
entry file node_modules/react-native-scripts/build/bin/crna-entry.js
in any of the roots:

How to create an aurelia 1.0 app that can be deployed at any root location

I am trying to work out how to deploy an aurelia app, it runs in development with au run. but I need to deploy it into a path which is not the root of the web-site. ie at '/site' not '/'
when I deploy I get an exception from the router: ERROR [app-router] Error: Route not found: /site/
I think it may be that I need to specify a baseURL in one or more places?
but can't see how I can:
make it work in the development environment at /
make it work in the deployed environment at /[any-site-path]
avoid building in knowledge of '/[any-site-path]' to my development environment or bundles, as the path wont be known until someone comes to deploy the code?
i found this question but that seems to apply to an out of date version of the code.
I am using Aurelia 1.0 and building using the au-cli
Any pointers would be useful.
Looks like this is a bug that has been fixed in a more recent version.
I have just gone through and applied the latest versions of:
"aurelia-bootstrapper": "^1.0.0" -> "^2.1.1"
"aurelia-cli": "^0.24.0" -> "^0.26.1"
"aurelia-tools": "^0.2.2" -> "^1.0.0"
And i can now deploy my application to a site sub folder without specifying any url content in the code or html files!
So I can satisfy all 3 of the criteria in my question.
Note the aurelia-cli update (0.25.0) requires a change to the main.(ts/js) as mentioned in the release notes.

Load debug version of pre-built module via npm/webpack

There is a javascript library, pre-built and available on npm, that I wish to develop with/debug. In my case, it is openlayers.
In the classic way of requiring a javascript file and wanting to debug, one would just switch the script url from the production version to the debug version, ie:
to
However, when using webpack and then importing via npm:
import openlayers from 'openlayers'
Gets you the production distribution of the library, the same as the ol.js script from above.
On a side note, to stop webpack trying to parse a prebuilt library and throw a warning about that you must include something like this:
// Squash OL whinging
webpackConfig.module.noParse = [
/\/dist\/ol.*\.js/, // openlayers is pre-built
]
Back to the problem at hand: how can I conditionally load a different entry-point for a module prebuilt and imported like this?
Of course, I can do it in a hacky way. By going into the node_modules/openlayers/package.json and switching the browser field from
"browser": "dist/ol.js",
to
"browser": "dist/ol-debug.js",
Is there a way I can request a different entry point via webpack or by using a different import syntax? Do I first have to petition the library maintainers to update the browser field to allow different entry point hints to browsers, according to the spec? https://github.com/defunctzombie/package-browser-field-spec
Thoughts on a more effective way to make this happen? Yearning to be able to programmatically switch loading of the production and debug versions of a library based on env variables.
Webpack has configuration options for replacing a module into a different path: https://webpack.github.io/docs/configuration.html#resolve-alias
This resolves the openlayers import to use the debug version:
webpackConfig.resolve.alias: {
openlayers: 'openlayers/dist/ol-debug.js'
}
In my build system I have a function that takes the environment type and returns the matching webpackConfig. Based on the parameter I include the above snippet or not.
Full code: webpack-multi-config.js
I have two different (gulp-) tasks for development and production. For example the production task: webpackProduction.js
Line 1 imports the config script with production as type.
My build system is based on gulp starter.

Agile Central example cumulative flow diagram not rendering

After checking out the source from: https://github.com/RallyApps/app-catalog
I attempted to build the Portfolio Item cumulative flow diagram src/apps/charts/rpm/cfd locally using
rally-app-builder build which shows no errors
Launching App-debug.html allows me to input the relevant settings, but once I click 'save', nothing renders and there are no errors logged to the JS console either, making debugging challenging.
I attempted to copy the build output into a custom html app inside rally, which displayed the same behaviour.
Is this a bug with the example app? Or have I missed some crucial configuration step?
EDIT:
Extra info - I tried running via the rally-app-builder to no avail (think it's related to this issue: https://github.com/RallyApps/rally-app-builder/issues/45). I attempted to flatten the structure and the result of that was a cross-origin request error.
Running from file resulted in a 403 for the SDK
Sorry about that- that Rally App Builder issue is definitely the problem you're running into. Just as a test I downloaded the built html output for that app from the app catalog release: https://github.com/RallyApps/app-catalog/releases/download/2.1/2.1.zip
It worked when installed on a custom html app on my dashboard once I edited the app settings and configured a portfolio item.
If you're looking to tweak this app from source you'll probably have to copy all those files referenced in config.json that live in parent directories into the main app directory and fix the paths in config.json. Then you should be able to build and run the app normally using Rally App Builder.
It seems this app was really not designed to be run externally, so I added a little code to ease the issues I ran into:
In PortfolioChartAppBase.js, _loadSavedPortfolioItem function:
scope: this,
fetch: ['Name', 'ObjectID'] //this is new
And I added some default settings as a top level config object in CumulativeFlowChartApp.js (since the code to force into settings mode doesn't seem to work correctly when running externally):
config: {
defaultSettings: {
portfolioItemPicker: '/portfolioitem/feature/52725935318', //insert a valid oid here
startDate: 'actualstartdate',
endDate: 'actualenddate',
chartAggregationType: 'storycount'
}
},