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
Related
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
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 am creating a personal project in TypeScript. It should be a library that exports React components and TypeScript functions. The idea is therefore to publish this library on npm in the future.
There is also a demo page within the project and this is where I would like to use Storybook to test React components.
This is the structure of the project:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
I have read the Storybook documentation and it recommends to install Storybook by running npx sb init. I tried but the problem is that the stories are put in the project src directory, not in the demo page:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── stories/ # Storybook <<---
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
And the storybook script that is created is this:
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
but I would like something like:
"scripts": {
"storybook:demo": "start-storybook -p 6006",
"build-storybook:demo": "build-storybook"
},
So how can I install and use Storybook only on the demo page?
Looks like you're ultimately trying to have multiple source directories. This is supported by both TypeScript and Storybook, it just needs a bit of configuration.
tsconfig.json should have the include option set to:
"include": [ "src", "demo" ]
This tells TypeScript (or its Babel loader) to compile files in src and demo.
.storybook/main.js should have the stories option set to:
stories: [
'../demo/**/*.stories.mdx',
'../demo/**/*.stories.#(js|jsx|ts|tsx)',
],
This specifies which files should be interpreted as stories and in our case it would load *.stories.mdx/js/jsx/ts/tsx recursively from the demo folder.
Also note that the stories folder is just an example folder created by Storybook and you can safely delete it. Stories can be in any of the directories processed by TypeScript as long as it matches the patterns specified in .storybook/main.js.
You can even have multiple Storybooks with multiple configs in a single project, but that may not be what you're after. Just in case, though, the command would be start-storybook -p 6006 -c path/to/config/.storybook
If I understood correctly, you want to build a components library and have demo app for your components.
I don't think there is a way to use Storybook in an existing app. This would mean you would have to build your demo app and use some components from Storybook to show case components in your app. To my knowledge this is not possible. It might be, but it seems complicated and I don't know of any docs on this.
I think the Storybook app is (or should be) your demo app.
Storybook can render mdx files so you can add any content to it and get a demo app.
What you could try:
Move your demo app content and component stories to the demo folder
Migrate Home.tsx to a mdx file
Change Storybook's config to load stories from '/demo`
To a degree, you can change Storybook's styling and "make it your own" and this can become your demo app.
Until I discovered Storybook I used a home-made components show case app with react-live. Might want to take a look at it but I think Storybook is is better and easier to maintain.
Disclaimer; I am new to react & react-native. I've downloaded a UI module and am attempting to use it in my project. This is what the folder structure looks like:
├── myProject
│ ├── README.md
│ └── src
│ └── client
│ └── {actual react-native project}
└── react-native-ui-module
├── node_modules
├── package-lock.json
├── package.json
└── src
I've added react-native-ui-module to myProject/src/client/package.json like so:
"react-native-ui-module": "file:../../../react-native-ui-module",
From there, I've executed the following command:
$ npm install
$ react-native link
I can see the module in node_modules after the above steps.
I've expected to then use the module like so:
import { Button } from 'react-native-ui-module';
However, I'm getting an error that states that the Modulereact-native-ui-module` does not exist in the Haste module map. I've tried following the error message's suggestion, which is:
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
I've also tried using relative and absolute paths in the import statement. Is there a better way of importing and installing the module? And what other troubleshooting steps can I take to actually use the module?
Also, to clarify; this is a module that I've purchased and manually downloaded, so it's not available from npmjs.
The short thing you can do, considering your current situation, is to copy the ui module into the node_modules of your {actual react-native project}, then the ui module will be available for you to use in the imports, in this way you don't even need to add the module into your package.json, but this way is just for testing what the ui module can do.
The correct way is to find this ui module in the npm site, and use the command npm install --save [name-of-the-ui-module], then ui module will be available for you to use in your imports.
(Updated considering comments bellow)
To avoid Headaches with npm, considering that your library is not in the npm repository, you can also include this library in a lib folder into your project, and use it like you were using any other component.
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" ]
}