I'm creating a custom react library. I'm using typescript, redux, and create-react-library to create it.
It' all ok, I can import my library from other projects, but my problem is that when I do npm run build. This generates a dist folder but doesn't add styles folder with scss and other files from fontello.
I have to create and script that when the post-build copy styles folder into the dist folder.
Also, in index.d.ts file of my library I have this import: import "./styles/main.scss"; but doesn't import it. (Maybe I have to add something in tsconfig.json)
import "bootstrap/dist/css/bootstrap.css";
import "./styles/main.scss";
import React from "react";
import MainTree from "./components/main";
import HierarchyTreeReducerState from "./redux/reducers/HierarchyTreeReducer";
import TreeReducerState from "./redux/reducers/TreeReducer";
interface Props {
portal: boolean;
removeBranchWithChildren: boolean;
data?: any;
}
function TreeLibrary({ portal, removeBranchWithChildren, data }: Props) {
return (
<MainTree
removeBranchWithChildren={removeBranchWithChildren}
data={data}
portal={portal}
/>
);
}
export { TreeLibrary, HierarchyTreeReducerState, TreeReducerState };
The only solution I have found is to import the main.scss from the project that imports the library, like this:
import "react-tree-library/dist/styles/main.scss";
App.tsx from a project that imports my library:
import React from "react";
import { TreeLibrary } from "react-tree-library";
import "react-tree-library/dist/styles/main.scss";
import { completeData } from "./mockedData/huge";
class App extends React.Component<any, any> {
render() {
return (
<TreeLibrary
portal={false}
data={completeData}
removeBranchWithChildren={false}
/>
);
}
}
export default App;
But I would like that when import my library I don't need to import styles manually.
How can I solve this?
Related
I have been trying to use create-react-library and so far it works, but I can only import components successfully from index.js. If I try to make another file , I recieve an import error.
The file structure is as such
example
\ Node Module
\ public
\ src
| App.js
| index.js
...
src
\ Patterns
| index.js
| button.js
Currently I can only successfully import components from index.js of the main src. Is there a way to successfully import components from folders such as Patterns or another file?
\ App.js ( example )
Importing button gives me an error "Cant import button from neo"
import React from 'react'
import { ExampleComponent,Button} from 'neo'
import {Test} from 'neo/Patterns';
import 'neo/dist/index.css'
const App = () => {
return (
<>
<Test />
<Button text='Click me' />
<ExampleComponent text="Create React Library Example 😄" />
</>
)
}
export default App
Please check if this is what you're trying to achieve.
index.js will be exporting required components like this,
import ExampleComponent from './ExampleComponent/ExampleComponent';
// ExampleComponent is placed inside a folder named ExampleComponent
import Patterns from './Patterns/Patterns';
// Patterns is placed inside a folder named Patterns
export { ExampleComponent, Patterns };
Patterns.js can look like this,
import React from 'react'
const Patterns = () => {
return <div>Patterns Component sample</div>
}
export default Patterns;
ExampleComponent.js can look like this,
import React from 'react'
import styles from './styles.module.css'
const ExampleComponent = ({ text }) => {
return <div className={styles.test}>Example Component: {text}</div>
}
export default ExampleComponent;
In the consumer level (in this case, example folder), in any jsx, like App.js you can refer those exported components like,
import { ExampleComponent, Patterns } from 'neo'
return (
<Patterns />
)
Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
I tried to use react dnd in my react web application. I create a js file call withDnDContext.js. When I compile it, I received an error 'react-dnd' does not contain an export named 'DragDropContext'. My react-dnd version is latest one 9.3.2
This is my withDnDContext.js
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
export default DragDropContext(HTML5Backend);
Anyone know how to solve this?
If you use the latest version of react dnd, DragDropContext has been replaced with DndContext. Please see React-DnD V8
My top component looks like this;
import { React } from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
export default class MyApp {
render() {
return (
<DndProvider backend={HTML5Backend}>
<MyComp />
</DndProvider>
);
}
}
The documentation or overview could be really helpful!
Wrapping HTML5Backend with curly braces solved the problem for me.
import { HTML5Backend } from 'react-dnd-html5-backend'
I'm trying to import gitgrapqh into React, following their demo, but I got an error, apparently load for a fraction of second la later raise an error.
App.js file
import React, { Component } from 'react';
import 'gitgraph.js';
import 'gitgraph.js/build/gitgraph.css';
export default class Gitgraph extends Component {
constructor(props) {
super(props);
this.$gitgraph = React.createRef();
}
componentDidMount() {
const gitgraph = new GitGraph({ canvas: this.$gitgraph.current });
const master = gitgraph
.branch("master")
.commit()
.commit();
gitgraph
.branch("dev")
.commit()
.commit()
.merge(master);
}
render() {
return <canvas ref={this.$gitgraph} />;
}
}
But I got this error.
Failed to compile
./src/App.js
Line 13: 'GitGraph' is not defined no-undef
Search for the keywords to learn more about each error.
Someone can help me.
In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript
files - so-called modules. You do this, to keep each file/ module focused and manageable.
To still access functionality in another file, you need export (to make it available) and import (to get access) statements.
You got two different types of
exports: default (unnamed) and named exports:
default => export default ...;
named => export const someData = ...;
example#01:
#Person.js
const person = { name: "firstName" }'
export default person;
Now you should use import Person from 'Person'
example#02:
#clean.js
export const clean = () => ...}
then you should use import { clean } from 'clean'
default export:
import person from './person';
import prs from './person';
named export:
import { smth } from './utility';
import { smth as Smth } from './utility';
import * as bundled from './utility';
So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend.
When I add the attribute to the class I get this error:
Uncaught Error: Expected the backend to be a function or an ES6 module
exporting a default function.
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserHowView extends React.Component {
...
..
}
const mapStateToProps = state => ({
...
});
export default connect(mapStateToProps)(userShowView);
What am I doing wrong so far?
One of the examples for the library has this:
#DragDropContext(HTML5Backend)
export default class Container extends Component {
But my definition and export are separate.
This library has a breaking change since v11.0.0 breaking changes:
from
import HTML5Backend from 'react-dnd-html5-backend
to
import { HTML5Backend } from 'react-dnd-html5-backend
If you are still encountering the issue, please check this issue in repo
and make sure you're not including DragDropContext in your render function
Remove the braces from the HTML5Backend import statement. Replace with the following:
import HTML5Backend from 'react-dnd-html5-backend';
This has resolved the issue for me.