Storybook v6 with storybook-readme - storybook

So I have a app created with create react app with typescript. I have some components in a component folder and they have a file called .readme.md.
Now when I run storybook I se the readme part in the sidebar, but it says it can not find the readme file. If I in the storie file do a console.log on the Readme variable I import. I get the content from the readme.
My storybook/addons.js looks like this:
import 'storybook-readme/register';
Storybook dont allow me to have a config.js and a main.js. Now the storybook-readme documentations says I need to put the following code in config.js and it does not work to put in in main.js. Så where does this part go?
import { addReadme } from 'storybook-readme';
addDecorator(addReadme);

Related

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file , tsx file problem

I am adding my project to monorepo , my project is nextJS 12.1.4 and when i import the UI from Package folder after all steps from the docs of Monorepo i have this problem.
I already have .babelrc file and tsconfig and it is working fine , but when adding the webpack.config.js with ts-loader it fire this error

Using node_modules in Symfony 6

I want to use some node_modules in my Symfony 6 project. For example, Feather icons. But I can't figure out how to include these files without copying them to the public folder or using a CDN.
I have attempted to import the files into app.js using:
import './feather';
Sadly, this does not appear to work. Can anyone help me figure this out because I can also not find any relevant google search results.
EDIT
This is what my app.js currently looks like:
import './styles/app.css';
// start the Stimulus application
import './bootstrap';
import feather from 'feather-icons'; // <-- added line from comment

Single File component export - not using vuetify styling

I have a vuetify project (Windows / VSCODE).
Our plan is to create components for our internal teams to use - no NPM.
I created a hello-world.vue component and ran a script (below) from package.json to create a dist folder with that component. This works fairly well, but in another application demo.html or such the Vuetify Button v-btn does not have any of the styling from vuetify... The script creates the individual components based off the vue file.
script executed to generate components "buildSFC": "cross-env vue-cli-service build --target wc --name jcdc-sfc 'src/components/*.vue'"
What am I missing to get VUETIFY styling and such?
See GIT HUB for code: https://github.com/wlafrance/jcdc-sfc
If you pull the git down, in a vue command line execute this script: npm run buildSFC
Then look for a dist folder in the project and open the html file in chrome to see the issue.
So see what it is suppose to look like (the button) execute: nmp run serve
Your publicPath in vue.config.js probably defaults to / which is you root drive. So if you have it running on Windows and on your C: drive then your demo.html will look in C:\ for the files.
Add a publicPath: "./" to your vue config.
Also check your package-json scripts. buildLib has a ./src/ but buildSFC does not.

Webpack - Import Less from TypeScript fails (css-loader)

I'm trying to build a test project with TypeScript via Webpack. Have just index.ts file and base.less (or base.css) file imported in index.ts and it fails with errors on css-loader. Without imported LESS (CSS) file in a .ts file all working good.
I have got another big project with JS only (no TypeScript) and it working good with the same webpack.config file (babel instead of ts loader).
Webpack#2.2.0
All needed loaders are installed.
webpack.config.js and Bitbucket link to the test project
ERROR in ./~/css-loader/lib/css-base.js
Module build failed: Error: Final loader didn't return a Buffer or String
You have a wrong RegExp rule for TypeScript loader in your webpack.config.js. You need this:
`test: /(.ts|.tsx)$/`
but you have this:
`test: /(.ts|.tsx)?/`
Which says: load as TypeScript file no matter what.

How to add js and css files that are part of an npm dependency to <head> in Meteor 1.4?

For example, I want to use Slider Pro in my meteor project as an npm package without having to create an Atmosphere package out of it, however the docs (https://github.com/bqworks/slider-pro) say to include files in <head>. See Image Snippet of Docs. How would I do that?
There are a few ways you could do this. Either way you choose you still need to add it as an npm package through Meteor:
meteor npm install --save slider-pro
And then what I commonly do, is create a file inside imports/startup/client directory called vendor.js, and just use this code in the vendor.js file:
import '../../../node_modules/slider-pro/dist/js/jquery.sliderPro.js';
import '../../../node_modules/slider-pro/dist/css/slider-pro.css';
Then in the file located at imports/startup/index.js just add this to include that vendor.js file:
import './vendor.js';
You just need to make sure that the path is correct, in the vendor.js file, as you can see, since my vendor.js file is nested 3 directories deeper than the node_modules directory, all files have to be prepended with ../../../ which basically means "go back three directories"

Resources