We Keep Coding

Error: Failed to initialize react-native-reanimated library

I was working on a project on react native trying to create drawer navigation
I installed a navigation drawer, gesture handler, and reanimated libraries
and when I run I got an error
1st error :
ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:
2nd error
error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
here is my package.json
{
"name": "Train",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
my index.js
import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error
};
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';
const stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function MystackNav(){
return(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}

Mine is working the only diff is:
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json
{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}

1.Update babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
2.run expo start -c
references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

How to use material-ui theme along with redux in gatsby

I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...

React Router "Content Security Policy directive" error

Trying to learn React Router, get blocker when try to route the login page.
I guess it might be:
Problem in Webpack config
Skipped some meta tag
Need to change domain in Windows Host file
Dependencies problem in package.json
General info: All actions are performed locally. No server or custom domain. Just classic localhost:3000.
Steps to reproduce:
Adding manually /login to http://localhost:3000
Error:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Screen:
login page error
For more visibility here is the github repository - Project link
Webpack.config.js:
var webpack = require('webpack');
var path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
watch: true,
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: { limit: 40000}
},
'image-webpack-loader'
]
}]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
historyApiFallback: true,
files: ['./dist/*.html'],
server: { baseDir: ['dist'] }
})
]
};
App.js
import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Home from './components/Home/Home';
import Login from './components/Login/Login';
export default () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login}/>
</Switch>
</BrowserRouter>
);
Login.js:
import React, {Component} from 'react';
import './Login.scss'
class Login extends React.Component {
render() {
return(
<div className="container2">
<h1>Login Page</h1>
</div>
)
}
}
export default Login;
package.json:
{
"name": "upstar_music",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --progress --colors",
"start": "webpack && npm run dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"faker": "^3.1.0",
"lodash": "^4.17.2",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-input-range": "^0.9.2",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-dom": "^4.2.2",
"redux": "^3.6.0",
"redux-form": "^6.3.2",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"axios": "^0.18.0",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.1.4",
"babel-preset-react": "^6.16.0",
"browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^3.0.2",
"image-webpack-loader": "^4.3.1",
"node-fetch": "^2.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.13.1",
"url-loader": "^1.0.1",
"webpack": "2.2.0-rc.0",
"webpack-dev-server": "^2.11.2"
}
}
Index.js:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../style/style.scss';
ReactDOM.render(<App />, document.getElementById('root'));

Content Security Policy (CSP) is giving the violation simply because the CSP does not allow unsafe-inline in the Script src. For React, simply adding the hash (SHA) might not work as React simply load the script (DOM) once, when you navigate to other pages, React simply throws you "Sha-...". Another method you might look into is nonce by providing dynamic nonce. You might be able achieve from what these guys had mentioned https://stackoverflow.com/a/49890126/2875928

I was also facing the same problem, if you are using webpack simply add a new key to modules.exports named devServer as
devServer:{ historyApiFallback: true }
sharing my webpack config with devServer for reference
my working webpack configuration
for the production, if you are using nginx you can do the configuration to server same html for all requests with path being handled by react on client side.

import undefined when bundling ui library with rollup using yarn workspaces

For a new project, I started using rollup to bundle a UI library and consume that library in a react application. I'm also using yarn workspaces for the internal dependency management between the UI library and the web app.
When I try to use the UI library in my web app, the import returns undefined and throws the "cannot get from undefined" error.
TypeError: Cannot read property 'NavBar' of undefined
[0] at App (C:/Users/user/dev/project/packages/project-web/src/pages/App.jsx:9:6)
The webapp code:
import React from 'react';
import {NavBar} from 'project-ui';
const App = () => (
<div>
<NavBar/>
<div>App component!x</div>
</div>
);
root package.json:
{
"name": "project",
"version": "1.0.0",
"private": true,
"workspaces": [
"packages/*"
]
}
UI package.json:
{
"name": "project-ui",
"version": "1.0.0",
"main": "dist/project-ui.cjs.js",
"jsnext:main": "dist/project-ui.es.js",
"module": "dist/project-ui.es.js",
"files": ["dist"],
"scripts": {
"build": "rollup -c"
},
"peerDependencies": {
"react": "16.3.2",
"react-dom": "16.3.2"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-plugin-external-helpers": "6.22.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"rollup": "0.60.0",
"rollup-plugin-babel": "3.0.4",
"rollup-plugin-commonjs": "9.1.3",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-replace": "2.0.0",
"rollup-plugin-uglify": "4.0.0"
}
}
web app package.json:
{
"name": "project-web",
"version": "1.0.0",
"scripts": {
"build": "webpack --colors --display-error-details --config=webpack/webpack.dev.js",
"dev": "concurrently --kill-others \"npm run dev:start\"",
"dev:start": "node ./server/index.js"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"express": "^4.16.3",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"project-ui": "1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.1",
"eslint": "^4.19.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-react": "^7.7.0",
"piping": "^1.0.0-rc.4",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.3",
"webpack-hot-middleware": "^2.22.1",
"webpack-node-externals": "^1.7.2"
}
}
rollup config:
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';
import pkg from './package.json'
const FORMATS = {
UMD: 'umd',
ES: 'es',
CJS: 'cjs'
};
const allowedFormats = [FORMATS.UMD, FORMATS.ES, FORMATS.CJS];
const bundle = (fileFormat, {format, minify}) => {
if (!allowedFormats.includes(format)) {
throw new Error(`Invalid format given: ${format}`);
}
const shouldMinify = minify && format === FORMATS.UMD;
const externals = format === FORMATS.UMD
? Object.keys(pkg.peerDependencies || {})
: [
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {})
];
return {
input: 'src/index.js',
output: {
file: fileFormat.replace('{format}', shouldMinify ? `${format}.min` : format),
format,
name: 'project-ui',
exports: 'named',
globals: {
react: 'React',
'prop-types': 'PropTypes'
}
},
external: externals,
plugins: [
resolve({ jsnext: true, main: true }),
commonjs({ include: 'node_modules/**' }),
babel({
exclude: 'node_modules/**',
}),
format === FORMATS.UMD
? replace({'process.env.NODE_ENV': JSON.stringify(shouldMinify ? 'production' : 'development')})
: null,
shouldMinify ? uglify() : null
].filter(Boolean)
};
};
export default [
bundle('dist/project-ui.{format}.js', {format: FORMATS.UMD, minify: true}),
bundle('dist/project-ui.{format}.js', {format: FORMATS.CJS}),
bundle('dist/project-ui.{format}.js', {format: FORMATS.ES})
];
the actual generated code from rollup:
import React from 'react';
var NavBar = function NavBar() {
return React.createElement(
'header',
null,
'nav bar'
);
};
module.exports = exports['default'];
export { NavBar };
The original navbar:
import React from 'react';
const NavBar = () => (
<header>
nav bar
</header>
);
export default NavBar;
index.js:
export { default as NavBar} from './NavBar/NavBar';
.babelrc:
{
"presets": [
["env", {
"loose": true,
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}],
"react",
"stage-2"
],
"plugins": [
"transform-runtime",
"add-module-exports",
"external-helpers"
]
}
The generated rollup code looks to be ok, so I'm thinking this is a yarn issue, but I'm not sure. Any help would be appreciated!
Regards
Cornel

The problem must be in the way you are transpilling the code with babel/rollup. I have a live example in how your code should look in an online babel:
The generated code for me is:
import React from 'react';
const NavBar = () => React.createElement(
'header',
null,
'nav bar'
);
export default NavBar; // first define default and then we assign export['default']
module.exports = exports['default'];
Observe that in this code we first assign export default to the desired value and then we assign export['defaults'] (when I debug your example I get that export['default'] is undefined, hence you get the error Cannot read property 'NavBar' of undefined [0], since you are passing undefined to exports.
This is done by the plugin 'add-module-exports', that is kind of necessary if you really need module.exports (that shouldnt be needed unless NodeJS or some RequireJS is present).
In order to make it work, just remove "add-module-exports" from your plugins in the project-ui .babelrc.

Using Grunt with VueJS

I've been trying to setup VueJS2 with Grunt & Browserify only to keep hitting the same error of the template or render function not being defined: [Vue warn]: Failed to mount component: template or render function not defined.
Here's the code:
Index.js:
import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'
Vue.use(Router)
Vue.use(Resource)
// route config
let routes = [
{
path: '/',
name: 'home',
component: indexComponent
},
{ path: '*', redirect: '/' }
]
// Set up a new router
let router = new Router({
routes: routes
})
// Start up our app
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
gruntfile.js:
browserify: {
js: {
files: {
'src/assets/js/app.js': 'src/js/index.js'
},
options: {
debug: true,
bundleDelay: 1000,
transform: [ ["vueify"], ["babelify"] ]
}
}
},
Package.json:
{
"name": "testing",
"version": "0.1.0",
"description": "test",
"main": "src/index.js",
"license": "ISC",
"scripts": {
"test": "grunt test"
},
"browserify": {
"transform": [
"babelify",
"vueify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^6.0.0",
"browserify": "^14.3.0",
"grunt": "^0.4.5",
"grunt-browserify": "^5.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.2.1",
"partialify": "^3.1.5",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.5.3",
"vueify": "^9.4.1"
}
}
Any help would be appreciated.

If you import Vue from 'vue'; you'll get the runtime only build that cannot compile templates, you need the standalone build.

this error arrives when in the system cannot find the template(HTML section of SPA) of .vue file,
in this case it may be App.vue or template.vue.
The file must be in the format of:
`<template>
</template>
<script>
export default{}
</script>
<style>
</style>`