I'd like to understand how to use Babel, webpack or whatever the tool I need to import a single component from a library.
Here https://rsuitejs.com/en/guide/usage when you scroll down to 'Use modularized rsuite' they say that I need to install babel-preset-rsuite and then add a .babelrc file, but with this in it:
{
"presets": ["rsuite"]
}
I've done it, and it still does not import the .less styles. So I end up with an HTML button without the nice styling that goes with it.
(I'm a bit titled, have tried every possible thing and nothing works, I just broke my entire codebase because of another webpack issue, fortunately I was able to recover it thanks to my VCS)
Can someone, please, explain the beginner that I am what exactly do I have to do? Do I have to run a specific command instead of react-scripts start so that it takes this .babelrc file into account?
Thanks
OFF:
To use a single component from a library:
Install a library
Import the necessary component:
import { Example } from 'example-installed-library'
ON:
And related to babel, I recommend this article to read:
https://www.valentinog.com/blog/react-webpack-babel/
And of course it's own site with documentation: https://babeljs.io/
By not introducing less by default, you need to configure style: true.
{
"presets": [["rsuite", { style: true }]]
}
Related
I am trying to rewrite all existing relative paths in my javascript/typescript project to absolute paths.
Example:
import example from "../../example"
would be rewritten to
import example from "src/components/example"
So I am looking for a script or similar to transform all these imports. Preferably it would be possible to run this as an npm script on precommit or similar.
Is there a way to do this?
It looks like imports are done for static analysis and cannot truly be dynamic (Importing modules using ES6 syntax and dynamic path). I am wondering though if you can do something in the tsconfig.json to accomplish this. Under the "compilerOptions: { ..., "paths": { "#components/": "src/components/". I am not sure this will solve your use case but it may be worth a try. So your import would look like:
import { example } from "#components/example"
I also faced this problem and created an ESLint plugin to solve it. You can find it here: https://github.com/qDanik/eslint-plugin-path
installed recently ant design https://ant.design/
However, it doesn't use styled components, just old basic css modules. The .css file is like 10k of lines. There's a way to use only these u need, but first u have to install babel.
Unfortunately, Im not using babel in my project, just the typescript.
https://ant.design/docs/react/introduce - here is written that I need babel and babel-import-plugin. But as I said Im not using it and I dont want to use it in my project.
For those who dont want to enter external websites:
Use modularized antd#
Use babel-plugin-import (Recommended)
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
Question: Is there a way to use modularized css (import only these styles that u need) using typescript or just webpack or so? Without babel?
Thank you
I have been using Antd with react from past 1 year.
This is the problem when you will try to use the modularized antd otherwise this issue would not exist.
In modularized
import DatePicker from 'antd/lib/date-picker'; // for js
import 'antd/lib/date-picker/style/css'; // for cs
In non modularized
import 'antd/dist/antd.css'; //once in index.js file in src folder the
import {DataPicker,Button,Grid} from 'antd'; //whatever component you needed
Do you really wanted to user the modularized antd?
If you changed your mood here is my git repository for that https://github.com/shreyansRS/react-redux-antd
If you still wanted to use modularized, i think importing 'antd/lib/date-picker/style/css' in index.js should work.
I'm trying to add: https://www.npmjs.com/package/is-url to my react/redux project but I'm not sure what to put for importing.
Is there another, es6 friendly install that I could use?
You can use:
import isUrl from 'is-url';
Or even
import anotherNameForIsUrl from 'is-url'
The reason for this, is that the module of the library is exported as default as seen per the source file: https://github.com/segmentio/is-url/blob/master/index.js which means you are free to give it your own variable name.
Another thing is to think about moving the source code to your project, so you dont need another very small third-party dependency.
Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:
Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';
Not sure what version of Moment JS I had prior to my update, but my application has been working for months.
I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.
Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.
Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment#2.18.1 to revert back to previous version until it is fixed!
See thread: https://github.com/moment/moment/issues/4216
Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:
import moment from 'moment';
import 'moment/min/locales';
Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';
The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.
This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:
YOURAPPNAME/node-modules/webpack/
So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.
module.exports = {
resolve: {
alias: {
moment$: 'moment/moment.js'
}
}
};
Your import statement of moment in your index.js (or otherwise named) file should look like this:
import moment from 'moment'
You should now be able to use moment completely normally. For example:
var tomorrow = moment().add(1, "day")
If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.
UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.
If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.
If you're using yarn add these lines into package.json
"resolutions": {
"**/moment": ">=2.25.3"
},
This is to be added inside packages.json at the top level, i.e. with the same indentation as "dependencies".
I am working on a project containing a Vuex module and an abstract components that users can extend from.
I would love to publish this on NPM to clean up my codebase and pull this away from my project as a solid well tested module. I have specified the main file in package.json to load an index which imports everything I want to expose:
https://github.com/stephan-v/vue-search-filters/
The index contains this at the moment:
import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue';
import Search from './src/store/modules/search';
module.exports = {
AbstractFilter,
Search
};
For this to work I need to transpile this since a babel compiler normally won't transpile files imported from node_modules(Correct me if I am wrong here). Besides that I would probably be a good idea to do this so it can be used by different systems.
How do I transpile only the files that I need though with Webpack? Do I have to create a separate config for this?
What does a config like that look like? I know the vue-cli has a build command for one single file component but this is a bit different.
Any tips or suggestions on how to transpile something like this are welcome.
Edit
This seems like a good start as well:
https://github.com/Akryum/vue-share-components
The most import thing for Webpack users to notice is that you need to transpile your files in UMD which can be set by:
libraryTarget: 'umd'
This will make sure your are transpiling for Universal Module Definition, meaning your code will work in different environments like AMD,CommonJS, as a simple script tag, etc.
Besides that it is import to provide the externals property in webpack:
externals: {}
Here you can define which libraries your project users but should not be built into your dist file. For example you don't want the Vue library to be compiled / transpiled into the source of your NPM package.
I will research a bit more, so far the best options looks like to create a custom project myself If I want flexibility and unit testing.
Webpack docs
This is also a useful page which goes in depth about how to publish something with Webpack:
https://webpack.js.org/guides/author-libraries/#add-librarytarget
The best way probably will be to build the module and set main in your package.json to my_dist/my_index.js. Otherwise every project that will use your module will have to add it to include which is tedious.
You will also want your webpack build to follow UMD (Universal Module Definition). For that you must set libraryTarget to umd:
...
output: {
filename: 'index.js',
library:'my_lib_name',
libraryTarget: 'umd'
},
...
Also a good thing will be to add Vue to externals so that you didn't pack extra 200kb of vue library.
externals: {
vue: 'vue'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
And add it to peerDependencies in package.json:
...
"peerDependencies": {
"vue": "^2.0.0"
},
"devDependencies": {
"vue": "^2.0.0"
}
...
If you need an existing example of how to pack a vue.js component, you can take a look in one of the modules I maintain:
https://github.com/euvl/vue-js-popover
Particularly webpack.config.js and package.json will be interesting for you.
I was searching for a similar solution and found rollup https://github.com/thgh/rollup-plugin-vue2 (but was not able to make it work) and this component https://github.com/leftstick/vue-expand-ball where all the component code gets compiled to one reusable js-file.
I know that's not a proper solution but maybe it's sufficient for your needs.