In react project scss file display empty code space - reactjs

I am new on React. I have installed jqwidgets and node-sass packages.
I run: npm install --save node-sass
In JS component file:
import './style.scss';
in style.scss:
.welcome{
background-color: firebrick;
}
Then I open developer tools on browser style.scss I see:
module.exports = __webpack_public_path__ + "static/media/style.7388d000.scss";
//////////////////
// WEBPACK FOOTER
// ./src/components/Welcome/style.scss
// module id = ./src/components/Welcome/style.scss
// module chunks = 0
Why sass style code is not displaying?
packages.json:
{
"_from": "https://github.com/jqwidgets/my-app2/tarball/master",
"_id": "my-app2#1.0.0",
"_inBundle": false,
"_integrity": "sha512-TzCrV6rvvYS5En18r6qrM2T7Rz24DQomJCLmQ2j/V08534YPijH5CjTAKJcDI8vNHM+HgyNS3YFxDVd0mHWSqg==",
"_location": "/my-app2/my-app2",
"_phantomChildren": {},
"_requested": {
"type": "remote",
"raw": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"name": "my-app2",
"escapedName": "my-app2",
"rawSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"saveSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"fetchSpec": "https://github.com/jqwidgets/my-app2/tarball/master"
},
"_requiredBy": [],
"_resolved": "https://github.com/jqwidgets/my-app2/tarball/master",
"_shasum": "7d2a1b35e0af075c74da15c045aaddabd7a70e35",
"_spec": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"_where": "C:\\Users\\Evoiu\\AppData\\Roaming\\npm\\node_modules\\my-app2",
"bundleDependencies": false,
"dependencies": {
"axios": "^0.18.0",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.1.4"
},
"deprecated": false,
"description": "Please refer to its documentation: - [Getting Started](https://github.com/jqwidgets/my-app2/blob/master/README.md#getting-started) - [jQWidgets React Documentation](http://www.jqwidgets.com/reactjs-components-documentation/)",
"name": "my-app2",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test --env=jsdom"
},
"version": "1.0.0",
"devDependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
}
I spend so much hour, Idont know where is problem... :(
If I create new project with only node-sass, then its working. Deam it why its not working with jqwidgets.

https://www.jqwidgets.com/reactjs-components-documentation/documentation/create-jqwidgets-react-app/index.htm
have you install jqwidgets-react-app with this?
I haven't tested it myself.

Related

Unable to configure mobx in monorepo (using yarn workspaces)

I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'
class Store {
_number = 0
increment = () => {
this._number++
}
get number() {
return String(this._number)
}
}
// All of those are defined
console.log('TEST', {action, decorate, computed, observable, observer})
decorate(Store, {
_number: observable,
increment: action,
number: computed,
})
class TestComponent extends React.Component {
static defaultProps = {
clickableComponent: 'button',
numberElement: 'div',
}
store = new Store()
render() {
const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
const {number, increment} = this.store
return <Fragment>
<ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
<NumberElement>{number}</NumberElement>
</Fragment>
}
}
export default observer(TestComponent)
In browser (react) app I get the following error:
Failed to compile
PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
In native app (react-native) I get the following runtime error:
error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root package.json:
{
"name": "monorepo-rn",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"workspaces": {
"packages": [
"packages/**"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"scripts": {
"run:web": "yarn workspace web start",
"run:native:ios": "yarn workspace nativeapp react-native run-ios",
"run:native:android": "yarn workspace nativeapp react-native run-android"
}
}
Here is the package.json of the shared package:
{
"name": "test-component",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir lib"
},
"peerDependencies": {
"mobx": "^4.x",
"mobx-react": "^5.x",
"react": "^16.x",
"react-dom": "^16.x"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"dependencies": {}
}
Here is the package.json of the webapp:
{
"name": "web",
"version": "0.1.0",
"dependencies": {
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3",
"test-component": "1.0.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewire-babel-loader": "^0.1.1",
"react-app-rewired": "^2.0.3"
}
}
And here is the package.json of the react-native app:
{
"name": "nativeapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"test-component": "1.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "16.6.3",
"react-native": "0.58.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.

React Native app error when running with Relay

I have successfully generated create-react-native-app however, when I install relay along with graphql, I am getting error:
> react-native-scripts start
10:50:27 AM: Starting packager...
***ERROR STARTING PACKAGER***
Warning: Problem validating app.json: Unable to perform cache refresh for /home/vagrant/.cache/expo/schema-27.0.0.json: Error: certificate is not yet valid.
Error: Invalid sdkVersion. Valid options are 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 7.0.0, 8.0.0, 9.0.0
This is my package.json:
{
"name": "blah",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-relay": "^1.6.2",
"graphql": "^14.0.2",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1",
"relay-compiler": "^1.6.2"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"relay": "relay-compiler --src ./ --schema ./db/schema.json"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-dom": "^16.5.0",
"react-native": "~0.55.2",
"react-relay": "^1.6.2"
}
}
UPDATED
My app.json has:
{
"expo": {
"sdkVersion": "27.0.0"
}
}

How to use jaeger-client from react component?

From react application (App.js ) imported jaeger-client.
import jaegerClient from 'jaeger-client'
Got exception 'TypeError: _fs2.default.readFileSync is not a function' from following line of /node_modules/jaeger-client/dist/src/thrift.js:168
source: _fs2.default.readFileSync(_path2.default.join(__dirname, './jaeger-idl/thrift/jaeger.thrift'), 'ascii')
Trying to solve it. Thanks for any help.
Complete package.json is like below
{
"name": "calculator",
"version": "0.1.0",
"private": true,
"homepage": "http://ahfarmer.github.io/calculator",
"devDependencies": {
"gh-pages": "^1.1.0",
"react-scripts": "^1.0.17"
},
"dependencies": {
"ajv": "^6.4.0",
"ajv-keywords": "^3.1.0",
"big.js": "^5.0.3",
"bufferutil": "^3.0.3",
"fs": "0.0.1-security",
"github-fork-ribbon-css": "^0.2.1",
"hexer": "^1.5.0",
"jaeger-client": "^3.10.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-tracing": "^0.1.5",
"thrift": "^0.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
Forked from https://github.com/ahfarmer/calculator and I am trying to trace every user action ( button press ). To test tracing from react.js application.
node-jaeger-client currently doesn't run in the browser. There is ongoing work to make jaeger-client browser friendly. This issue: readFileSync is not a function contains relevant information to why you're seeing the error message. Essentially, you're trying to run jaeger-client (a nodejs library) using react-scripts which doesn't contain the modules that jaeger-client needs.
Not jaeger, able to send traces to zipkin server, using zipkin-simple.
Related code is in repository https://github.com/debmalya/calculator
import zipkinSimple from 'zipkin-simple'
const zipkinTracerSimple = new zipkinSimple({
debug: true,
host: "localhost",
port: "9411",
path: "/api/v2/spans",
sampling: 1.0,
})
var zipkinSimpleTraceData
zipkinSimpleTraceData= zipkinTracerSimple.getChild(zipkinSimpleTraceData);
zipkinSimpleTraceData =
zipkinTracerSimple.sendClientSend(zipkinSimpleTraceData, {
service: '<service_name>',
name: "<span_name>"
})

Cannot read property 'string' of undefined

I got an error on my browser window "Cannot read property 'string' of undefined" when i import module (import { Button } from 'react-lightning-design-system'), even i am not using this module.
//package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-lightning-design-system": "^2.4.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Given that it's a PropTypes issue I'm guessing it's a React v15 vs React v16 issue (i.e. you're using one version of React, but that module requires the other version). Check the dependencies.
Probably gonna need some more info then just an out of context error message though
Using react-codemon, run on your project directory
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js myapp/
This will resolve updating proptypes for your source code and any node modules.
Re-installing node modules will require running the command again it seems.

Merge react app with react native app

I want to put React app files in the React Native app.
I used React Native Web to support React Native components in the React app.
Last step I want to put all files from React App folder to React Native App folder.
the difference is in Package.json
React Package.json :
{
"name": "appname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
React Native Package.json:
{
"name": "appname",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-windows": "0.47.0-rc.5"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12",
"rnpm-plugin-windows": "^0.2.7"
},
"jest": {
"preset": "react-native"
}
}
So is it possible I can merge the two packages together?
For your native app you can use package.json from React Native, no need to merge. You don't need "react-dom" and similar libs in native app. If your components are all from React Native for Web, there will be no problem running them on native.

Resources