I have implemented the following article on my NX workspace in order to have one host to all of my Storybook stories.
One of the components demand an external library. I'm trying to add the script file to project.json ("scripts": ["node_modules/leader-line/leader-line.min.js"],) and get the folloing error when running storybook:
Data path "" must NOT have additional properties(scripts).
This is my project.json:
{
"name": "storybook-host",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/storybook-host/src",
"prefix": "inf",
"tags": [],
"projectType": "library",
"targets": {
"storybook": {
"executor": "@storybook/angular:start-storybook",
"options": {
"port": 4400,
"configDir": "libs/storybook-host/.storybook",
"browserTarget": "storybook-host:build-storybook",
"compodoc": false
},
"configurations": {
"ci": {
"quiet": true
}
}
},
"build-storybook": {
"executor": "@storybook/angular:build-storybook",
"outputs": ["{options.outputDir}"],
"options": {
"outputDir": "dist/storybook/storybook-host",
"configDir": "libs/storybook-host/.storybook",
"browserTarget": "storybook-host:build-storybook",
"compodoc": false,
"stylePreprocessorOptions": {
"includePaths": ["libs/root/styles/src/partials"]
},
"styles": [
"libs/root/styles/src/global.scss",
"libs/root/styles/src/overrides/browser.scss",
"libs/root/styles/src/overrides/primeng.scss",
"node_modules/primeflex/primeflex.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": ["node_modules/leader-line/leader-line.min.js"],
"assets": [
{
"input": "libs/root/assets/src/assets",
"glob": "**/*.!(ts)",
"output": "./src"
}
]
},
"configurations": {
"ci": {
"quiet": true
}
}
}
}
}
I see some issues online referring to angular.json's "es5BrowserSupport" and "extractCss" but those weren't helpful.