I have a react application I created with create-react-app and I have added storybook to it. When I run yarn run storybook it does not reload when I change files.
My application is laid out like
src
->components
--->aComponent.js
->stories
--->index.js
->index.js
Here is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"immutable": "^3.8.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
"#storybook/addon-actions": "^3.3.14",
"#storybook/addon-links": "^3.3.14",
"#storybook/addons": "^3.3.14",
"#storybook/react": "^3.3.14",
"babel-core": "^6.26.0",
"flow-bin": "^0.67.1"
}
}
I have no custom web pack config. What do I need to do to get hot module reloading working?
You must increase your watch count
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Had the same issue, should pass module as a 2nd argument for storiesOf
// V Won't hot reload with `module`
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
I had this problem too,
my environment was:
ubuntu 18.04
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.1.2",
"#storybook/react": "^5.2.1"
I solved this problem with running as the sudo user like this:
sudo yarn run storybook
Related
I have the following script in the scripts block of my package.json, this requires babel via babel-register- and sets the NODE_ENV to development in order to do so.
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js"
I am however getting this error:
Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received:undefined.
I have tried many combinations of uninstalling, reinstalling, altering the order of requirements within my script and several other steps mentioned in the main git issue for this error.
Can anyone see any glaring error in my method here? Full package below:
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"tslib": "^1.9.3",
"typescript": "^3.0.1"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"build-ts": "set NODE_ENV=development tsc || exit 0",
"watch-ts": "tsc --watch",
"build": "react-scripts build",
"start": "npm-run-all -p build-* watch-* start-js",
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js",
"eject": "react-scripts eject"
},
"babel": {
"presets": [
"es2015",
"react",
"react-app"
],
"plugins": [
"transform-object-rest-spread"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.1.2",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"ignore-styles": "^5.0.1",
"jsdom": "^11.12.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"sinon": "^6.1.5"
}
You're currently using set to specify your NODE_ENV variable which results in it not being available to child processes, i.e. the next command chained after the && operator, which is mocha.
If you use export instead, you'll ensure it's available to child processes.
Change the beginning of your test script to the following:
"test": "export NODE_ENV=development && mocha --watch ..."
Cross-patform:
export will only work in Bash environments. For a cross-platform solution consider utilizing cross-env to set the environment variables instead. Example:
"test": "cross-env NODE_ENV=development mocha --watch ..."
Note: export has been replaced with cross-env and the && operator is not necessary.
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>"
})
Sass does not compiling in create-react-app. The current package.json structure is
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"node-sass-chokidar": "^1.2.2",
"npm-run-all": "^4.1.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Repo: https://github.com/athimannil/create-app
It is working fine, npm start watch your .scss files and output .css files as expected.
Make sure to require the .css files in your components.
Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.
Also since .css files are now generated, you should remove them from your SCM.
At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.
doc
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.
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
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