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>"
})
Related
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.
I am using the Airbnb lint settings for my react app
and the line
import React from 'react';
Gives the error
Missing file extension for "react" (import/extensions)
Any idea how to fix this?
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"firebase": "^4.6.2",
"jquery": "^3.2.1",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"sass": "sass --watch src/styles/scss:src/styles/css",
"sass:build": "sass src/styles/scss:src/styles/css"
},
"devDependencies": {
"eslint": "^4.12.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1"
}
}
In the rules object of your .eslintrc set "import/extensions" to never or 0 to avoid this.
You should check if you have eslint-plugin-import installed, Airbnb style guide configuration uses it to handle linting of imports and exports. If you don't have it, it results in the error Unable to resolve path to module '_module-name_' and/or Missing file extension for "_module-name_" (import/extensions).
Also since you have it installed in dev-dependencies, you can run something like ./node_modules/.bin/eslint . or setup eslint globally to just run eslint .
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.
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.
So I can get the data if I npm run build my app and run it via it's usual address. But with npm start it doesn't know/(can't reach) the specified location.
So how might I go about doing this so it can work both ends?
package.json
{
"name": "reactjs",
"version": "0.1.0",
"private": true,
"homepage": "/reactjs/build",
"devDependencies": {
"lite-server": "^2.2.2",
"react-scripts": "0.8.4"
},
"dependencies": {
"datatables.net": "^1.4.2",
"datatables.net-dt": "^1.4.2",
"griddle-react": "^0.7.1",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"scripts": {
"start": "react-scripts start eslint-disable",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"dev": "lite-server -c config/bs-config.js"
}
}
Add proxy to it e.g.
"homepage": "/reactjs/build",
"proxy": "http://localhost/supermarkets