I am trying to run cypress test cases headless using cmd command
npx cypress run
But it gives me below error -
Do I need to install any dependency for this to load.
Even css files are not getting loaded.
Note : I haven't installed webpack or any other dependency. Only cypress is installed additionally.
Yes, you will need to extend the webpack configuration used by cypress to handle the files you would like to load. You can find an example here
Below I've modified the example to work with cypress 10.
// cypress.config.ts
import { defineConfig } from 'cypress';
import findWebpack from 'find-webpack';
import webpackPreprocessor from '#cypress/webpack-preprocessor';
const webpackOptions = findWebpack.getWebpackOptions();
const options = {
webpackOptions,
watchOptions: {},
};
export default defineConfig({
e2e: {
setupNodeEvents(on) {
// implement node event listeners here
// on('file:preprocessor', webpack(options));
// use a module that carefully removes only plugins
// that we found to be breaking the bundling
// https://github.com/bahmutov/find-webpack
const cleanOptions = {
reactScripts: true,
};
findWebpack.cleanForCypress(cleanOptions, webpackOptions);
on('file:preprocessor', webpackPreprocessor(options));
},
specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
},
});
I have created an app in react.js with Vitejs, I have included a 3D model with Theejs (.glb file). When I use npm run dev my 3D model works perfectly without errors, but when I run npm run build the 3D model is not included in the dist/assets folder, only js, css and images files are included. How can I fix it? I feel that there is something wrong with the vite configuration as the paths are well placed.
This is my vite.config.js file
export default defineConfig({
plugins: [react()],
root: './',
build: {
chunkSizeWarningLimit: 3000,
outDir: 'dist',
},
publicDir: 'assets' ,
})```
and this is how I am loading my model in the component
const { nodes } = useGLTF("public/portal.glb")
You can use explicit url import.
import modelSrc form 'model/yourmodel.glb?url';
then
const { nodes } = useGLTF(modelSrc);
The model file will be assigned in [outDir]/assets after build.
I am trying to set up Storybook in a project. My project is runing on react#^16, and I'm using typescript, with a custom babel and webpack setup for development and build. To set up storybook, I did
npx sb init
This installs everything needed. It puts a .storybook folder in the root folder, and a stories folder in my src folder with some prefab components and stories in tsx format (which is what I want):
The .storybook/main.js file seems fine:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
And the average .stories.js file automatically installed by npx sb init also seems fine:
import React from 'react';
// also exported from '#storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '#storybook/react/types-6-0';
import { Header, HeaderProps } from './Header';
export default {
title: 'Example/Header',
component: Header,
} as Meta;
const Template: Story<HeaderProps> = (args) => <Header {...args} />;
export const LoggedIn = Template.bind({});
LoggedIn.args = {
user: {},
};
export const LoggedOut = Template.bind({});
LoggedOut.args = {};
But when I run npm run storybook, the storybook landing page has no stories. Even though it had installed some default stories to start playing with. It says:
Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.
As requested, here is a link to the repo so you can dig a bit deeper into the structure, weback config, etc. Note I have not committed the npx sb init changes yet, so you won't see the files there, only my starting point just before running the sb init.
I haven't had any issues getting npx sb init to work with a standard create-react-app, but with my custom webpack build and typescript, its just empty. What's going wrong?
Edit: Additional detail
I realize that just running npx sb init, then npm run storybook throws this error:
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'
Based on this thread, installing core-js#3 solves the problem and storybook runs, though with no stories.
It seems like the babel plugin transform-es2015-modules-amd doesn't fit right with storybook since sb still uses your babel configuration.
You might need to remove it then it would work:
{
"plugins": [
// "transform-es2015-modules-amd", // Remove this plugin
]
}
If you want to have a special babel configuration for storybook, place it .storybook/.babelrc so the configuration would be simple like this:
.storybook/.babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react", "#babel/preset-typescript"]
}
NOTE: You might miss to forget install #babel/preset-typescript to help you transform your typescript code.
Maybe you have problems with the stories path, try to save only "../src/**/*.stories.js" in your config to see if its the reason
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
]
In case of dealing with arcgis-js-api in sb, you have to declare #arcgis/webpack-plugin in storybook's webpack configuration by adding to its config.
Here are a few steps you have to do:
Add webpackFinal property in .storybook/main.js with following content:
const ArcGISPlugin = require('#arcgis/webpack-plugin');
module.exports = {
// ...
webpackFinal: (config) => {
// Add your plugin
config.plugins.push(
new ArcGISPlugin(),
);
// Since this package has used some node's API so you might have to stop using it as client side
config.node = {
...config.node,
process: false,
fs: "empty"
};
return config;
}
};
One more thing to be aware of, some components are importing scss files, so you might need to support it by adding a scss addon '#storybook/preset-scss'
// Install
npm i -D #storybook/preset-scss css-loader sass-loader style-loader
// Add to your current addons
{
addons: ['#storybook/addon-links', '#storybook/addon-essentials', '#storybook/preset-scss'],
}
Like a tmhao2005 say. Storybook still uses your babel configuration. And this is the intended behavior. This thread at github also describes how the fix similar issue.
Updated your config .storybook/main.js.
If you use .babelrc:
babel: async options => ({ ...options, babelrc: false })
Or .babel.config.js:
babel: async options => ({ ...options, configFile: false })
I want to set fontFamily to roboto thin of my toolbar title.
I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running
react-native start
ERROR EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener
ated\source\r\debug\android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app
\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera
ted\source\r\debug\android\support\v7\appcompat'
at Error (native)
When I am removing the font then it is working fine.
I am unable to fix this issue. What's the reason?
UPDATE
Many answers are here for adding custom font in react-native for version < 0.60.
For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.
Now, in order to add custom font in react-native version > 0.60 you will have to :
1- Create a file named react-native.config.js in the root folder of your project.
2- add this in that new file
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts']
};
For those running on react-native version < 0.69.x
3- run react-native link command in the root project path.
PS Make sure you have the right path for the fonts folder before running react-native link command
For those running on react-native version >= 0.69.x, Since link is deprecated so react-native link will not work anymore,
the command react-native link is replaced by npx react-native-asset.
More info about the release can be seen here: https://github.com/react-native-community/cli/releases/tag/v8.0.0
Add your fonts file in
Project folder/android/app/src/main/assets/fonts/font_name.ttf
Restart the package manager using react-native run-android
Then you can use your font in your style e.g
fontFamily: 'font_name'
Put all your fonts in you React-Native project directory
./assets/fonts/
Add the following line in your package.json
"rnpm": {
"assets": ["./assets/fonts"]
}
finally run in the terminal from your project directory
$ react-native link
to use it declare this way in your styles
fontFamily: 'your-font-name without extension'
If your font is Raleway-Bold.ttf then,
fontFamily: 'Raleway-Bold'
Update:
From the cli docs, "rnpm" is deprecated and support for it will be removed in next major version of the CLI.
Instead, create a react-native.config.js in your project folder
module.exports = {
assets: ['./assets/fonts'],
};
Put your fonts in ./assets/fonts. Reference your fonts (e.g. McLaren-Regular.ttf) in the styles prop, {fontFamily: 'McLaren-Regular'}. If you're using styled components, then font-family: McLaren-Regular
No linking or legacy build settings needed for either platforms. If that didn't work (sometimes it doesn't for me), run npx react-native link, even if you're using autolinking.
If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.
Steps:
Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)
From the target component (for example: App.js) load Expo's Font module:
import { Font } from 'expo'
Load the custom font using componentDidMount:
componentDidMount() {
Font.loadAsync({
'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
})
}
Finally, use the style attribute to apply the desired font on a <Text> component:
<Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
STEP 1:
Create a config file at the root of the project named "react-native.config.js"
STEP 2:
Add the following code inside.
module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}
STEP 3:
Run the following command:
npx react-native link (React-native version < 0.69)
npx react-native-asset (React-native version > 0.69)
Adding Custom Font with EXPO
If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.
Steps
Move your font to asset/fonts folder
From the target component (for example: App.js) load Expo's Font module:
import { Font } from 'expo'
Set a state
this.state = {
fontLoaded: false
}
Load the custom font using componentDidMount:
async componentDidMount() {
await Font.loadAsync({
'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
})
this.setState({fontLoaded: true})
}
Finally, use the style attribute to apply the desired font on a component:
{
this.state.fontLoaded
? <Text style={{
fontSize: 48,
fontFamily: 'ComicSansBold'
}}>Glad to Meet You!</Text>
: null
}
Enjoy Coding....
My Output:
RNPM has been merged into React Native core. This means that you don’t need RNPM anymore. So please they don’t want you to use it. Stop using it.
Here are 7 steps broken down to help you set fonts up:
Have your fonts ready, you can download your fonts from GoogleFonts, AdobeFonts, etc. Fonts can be in .ttf, or .otf
Create a configuration file in the root of your project for fonts. Create a file called:
react-native.config.js
Create the folder to house your fonts. You can create a folder called fonts inside the assets folder.
Paste your .ttf or .otf fonts inside of it.
Write a configuration inside of react-native.config.js file, and paste the following:
module.exports = {
assets: ['./src/assets/fonts'],
};
Change the path to the path of the folder housing your fonts.
Now natively set the fonts for Android and IOS. You don’t need to manually do that, just run on your terminal:
react-native link
Any new fonts you add, make sure you run react-native link again on your terminal to natively set the fonts.
#nitin-anand's answer was the most appropriate and cleaner than the rest, but that method is now deprecated and now we will have to create a react-native.config.js file in our root with the following configuration as an example:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts'],
};
Set in Project.json:
rnpm {
assets:assets/fonts
}
react-native link
For ios:
Add your fonts in given folder structure :
/assets/fonts
and place your fonts in it .
In the root folder . Add a file named
react-native.config.js
copy the code and paste
module.exports = {
assets: [‘./assets/fonts’]
}
you can easily add Google & custom fonts to react native projects via Expo-font.
1-Using google fonts in react native:
import expo-fonts:
import { useFonts, Inter_900Black } from '#expo-google-fonts/inter';
// install pakages related to your favourite font for example:#expo-google-fonts/roboto & etc.
then use this hook at the top of your component hierarchy:
let [fontsLoaded] = useFonts({
Inter_900Black,
});
//fontLoaded indicates the loading state of your font
using font:
<Text style={{ fontFamily: 'Inter_900Black'}}>Inter Black</Text>
2-Using custom fonts in react native:
import expo-fonts:
import { useFonts } from 'expo-font';
use this hook at the top of your component hierarchy:
let [fontsLoaded] = useFonts({
'Custom-Font': require('./assets/fonts/Custom-Font.otf'),
});
using font:
<Text style={{ fontFamily: 'Custom-Font'}}>Inter Black</Text>
Add in project.json file
rnpm {
assets:assets/fonts
}
Then perform react-native link
The best way to do it would be to create your own custom component for Text and import it from another file.
Assuming you want to change the default font to "opensans-semibold" (that is the name I gave it after downloading it and saving it).
TYPESCRIPT:
import React from 'react';
import { Text as DefaultText, StyleSheet } from 'react-native';
export function Text(props : any) {
return(
<DefaultText style={[styles.defaultStyles, props.style]}> {props.children} </DefaultText>
)
}
const styles = StyleSheet.create({
defaultStyles: {
fontFamily: "opensans-semibold"
}
});
Now import this anywhere else as:
import { Text } from './path/to/component'
and use it as you normally would.
The correct way
import React from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
export default props => {
let [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text>
<Text style={{ fontSize: 40 }}>Platform Default</Text>
</View>
);
};
For react-native version above 0.60, create a react-native.config.js file in the root of the directory and add the below code,
module.exports = {
assets: ['./assets/fonts'],
};
And you should also have the assets folder in root of the directory. Then just run the command npx react-native-asset in your terminal. This is should just work fine.
becareful if assets in src folder
in react-native.config.js file
module.exports = {
project: {
ios:{},
android:{}
},
assets: ['./src/assets/fonts']// assets in src folder
// assets: ['./assets/fonts']// if assets in root use this
}
For Android :
put your custom fonts in the following folder:
Project folder/android/app/src/main/assets/fonts/font_name.ttf
Run react-native run-android
Use the font i your code:
title: { fontSize: 20, fontFamily: " font Name" },