I create my react npm package using webpack but when i install my npm package to my react project, package styles are not apply on classes. Why this happens
Here is the link of npm package. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Document not defined error resolved but styles not apply on classes in react project
Here is webpack file image
Here is package.json file image
Here is Test.jsx file image
Here is the main.css build file image which webpacks generates
Here is the test.js build file image which webpacks generates
Here is test.scss file image
Your webpack is working fine. You just need to import your styles manually from your build. This usually has to be done for all packages which define styles.
For ReactStrap you have to add this for styles
import 'bootstrap/dist/css/bootstrap.min.css';
For AntDesign you need this
import 'antd/dist/antd.css';
Same way you need to take import your styles from your build. i.e
import "#afiniti/test/build/main.css";
And your styles would start working.
Example code
import Test from "#afiniti/test";
import "#afiniti/test/build/main.css";
export default function App() {
return (
<Test />
}
Here is a link to a simplified working codesandbox. Good Luck!
Related
I'm trying to make a package in typescript, this one in particular. But after installing it locally in my project with yarn add file:../parascan-js, I can't import the modules correctly.
I expect import options for my package to be parascan/components/* (name changed from uikit) but what I see are the file/folders in the root such as src, dist, tsconfig etc. I want to be able to import with
import {Table} from "parascan/components/info"
Instead of this
import Table from "parascan/src/components/info/Table"
I've tried building dist folder with tsc and babel. Made some changes to package.json by adding type: module and module: dist/index.js but nothing worked.
Another way to look at this problem is using a generic common package like #chakra-ui/react as example. Text are imported with:
import { Text } from #chakra-ui/react
And not:
import { Text } from #chakra-ui/react/src/index
//or
//import { Text } from #chakra-ui/react/dist/index
I'm new to js/ts, so articles on how to create packages would be helpful.
I was wondering and trying to find out how webpack internally finds out which are the import statements a entry file has?
For example my index.js looks like
import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';
class App extends Component {
render() {
return (
<div className="shopping-list">
<Header />
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
<Footer />
</div>
);
}
};
export default App;
Now I am trying to understand how webpack is finding out what are the other imports that file has? And then one of the imported files has other imported files?
Basically, Webpack is build tool and it is design to convert your app into optimized solution like compressing the js/scss/css and many more files.
Webpack can be configurable according to your choice and there are many loaders and plugins developed, you can use them to add support for that type of file.
It's like telling a system to take list of source files (input) and compiling them by using related webpack plugin or loader and giving optimized solution as output.
by webpack configuration, you tell it that load this type of file and generate output here and it normally convert your advanced source code to native source code so, it can work on any system.
for example,
we know that scss file is not supported by browsers, we need to convert it into css and then we can import it, but using scss loader plugin and by configuring it with webpack you can directly use scss file no need to manually convert scss to css and directly can import scss file into component and webpack will read the file, see the type and convert it for us.
configuring the webpack is the difficult part but there are pretty good pre-configured solution available to use like create-react-app where you don't need to worry about the configurations
for more info see the webpack documentation
Per the tippy.js git hub page I installed it with npm:
npm i tippy.js
Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to import it; my other option is just to include it from the CDN but that doesn't seem very webpackesque
Also I'm using ES6 via babel-loader stage-0; so how exactly do I import that in so it's included with my bundle?
Shouldn't the CSS for tippy need to be imported as well?
Okay I found it here
import tippy from 'tippy.js'
and for CSS it's
import 'tippy.js/dist/tippy.css'
I don't want to use Vue-Material nor Vuetify.
I want to use Materialize.
What I do is:
npm install materialize-css#next
In main.js, where my new Vue App is defined I import Materialize like this:
import 'materialize-css'
Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.
The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).
Step 1: installation
npm install materialize-css#next --save
npm install material-design-icons --save
Step 2: import materialize css in src/main.js
At src/main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'
Step 3: initialize materialize components
Add following code in your component(say App.vue):
import M from 'materialize-css'
export default {
...
mounted () {
M.AutoInit()
},
...
This line imports the javascript (the entry point of the npm module from node_modules folder):
import 'materialize-css'
To import the CSS files just do this:
import 'materialize-css/dist/css/materialize.css'
I would also recommend you add the materialize css CDN in the index.html. Aand also create a script tag and add this:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
The scenario is that I'm developing a component for use by a website and want to combine the files that I've created into one index.js for ease of use.
File index.jsx includes the line var header = require('./header.jsx'); and header.jsx includes the line var React = require('react'); where React has been added as an npm module.
If I use webpack --module-bind jsx --entry .\src\index.jsx --output-file .\dist\index.js on the command line this produces a large file with React source included.
Is there a way that I can have just my index.jsx and header.jsx transformed and concatenated?
You can mark React as an external to achieve that. Ie.
externals: {
react: 'react',
}