I want to make a project that contains the Viro package, so that package needs the react-native version 0.65.1 so I tried to downgrade react-native from 0.68.2 to the supported version of the package 0.65.1 when testing the project on expo I get this message
Warning: Invalid version react-native#0.65.1 for expo sdkVersion 45.0.0. Use react-native#0.68.2
Android Bundling failed 1677ms
Unable to resolve module buffer from C:\Users\MrObscure\Desktop\react\Partner\node_modules\safe-buffer\index.js: buffer could not be found within the project or in these directories:
node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
1 | /* eslint-disable node/no-deprecated-api */
> 2 | var buffer = require('buffer')
| ^
3 | var Buffer = buffer.Buffer
4 |
5 | // alternative to using Object.keys for old browsers
and the packages that is used in this project are
import React,{ useRef, useState, useEffect } from "react";
import {I18nManager, ImageBackground,Animated, StyleSheet,TouchableOpacity,Image,Text,TextInput, Alert,ActivityIndicator,ToastAndroid, View } from "react-native";
import AnimatedTypeWriter from 'react-native-animated-typewriter'
import AppLoading from "expo-app-loading";
import { useFonts } from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { faArrowRightArrowLeft } from "#fortawesome/free-solid-svg-icons";
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Button,Card,Avatar,ListItem,Icon } from '#rneui/themed';
import { color } from "#rneui/base";
What was the command you ran to downgrade? npm install react-native#0.65.1 would install the specific version you are looking for. Check the pagacke.json file, what version does it say you have? Did you run an npm i after?
What is the expo version? You could manually in the package.json and run expo install.
Related
I've taken this post as example for my question :https://johns.codes/blog/building-typescript-node-apps-with-nix
I try to make development environment with a npm package that has not a nix equivalent.
I think that I'm very near from the end but I probably miss something important and it doesn't work.
in the folder node-gyp-build:
npm init -y
npm install node-gyp-build
mkdir nix
rm -fr node_module
node2nix -16 --development --input package.json --lock package-lock.json --node-env ./nix/node-env.nix --composition ./nix/default.nix --output ./nix/node-package.nix
nix-build nix/default.nix
Now my question is how to use the inout in in a flake.nix in order to have developement environment with this package
I've tried with that flake.nix
{
inputs = {
nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
flake-utils.url = "github:numtide/flake-utils";
};
outputs = { self, nixpkgs, flake-utils, ... }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = import nixpkgs { inherit system; };
npm_pack = import (./nix/default.nix);
in with pkgs;{
devShell = mkShell { buildInputs = [ npm_pack];};
]; };
});
}
and this command:
nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --ignore-environment
error: Dependency is not of a valid type: element 1 of buildInputs for nix-shell
The npm_pack var in your example has the following attributes (many omitted)
package - The nix output of the package you are building (which can be added as a buildInput in your dev shell if its some executable)
shell - a devShell which gives you the npm deps to run the package you are trying to build, this would be equilvant to you cloning the package and runing npm install
so if you just want to use the package for another project your flake would look like
outputs = { self, nixpkgs, flake-utils, ... }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = import nixpkgs { inherit system; };
npm_pack = import ./nix { inherit pkgs system;};
in with pkgs;{
devShell = mkShell { buildInputs = [ npm_pack.package ];};
});
If you want to just make it so you auto have npm deps "installed" you can use the shell, so the flake would look like
outputs = { self, nixpkgs, flake-utils, ... }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = import nixpkgs { inherit system; };
npm_pack = import ./nix { inherit pkgs system;};
in with pkgs;{
devShell = npm_pack.shell
});
I am using yarn workspaces and have a project (proj1) which uses a library I wrote (proj2), which had been initialised with create-react-library when I started it. My library uses visx in some of the components. Everything was fine until I added the last line in my index.js file, exporting another component that is build with visx:
export { ConfigField } from './ConfigField';
export { ConfigPage } from './ConfigPage';
export { SaveButton } from './SaveButton';
export { PageLoadingIndicator } from './PageLoadingIndicator';
export { UsersPage } from './UsersPage';
export { AnalyticValue } from './AnalyticValue';
export { DonutChart } from './DonutChart';
export { SingleValueDonutChart } from './SingleValueDonutChart';
export { Alert } from './Alert';
export { FormDialog } from './FormDialog';
export { TimeSeriesChart } from './TimeSeriesChart';
Somehow, after the addition of this export, when building proj2 a circular dependency is created. I suspect this is to do with compiling to have CJS imports.
PS C:\usr\git\proj2> yarn
yarn install v1.22.5
warning package.json: No license field
[1/4] Resolving packages...
success Already up-to-date.
$ run-s build
yarn run v1.22.5
warning package.json: No license field
$ microbundle-crl --no-compress --format modern,cjs
Circular dependency: ..\node_modules\#visx\axis\esm\index.js -> ..\node_modules\#visx\axis\esm\axis\Axis.js -> ..\node_modules\#visx\axis\esm\axis\AxisRenderer.js -> ..\node_modules\#visx\axis\esm\index.js
Non-existent export 'TextProps' is imported from ..\node_modules\#visx\text\esm\types.js
Error: 'TextProps' is not exported by ..\node_modules\#visx\text\esm\types.js, imported by ..\node_modules\#visx\text\esm\Text.js
at C:\usr\git\proj1\node_modules\#visx\text\esm\Text.js:8:9
6: import useText from './hooks/useText';
7: import { TextProps } from './types';
8: export { TextProps } from './types';
^
9: var SVG_STYLE = {
10: overflow: 'visible'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
How can I fix this circular dependency? Is there a plugin I should be using?
Solved. The problem was actually pretty basic. I realised I was importing from #visx/axis without having it explicitly in my package.json. 🤦 After adding explicitly, it works.
My project creation process (this is a create-react-app typescript version template:
25 npx create-react-app test --template typescript
26 cd test
27 ls
28 npm install --save-dev react-test-renderer
29 npm test
30 npm test
31 node --version
32 npx create-react-app --version
33 npm install antd -g
34 npm test
My Jest version in package-lock.json
"#jest/core": {
"version": "24.9.0",
My node.js version is
v12.19.0
create-react-app version is
npx create-react-app --version
3.4.1
antd version is
antd#4.6.6
file: App.test.tsx testing file
import React from 'react';
import { render } from '#testing-library/react';
import App from './App';
import renderer from 'react-test-renderer';
import MyButton from './components/button';
it('renders a snapshot', () => {
const tree = renderer.create(<App/>).toJSON();
expect(tree).toMatchSnapshot();
});
it('MyButton', () => {
const tree = renderer.create(<MyButton/>).toJSON();
expect(tree).toMatchSnapshot();
});
My antd source file
import React from 'react'
import { Button } from 'antd';
const MyButton = () => {
const [value, setValue] = React.useState('')
// The event type is a "ChangeEvent"
// We pass in "HTMLInputElement" to the input
function onChange(e: React.ChangeEvent<HTMLInputElement>) {
setValue(e.target.value)
}
return <Button></Button>
}
export default MyButton;
When I ran npm test, I got this
FAIL src/App.test.tsx
● Test suite failed to run
Cannot find module 'react' from 'index.js'
However, Jest was able to find:
'components/button.tsx'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (../../../node_modules/antd/lib/affix/index.js:26:37)
I need to use vuetify in my nuxt js project as plugin. I've tried package #nuxtjs/vuetify but get error
Cannot assign to read only property 'base' of object '#'
I've install my nuxt project from official codesandbox online playground in local server and on shared hosting. All the time I got the same error. I tried install node modules using npm and yarn. How I can add fresh vuetify version to last version of nuxt js as plugin with npm package vuetify?
Install vuetify and #mdi/font
Create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from './../config/colors'
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
export default ctx => {
const vuetify = new Vuetify({
theme: {
themes: {
light: {
...colors
},
dark: {
// colors
}
}
}
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
Edit nuxt.config.js file by adding vuetify to plugins like this
{
...
plugins: ['~plugins/vuetify.js'],
...
}
I achieved this with the following:
npm install --save vuetify
create a file vuetify.js in your plugins folder with the following code:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Amend your nuxt.config.js:
plugins: ['~plugins/vuetify.js'],
build: {
vendor: ['vuetify']
}
There is a discussion of this issue here: https://github.com/nuxt-community/vuetify-module/issues/268
Fixing custom colours and specifying options in external files seem to affect this.
If you have colours specified in the options, replace primary: colors.blue with primary: colors.blue.base.
I have / had same issue. I simply made sure to use version 1.10.3 or below defined explicitly in package.json
"#nuxtjs/vuetify": "1.10.3", (not with the ^1.10.3)
I also noticed any version over this also adds an "undefined" 404 to the end of every url request. I posted on Nuxt / CMTY but they have a user base of zero people who answer any questions.
Choose Vuetify as ur UI Framework when initial a Nuxt project
Create a new file in plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
theme: {
light: true,
themes: {
light: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
})
Add the plugin config inside nuxt.config.js
export default {
plugins: ['~/plugins/vuetify.js'],
}
Restart server, npm run dev
An image example:
vuetify.js
Done!
you can do the following steps in order and finally use Vuetify components:
1- Setup vuetify
yarn add vuetify#next sass
2- Your package.json should now look similar to the following:
// package.json
"devDependencies": {
"nuxt": "3.0.0-rc.1"
},
"dependencies": {
"sass": "^1.51.0",
"vuetify": "^3.0.0-beta.1"
}
3- Creating your Vuetify plugin
You must create this file in the plugin folder and put these codes inside it.
// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
4- Configure Nuxt 2 or 3 to use our new plugin
In this section, you should put these codes in the nuxt.config.ts file like this
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})
5- Finally, in order to test that you have done the steps correctly, you can use this component in your code to see if Vuetify is installed correctly or not.
<v-btn>Button</v-btn>
Tip: If you have done these steps or you want to use a new component, in many cases it is better to stop and restart your project once.
I am developing an angular4 app with bootstrap.
I just moved to angular5 and I wonder if is not the case to use material design for components instead of prime-ng ng-bootrap kendo-ui etc...
Thanks
In console:
ng new pjt
cd pjt
npm install #angular/material #angular/cdk --save
npm install #angular/animations --save
Create app/modules/material.module.ts file and include:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MatButtonModule } from '#angular/material';
#NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule],
})
export class MaterialModule { }
Note each element Mat...Module you want to use needs to be added in the above file comma separated to the import, imports and exports lines.
update app/app.modules.ts to include
import { BrowserAnimationsModule} from '#angular/platform-browser/animations';
import { MaterialModule } from './modules/material.module';
...
imports: [
...
BrowserAnimationsModule,
MaterialModule
],
update styles.scss to include
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
In console
npm install hammerjs --save
update main.ts to include
import 'hammerjs';
update index.html to include
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
In console
ng serve
Then you can start including in your components the material elements, e.g. <button mat-button>Some Btn<button>
... check out material.angular.io for elements ...
then check out https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App for more details.