Error at node_modules/#types/react-dom/.... Subsequent variable declarations must have the same type. Variable 'a' - reactjs

I have installed #types/react-dom along with typescript and #types/react and #types/meteor but when I try to run the typechecker from command line I get the below error
You can reproduce the error and see all my configuration here: https://github.com/Falieson/react15-meteor1.5
Thanks for your help!
$ meteor npm run type:client
> react-meteor-example#0.1.0 type:client /Users/sjcfmett/Private/ReactMeteorExample
> tslint -p ./tsconfig.json --type-check './client/**/*.{ts,tsx}'
Error at node_modules/#types/react-dom/node_modules/#types/react/index.d.ts:3422:13: Subsequent variable declarations must have the same type. Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
Error at node_modules/#types/react-dom/node_modules/#types/react/index.d.ts:3423:13: Subsequent variable declarations must have the same type. Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
Error at node_modules/#types/react-dom/node_modules/#types/react/index.d.ts:3424:13: Subsequent variable declarations must have the same type. Variable 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
Error at node_modules/#types/react-dom/node_modules/#types/react/index.d.ts:3425:13: Subsequent variable declarations must have the same type. Variable 'area' must be of type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.
... (shortened)
package.json (for reference)
{
"name": "react-meteor-example",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "meteor run",
"lint:client": "tslint --fix -c ./tslint.json -p ./tsconfig.json './client/**/*.{ts,tsx}'",
"lint:imports": "tslint --fix -c ./tslint.json -p ./tsconfig.json './imports/**/*.{ts,tsx}'",
"lint:server": "tslint --fix -c ./tslint.json -p ./tsconfig.json './server/**/*.ts'",
"lint": "npm run lint:client && npm run lint:server && npm run lint:imports",
"type:imports": "tslint -p ./tsconfig.json --type-check './imports/**/*.{ts,tsx}'",
"type:client": "tslint -p ./tsconfig.json --type-check './client/**/*.{ts,tsx}'",
"type:server": "tslint -p ./tsconfig.json --type-check './server/**/*.ts'",
"type": "npm run type:client && npm run type:server && npm run type:imports",
"precommit": "npm run lint && npm run type"
},
"dependencies": {
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.2.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"#types/meteor": "^1.4.2",
"#types/react": "^15.6.0",
"#types/react-dom": "^15.5.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"husky": "^0.14.3",
"tslint": "^5.5.0",
"tslint-react": "^3.1.0",
"typescript": "^2.4.2"
}
}

The types for React 16 beta have been published as the 'latest' React types.
The new version removes the definitions for the parts of React that have been removed in React 16 (like React.DOM), which is expected.
Unfortunately, the publishing of these types for the React 16 beta were done to the #latest (default) tag in npm instead of #next (as React did).
I have an open issue (#18708) with DefinitelyTyped here: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18708
You can try specifically targeting a particular release (npm install --save #types/react#15.6.0) but the dependencies in #types/react-dom for #types/react is set to "*", which seems to cause #types/react#latest to still be downloaded, causing you to have multiple versions in various places of your node_modules directory.
We are having to do some manual work to sort this out. Hopefully the folks maintaining #types/react will fix this soon.

I am using yarn, and fixed this by running rm -rf node_modules && rm yarn.lock && yarn install

Related

React-native-rn tailwind doesn't generate tailwind.json

I followed all the steps of installing react-native-rn.
Everything worked fine at first, but when I moved input.cssto src/css/input.css,it just generates src/css/tailwind.css, but not the src/css/tailwind.json file
I did modify the lines at package.json so they look like this.
"build:tailwind": "tailwindcss --input ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer && tailwind-rn",
"dev:tailwind": "concurrently \"tailwindcss -i ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
This is basically how my directory looks (I hided folders as node_modules, android, etc)
At the end of either command in package.json you'll see they both have tailwind-rn, basically what the command does is: take this file (tailwind.css) and compile it to (tailwind.json)
So, because you changed the path, default values (react-native-rn --input tailwind.css --output tailwind.json) don't work.
Manually add at the end of the commands react-native-rn --input path/to/the/generated/css.css --output path/to/where/you/want/your/json.json
In this example, it this would be:
-i equals to --input, and -o to --ouput
"build:tailwind": "tailwindcss --input ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer && tailwind-rn -i ./src/css/tailwind.css -o ./src/css/tailwind.json",
"dev:tailwind": "concurrently \"tailwindcss -i ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer --watch\" \"tailwind-rn -i ./src/css/tailwind.css -o ./src/css/tailwind.json\""
Also remember to edit App.js imports
//from
import utilities from './tailwind.json';
//to
import utilities from './src/css/tailwind.json';

tslint precommit hook shows all the linting errors before but also allows to commit the code

I am using angular-seed & husky to add a precommit hook for git. My package.json has
"scripts": {
"precommit": "npm test && npm run lint",
}
When I commit the code, husky runs "npm test" & "npm run lint" fine. When npm test fails, it shows me the errors on the console & doesn't allow me to commit. But when there are errors on "npm run lint" then the console displays all the error messages but also allows to commit. How can avoid the commit to when there are linting errors? Any help is appreciated. Thank you in advance!
This is how my .git\hooks\pre-commit looks:
#!/bin/sh
#husky 0.14.3
command_exists () {
command -v "$1" >/dev/null 2>&1
}
has_hook_script () {
[ -f package.json ] && cat package.json | grep -q "\"$1\"[[:space:]]*:"
}
cd "."
# Check if precommit script is defined, skip if not
has_hook_script precommit || exit 0
# Node standard installation
export PATH="$PATH:/c/Program Files/nodejs"
# Check that npm exists
command_exists npm || {
echo >&2 "husky > can't find npm in PATH, skipping precommit script in package.json"
exit 0
}
# Export Git hook params
export GIT_PARAMS="$*"
# Run npm script
echo "husky > npm run -s precommit (node `node -v`)"
echo
npm run -s precommit || {
echo
echo "husky > pre-commit hook failed (add --no-verify to bypass)"
exit 1
}
In your seed.config.ts, you should have a boolean called FORCE_TSLINT_EMIT_ERROR. Override the value of this variable explicitly in your project.config.ts to true.

Trying to build library and getting the following warning: warning: type of bit-field ‘type’ is a GCC extension [-Wpedantic] uint8_t type:1;

I am trying to build sysrepo library https://github.com/sysrepo/sysrepo as a dependency on travis ci and am getting an issue with bit fields. I do not get this issue when I do an install on an ubuntu vm in either 14.04 or 16.04 and am quite confused why it appears when using travis ci. My build script that installs everything is below:
#!/bin/bash
set -e
#this script installs sysrepo and all of its dependencies.
INSTALL_PREFIX_DIR=$HOME/local
export PKG_CONFIG_PATH=$INSTALL_PREFIX_DIR/lib/pkgconfig:$PKG_CONFIG_PATH
export CC=gcc
sudo apt-get update -qq
sudo apt-get install -y cmake libev-dev libavl-dev
sudo apt-get install -y build-essential
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:$INSTALL_PREFIX_DIR/lib
GODIR=$PWD
cd $HOME
if [ ! -d "$INSTALL_PREFIX_DIR/lib" ]; then
# libyang
git clone https://github.com/CESNET/libyang.git
cd libyang ; mkdir build ; cd build
cmake -DCMAKE_INSTALL_PREFIX=$INSTALL_PREFIX_DIR -DCMAKE_BUILD_TYPE=Debug -DENABLE_BUILD_TESTS=OFF ..
make -j2 && sudo make install
cd ../..
# protobuf
git clone https://github.com/google/protobuf.git
cd protobuf
./autogen.sh && ./configure --prefix=$INSTALL_PREFIX_DIR
sudo make -j2
sudo make install
cd ..
# protobuf-c
git clone https://github.com/protobuf-c/protobuf-c.git
cd protobuf-c
./autogen.sh && ./configure --prefix=$INSTALL_PREFIX_DIR
sudo make -j2
sudo make install
cd ..
else
echo "Using cached libraries from $INSTALL_PREFIX_DIR"
fi
echo "$INSTALL_PREFIX_DIR/lib" | sudo tee /etc/ld.so.conf.d/sysrepolibs.conf
sudo ldconfig
#sysrepo
git clone https://github.com/sysrepo/sysrepo.git
cd sysrepo
mkdir build ; cd build ;
cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX:PATH=$HOME/local ..
make
sudo make install
cd ../..
sudo ldconfig
#start sysrepo
sudo sysrepod -d -l4 &> sysrepod.log &
cd $GODIR
This is called in a before_script on travis and everything works except I get these warnings:
[ 3%] Building C object src/CMakeFiles/COMMON.dir/common/sysrepo.pb-c.c.o
[ 5%] Building C object src/CMakeFiles/COMMON.dir/common/sr_common.c.o
In file included from /home/travis/local/include/libyang/libyang.h:20:0,
from /home/travis/sysrepo/src/common/sr_utils.h:36,
from /home/travis/sysrepo/src/common/sr_common.h:44,
from /home/travis/sysrepo/src/common/sr_common.c:28:
/home/travis/local/include/libyang/tree_schema.h:241:5: warning: type of bit-field ‘type’ is a GCC extension [-Wpedantic]
uint8_t type:1; /**< 0 - structure type used to distinguish structure from ::lys_submodule */
^
/home/travis/local/include/libyang/tree_schema.h:242:5: warning: type of bit-field ‘version’ is a GCC extension [-Wpedantic]
uint8_t version:4; /**< yang-version:
^
/home/travis/local/include/libyang/tree_schema.h:246:5: warning: type of bit-field ‘deviated’ is a GCC extension [-Wpedantic]
uint8_t deviated:2;
I am no expert at building C projects but any help would be greatly appreciated?
C supports only int, unsigned int, and _Bool as types for bit-fields. Other types are implementation defined.
Using the flag -Wpedantic the compiler will follow the standard strictly and will try to warn you if you use certain implementation-defined features or extensions.
Remove the flag -Wpedantic.
Bit fields are signed integers, unsigned integers, or bools as per the standard
C11 6.7.2.1 - Secton 5
A bit-field shall have a type that is a qualified or unqualified version of _Bool, signed int, unsigned int, or some other implementation-defined type. It is implementation-defined whether atomic types are permitted.

Why I keep get error like unexpected token when follow React.js tutorial

[UPDATE]: It turns out that I did not follow exactly as official sites says, which means I need add "[ ]" in the command.
All:
I am pretty new to react.js, when I follow official site tutorial, the steps I used is:
A. Build a file main.js
B. npm install -g browserify
C. npm install --save react react-dom babelify babel-preset-react
D. browserify -t babelify --presets react main.js -o bundle.js
Then I get error like:
SyntaxError: c:/Temp/web/lnreact/main.js: Unexpected token (6:2)
4 |
5 | ReactDOM.render(
> 6 | <h1>Hello, world!</h1>,
| ^
7 | document.getElementById('example')
8 | );
at Parser.pp.raise (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\node_modul
es\babylon\index.js:1413:13)
at Parser.pp.unexpected (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\node_
modules\babylon\index.js:2895:8)
at Parser.pp.parseExprAtom (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\no
de_modules\babylon\index.js:746:12)
at Parser.pp.parseExprSubscripts (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-c
ore\node_modules\babylon\index.js:501:19)
at Parser.pp.parseMaybeUnary (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\
node_modules\babylon\index.js:481:19)
at Parser.pp.parseExprOps (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core\nod
e_modules\babylon\index.js:412:19)
at Parser.pp.parseMaybeConditional (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel
-core\node_modules\babylon\index.js:394:19)
at Parser.pp.parseMaybeAssign (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-core
\node_modules\babylon\index.js:357:19)
at Parser.pp.parseExprListItem (c:\Temp\web\lnreact\node_modules\babelify\node_modules\babel-cor
e\node_modules\babylon\index.js:1224:16)
at Parser.pp.parseCallExpressionArguments (c:\Temp\web\lnreact\node_modules\babelify\node_module
s\babel-core\node_modules\babylon\index.js:577:20)
I am wondering where did I do wrong?
Thanks
You do not appear to be running the command given in the tutorial. The correct command to run browserify should be this:
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

How config React to render .js

I'm trying to let WebStorm to render the .js files for me watching .jsx files.
I'm using or trying to use browserify/babelify and react nodes but I'm getting the following error
/usr/local/bin/browserify -t [babelify --presets react]
/Users/myUser/Developer/ApacheRoot/JsFrameworksSamples/ReactJs/Sample_2/src/*
-o /Users/myUser/Developer/ApacheRoot/JsFrameworksSamples/ReactJs/Sample_2/src/bundle.js
Error: Cannot find module
'/Users/myUser/Developer/ApacheRoot/JsFrameworksSamples/ReactJs/Sample_2/src/*'
from
<br>'/Users/myUser/Developer/ApacheRoot/JsFrameworksSamples/ReactJs/Sample_2/src'
at <br>/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
at load <br>(/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex <br>(/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at <br>/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at<br> FSReqWrap.oncomplete (fs.js:95:15)<br>
Process finished with exit code 1
The configuration for the file watcher is the following:
arguments: -t [babelify --presets react] $FileDir$/* -o $FileDir$/bundle.js
What am I doing wrong?
OK....I got the solution...
browseify cannot use wildcard (as *) so it should transpile individual files using the following arguments:
-t [babelify --presets react] $FileDir$/$FileNameWithoutExtension$.jsx -o $FileDir$/../dist/$FileNameWithoutExtension$.js
after that when you want to bundle all .jsx files, it can run the following command:
browserify -t [ babelify --presets [ react ] ] src/* -o dist/bundle.js

Resources