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.
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'm new at React.JS and I have made some sample app to test it, in my site I've already have the call to bootstrap CDN so I don't need to call bootstrap again in my React APP, but when I run 'npm run build', in the output, bootstrap code is appended to the css file, how can I disable bootstrap in my project.
Thank you...
UPDATE:
This is my package.json file, I've already remove the call from this file, but it still appending bootstrap.
{
"name": "new-home",
"version": "0.1.0",
"private": true,
"homepage" : "home/newHome/build",
"dependencies": {
"#types/react-slick": "^0.23.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-slick": "^0.23.1",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Solved,
In index.js I needed to remove the import call to bootstrap, in my case I removed but I recommend just comment it.
Thanks everyone...
If you have not Ejected(which isnt recommended for newer react users) than you may not be able to see it in your package.json file, but on eject you will see it in there.
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>"
})
I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!
My package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"downloadjs": "^1.4.7",
"fast-memoize": "^2.2.8",
"flow-bin": "^0.52.0",
"lodash": "^4.17.4",
"mapbox-gl": "^0.39.1",
"material-ui": "^0.18.7",
"moment": "^2.18.1",
"node-sass-chokidar": "^0.0.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mapbox-gl": "^2.5.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-emotion": "^7.2.2",
"react-scripts": "1.0.10",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
}
Here are the folders and files of the built app
As I mentioned in comments.
npm run build uses react-scripts to create a build for you
To run in production:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"start:prod": 'node dist/app.js'
}
By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.
create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)
If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.
Does this help?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app
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 .