After publishing HTML storybook to DSM, I see "Loading..." but the storybook does not load.
DSM preview displays the storybook but when published. it continues to display the Loading message
package.json
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -c .storybook -o .out",
"deploy-storybook": "storybook-to-ghpages",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"dependencies": {
"#invisionapp/dsm-storybook": "latest",
"npm": "^6.13.7"
},
"devDependencies": {
"#babel/core": "^7.8.0",
"#storybook/addon-a11y": "^5.3.9",
"#storybook/addon-actions": "^5.3.9",
"#storybook/addon-backgrounds": "^5.3.9",
"#storybook/addon-centered": "^5.3.9",
"#storybook/addon-docs": "^5.3.9",
"#storybook/addon-knobs": "^5.3.8",
"#storybook/addon-options": "^5.3.9",
"#storybook/addons": "^5.3.9",
"#storybook/html": "^5.3.2",
"#storybook/storybook-deployer": "^2.8.1",
"babel-loader": "^8.0.6",
"babel-runtime": "^6.26.0",
"eslint": "^6.8.0",
"jquery": "3.4.1"
},
NOTE: Downgrading storybook to 5.2.1 works. Would like to know the issue with 5.3.9
They don't support yet the 5.3 configuration file structure. Just delete you main.js file and go back to pre 5.3 config.js file.
Related
I have an app created with create-react-app. The app works fine when served using npm run start.
Now, when built using npm run build, some CSS seems missing. I also observe that build/static/css/main.38396655.css contains an #import to a third-party server. Namely for Esri's Calcite Components: #import url("https://js.arcgis.com/4.25/#arcgis/core/assets/esri/themes/light/main.css").
Furthermore, the Network tab in Chrome's dev tools does not show any request for that imported file. I also get no 404 or anything if I replace it by a non-existing URL.
Two questions regarding this:
Does this external import actually cause the missing CSS?
If so, how can I force the build script to include this CSS in the built package?
As requested, here also the package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#arcgis/core": "^4.25.5",
"#esri/calcite-components": "^1.0.5",
"#esri/calcite-components-react": "^0.35.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"proxy": "http://localhost:8080/",
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I could finally solve the problem on my own:
The CSS file was never really loaded, because nginx served it with a wrong mime type. So finally it was a problem with nginx, not CSS, that I solved as explained here.
Unfortunately, the dev tools neither in Chrome nor Edge said anything about the mime type problem. It was finally the Mozilla dev tools that gave me a clue.
It appears you're missing the " quotation markers around the URL itself inside the import. Look at Importing CSS Rules.
Try using this:
#import url("https://js.arcgis.com/4.25/#arcgis/core/assets/esri/themes/light/main.css")
I am trying to add bootstrap to my directory using npm.
This is my file structure:
I am using #import in my style.scss file
#import "../node_modules/bootstrap/scss/bootstrap";
And my package.json looks like this. It's basically starter kid from this site -
minimum-static-site-sass-setup
{
"name": "playground",
"version": "0.1.0",
"description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML",
"main": "public/index.html",
"author": "5t3ph",
"scripts": {
"build:sass": "sass --no-source-map src/sass:public/css",
"copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
"copy:html": "copyfiles -u 1 ./src/*.html public",
"copy": "npm-run-all --parallel copy:*",
"watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:html",
"watch:html": "onchange \"src/*.html\" -- npm run copy:html",
"watch:sass": "sass --no-source-map --watch src/sass/:public/css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server public --files public",
"start": "npm-run-all copy --parallel watch serve",
"build": "npm-run-all copy:html build:*",
"postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
},
"dependencies": {
"autoprefixer": "^10.4.2",
"bootstrap": "^5.1.3",
"browser-sync": "^2.27.7",
"copyfiles": "^2.4.1",
"cssnano": "^5.0.17",
"npm-run-all": "^4.1.5",
"onchange": "^7.1.0",
"postcss-cli": "^9.1.0",
"sass": "^1.49.8"
}
}
Every time I try to compile it, I get this error:
"Error: Can't find stylesheet to import.
╷
6 │ #import "../node_modules/bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\sass\style.scss 6:9 root stylesheet"
I tried many potential solutions from stackoverflow but none of them seems to work for me.
Any idea, what I'm doing wrong?
#import "../../node_modules/bootstrap/scss/bootstrap";
wrong path, that was the problem :)
Open the angualr.json and find the options object then add stylePreprocessorOptions(The Path is Projects-> Your Project Name-> architect-> build-> options). as follows:
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/",
"src/assets" // I place my *.csss here . You can add your path
]
},
}
You can try with:
#import "~node_modules/bootstrap/scss/bootstrap";
or
#import "~bootstrap/scss/bootstrap";
don't you need a .css or something like that in the end? Shouldn't an extension be there?
I installed storybook by using npx tsdx create
and selected react-with-storybook to make style component library.
while developing, I got 'This story is not configured to handle controls. ' error.
tsdx automatically installs all the essential addons include storybook controls.
So there's no reason to get this error.
After searching about this, I found this post.
Long story short, This error is about storybook dependency version.
They said, If I downgrade version under 6.0.9, it would works find.
So I tried, and this time I couldn't even start the project. (build failed or something).
This is my devDependencies from package.json
"devDependencies": {
"#babel/core": "^7.17.2",
"#size-limit/preset-small-lib": "^7.0.8",
"#storybook/addon-essentials": "^6.4.13",
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "^6.4.13",
"#storybook/addons": "^6.4.13",
"#storybook/react": "^6.4.13",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"husky": "^7.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"size-limit": "^7.0.8",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.5.5"
}
and What I changed were
"devDependencies": {
"#babel/core": "^7.17.2",
"#size-limit/preset-small-lib": "^7.0.8",
"#storybook/addon-essentials": "6.0.9", <<=
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "6.0.9", <<=
"#storybook/addons": "6.0.9", <<=
"#storybook/react": "6.0.9", <<=
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"husky": "^7.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"size-limit": "^7.0.8",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.5.5"
}
If you know any workaround, please share! Thanks!
In my case this error was caused from another story, which had a control that had incorrect options, here is the web component
export default {
title: 'Buttons/HTMLButton',
argTypes: {
sizeClass: {
control: { type: 'select' },
options: { '': '', Huge: 'huge-size' }
},
},
};
As soon as I fixed the options to { 'Default': '', Huge: 'huge-size' } it fixed this issue.
Even though this story was completely different, but it was causing controls to disappear in a different story, at the same time the controls are available and working in the Docs tab, but in the main Canvas you will see no controls and with error This story is not configured to handle controls..
To debug this issue, I had to move all stories to a different location, bring back stories one-by-one to see which is causing the problem.
Not too often but sometimes I have faced this funny behaviour of storybook, where an issue will lead to a completely different and misleading error.
I have a WP Site on my local dev environment. I usually use laravel-mix to convert and minify the various JS and SCSS files I have, but I want to move away from that since it's not laravel.
I tested all my configuration on a new WP site and everything seems to build properly with even the SCSS files being converted into CSS and minified.
I uninstalled laravel-mix and installed all the packages I needed to run a proper non-laravel-mix configuration.
Here is a jist of the packages in my package.json
"dependencies": {
"#popperjs/core": "^2.10.1",
"bootstrap": "^5.1.1",
"bootstrap-icons": "^1.5.0"
},
"devDependencies": {
"css-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.3.0",
"node-sass": "^6.0.1",
"postcss": "^8.3.6",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^6.7.0",
"sass": "^1.41.1",
"sass-loader": "^12.1.0",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
},
and my webpack.mix.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "production",
plugins: [
new MiniCssExtractPlugin({
filename: '[name].min.css'
})],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: "" }
},
"css-loader",
"sass-loader",
"postcss-loader"
]
},
],
},
output: {
filename: '[name].min.js'
},
devtool: 'source-map',
}
And I keep getting an issue with building it as it gives me an error of:
Module parse failed: Unexpected character '#' (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // #import 'node_modules/bootstrap/scss/bootstrap';
|
> #import 'scss/colors';
| #import 'scss/header';
| #import 'scss/front-page';
# ./src/index.js 3:0-22
As said up top, this is 1-to-1 with my other test site, and that runs smoothly. The only difference is that this site use to use laravel-mix while the other site only had webpack.
I've tried re-install every package; set every package as dependencies instead of devdependecies, and messed around with the webpack.mix.js itself to no avail.
It's been a few days, and I can't find any solutions. Any advice is appreciated.
The file should be called
webpack.config.js
and not
webpack.mix.js
Very amateur hour from me, but I'll answer this so that if someone has a similar issue, they can see my solution.
I just started a React App using the Facebook tutorial here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
I wanted to get this code snippet working in my react app:
https://codepen.io/saransh/pen/BKJun
I npm installed these modules: node-sass-chokidar,react-compass, compass-importer, sass-resources-loader
I put the CSS from the Code pen into a .sass file within my project like so:
Here is the first snippet of the SASS code in Starr.sass
#import compass
// n is number of stars required
#function multiple-box-shadow ($n)
$value: '#{random(2000)}px #{random(2000)}px #FFF'
#for $i from 2 through $n
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
#return unquote($value)
$shadows-small: multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big: multiple-box-shadow(100)
html
height: 100%
But this seems to be the wrong strategy because I get this error when I do "npm run watch-css":
"File to import not found or unreadable: compass"
I tried to find online resources for steps to take to get compass to import, and they all talk about different tools: Babel, Webpack, etc, but I am relatively new and do not know which steps to take next.
What are the concrete steps I have to take to go from npm create-react-app to being able to do #import in .SASS files to be used by app? Here is my current package.json file:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"compass": "^0.1.1",
"node-sass-chokidar": "0.0.3",
"react": "^16.2.0",
"react-compass": "^0.1.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"sass-resources-loader": "^1.3.2"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"compass-importer": "^0.4.1",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6"
}
I looked at some stackoverflow questions, but did not find what my next logical step would be. Here is one:
How to configure webpack to use compass in my project