I have created a Storybook and after when I change something and save it, the browser does not refresh automatically. So every time I have to press the F5 button. Unfortunately, I could not figure the problem.
I start the storybook with:
yarn storybook
The repository is hosted on https://github.com/softshipper/react-storybook.
Update
I have figured out that on Firefox hot reload works like a charm. However, on Chromium hot reload does not work at all. I am using https://pop.system76.com/ as OS and Chromium is installed with flatpak.
When I start the storybook, in the terminal it shows me:
$ start-storybook -p 6006
info #storybook/react v6.2.7
info
info => Loading presets
info => Loading 1 config file in "/home/developer/projects/openidea/webapp/components/.storybook"
info => Loading 7 other files in "/home/developer/projects/openidea/webapp/components/.storybook"
info => Adding stories defined in "/home/developer/projects/openidea/webapp/components/.storybook/main.js"
WARN unable to find package.json for #rollup/plugin-node-resolve
WARN unable to find package.json for rollup
info => Using prebuilt manager
info => Using implicit CSS loaders
WARN unable to find package.json for #rollup/plugin-node-resolve
WARN unable to find package.json for rollup
info => Using React fast refresh
info => Using default Webpack4 setup
(node:145138) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '#storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building 6/12 modules 6 active /home/developer/projects/openidea/webapp/components/node_modules/babel-loader/lib/index.js??ref--4-0!/home/developer/projects/openidea/webapp/components/.storybook/generated-stories-entry.jsinfo => Using cached manager
webpack built preview 6002361e38573b1c5351 in 9449ms
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 6.2.7 started │
│ 9.74 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://192.168.178.27:6006/ │
│ │
╰─────────────────────────────────────────────────────╯
webpack building...
webpack built preview 533a9b622317ca763dd0 in 1930ms
Related
create-react-app version
react: v17.0.1
react-scripts: v4.0.1
storybook version
#storybook/react: v6.1.6
#storybook/addon-docs: v6.1.6
#storybook/core: v6.1.6
and i could run yarn start to run react app and could run start-storybook -p 9009 -s public to start storybook.
when it comes to build react app , it comes issue. look below.
when run "yarn run build", it actually run react-app-rewired start.
it shows below
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
/Users/yejinlei/Documents/playground/personal/react-temp/node_modules/babel-loader (version: 8.2.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/yejinlei/Documents/playground/personal/react-temp/node_modules/babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-loader in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
I run npm ls babel-loader and see below show
react-temp#0.1.0 /Users/yejinlei/Documents/playground/personal/react-temp
├─┬ #storybook/addon-docs#6.1.6
│ └─┬ #storybook/core#6.1.6
│ └── babel-loader#8.2.1 deduped
└── babel-loader#8.2.1
and i follow the instruction and run yarn add babel-loader#8.1.0. when it done i get below :
react-temp#0.1.0 /Users/yejinlei/Documents/playground/personal/react-temp
├─┬ #storybook/addon-docs#6.1.6
│ └─┬ #storybook/core#6.1.6
│ └── babel-loader#8.2.1
└── babel-loader#8.1.0
then run yarn run build, which actually run react-app-rewired build and get below error
playground/personal/react-temp/node_modules/react-scripts/scripts/build.js:19
throw err;
^
TypeError: aGeneratedCode.split is not a function
at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (playground/personal/react-temp/node_modules/source-map/lib/source-node.js:64:41)
can not build
so then i target to the code node_modules/source-map/lib/source-node.js
and see the error code:
/node_modules/source-map/lib/source-node.js
64 var remainingLines = aGeneratedCode.split(REGEX_NEWLINE);
I run and analysis the code. the the aGeneratedCode will be "obejct", so i change the code as below.
var remainingLines = typeof(aGeneratedCode) === "string" ? aGeneratedCode.split(REGEX_NEWLINE) : [];
then i could run build / start of the cra app and storybook now.
but why and how to permantly fix it ?
I was able to work it around with "resolutions" property
(https://classic.yarnpkg.com/en/docs/package-json/#toc-resolutions)
"resolutions": {
"babel-loader": "8.1.0"
},
I'm using DatePicker and I can't set the default Values, I tried this:
I import the moment like this:
import moment from 'moment';
//And then:
<DatePicker
defaultValue={moment('2015/01/01', 'YYYY/MM/DD')}
/>
//Also tried this
<DatePicker
defaultValue={moment('2015/01/01')}
/>
But I got this error:
"Type 'import("C:/git/my_project/node_modules/moment/moment").Moment' is not assignable to type 'moment.Moment'.
Types of property 'add' are incompatible."
I can't find where is my error
When I type npm ls moment and npm ls #types/moment. This is the result:
In my case, I had multiple conflicting moment version. I ran npm ls moment and I got this:
├─┬ antd#4.2.2
│ ├── moment#2.25.3
│ └─┬ rc-picker#1.4.16
│ └── moment#2.24.0 deduped
└── moment#2.24.0
I also had #types/moment installed on my repository but moment now supports TypeScript (You can see a deprecation warning on the npm package page)
There are the steps I followed:
npm un --s #types/moment
npm i --s moment#2.25.3
Install whatever version antd is dependent on to remove the errors
I have recently tried running a React Native app that is in development on a machine connected to a VPN. The Metro bundler fails to start:
I have tried to specify a local host by starting the project with react-native start --host=0.0.0.0, the result is the following error:
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
events.js:183
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 0.0.0.0:8081
at Server.setupListenHandle [as _listen2] (net.js:1360:14)
at listenInCluster (net.js:1401:12)
at doListen (net.js:1510:7)
at _combinedTickCallback (internal/process/next_tick.js:142:11)
at process._tickCallback (internal/process/next_tick.js:181:9)
If I enter http://0.0.0.0:8081 in my web browser, I get a page that says:
React Native packager is running.
If I disable the VPN, everything starts happily...but I'd prefer to not need to disable the VPN when an app needs to be launched. Am I using a command wrong or are the VPN settings that need to be changed?
I am on MacOS 10.14.3
VPN is PIA using their app, but this has happened using TunnelBlick with OpenVPN as well.
My react native app takes 2 full minutes to load and I'm wondering what's the hold up. When it gets to 97.4% it just freezes for about two full minutes before going to 100%. How can I find out the reason for this delay?
>npm start -- --reset-cache
> crew_rn#0.0.1 start /Users/######/crew_rn
> node node_modules/react-native/local-cli/cli.js start "--reset-cache"
Scanning folders for symlinks in /Users/######/crew_rn/node_modules (9ms)
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/#####/crew_rn
Metro Bundler ready.
Loading dependency graph, done.
warning: the transform cache was reset.
BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 97.4% (598/606)
I see no one has answered my question and there is interest so I'll just share what I did.
In the package.json file - there were several dependencies. I took out all the dependencies and slowly put them back in until I identified the dependency which was causing the slowdown - and then I changed its version. This is the approach I took.
I'm struggling to get my jsx files compiled using babel + presets. My project structure is a bit non-standard as js/jsx files are placed in a sibling directory of the config/build files:
.
├── frontend_config
│ ├── node_modules
│ │ ├── babel-cli
│ │ ├── babel-core
| | | ...
│ ├── package-lock.json
│ └── package.json
├── jsx
│ ├── foo
│ │ ├── Bar.jsx
...
I've narrowed down the issue to the minimal by trying to run babel from the terminal, inside the frontend_config directory I run:
npx babel ../jsx/foo/Bar.jsx --presets=env,react
Couldn't find preset "env" relative to directory "../jsx/foo"
I've installed both babel-preset-env and babel-preset-react but I don't know how to tell babel where are they placed. I've also tried using a .babelrcfile but the behavior is the same.
My setup is:
$ npx babel --version
6.26.0 (babel-core 6.26.0)
$ node --version
v8.9.4
You have installed babel dependencies like cli, presets, plugins in frontend_config folder and you're transpiling JSX files which are not placed in same root babel installed. That is why, it shows like
Couldn't find preset "env" relative to directory
do like below in your webpack/grunt/.babelrc :
use absolute paths
or use require like below :
var babelenv = require('babel-preset-env');
var babelreact = require('babel-preset-react');
var babelamd = require('babel-plugin-transform-es2015-modules-amd');
and
presets: [ babelenv, babelreact],plugins : [ babelamd ]
Hope it helps.
run npm install #babel/preset-env --save-dev
More info # https://babeljs.io/
For anyone having this issue, the solution when using Babel 6 and placing node_modules in a different directory than the project root is to use absolute paths. Hence the babel call would look like:
npx babel ../jsx/foo/Bar.jsx --presets /Users/foo/bar/frontend_config/node_modules/babel-preset-env/,/Users/foo/bar/frontend_config/node_modules/babel-preset-react/
Credit to the answer goes to loganfsmyth
You can also just put this in your .babelrc file if you like
{
"presets" : [ "/Users/foo/bar/frontend_config/node_modules/babel-preset-env" ]
}