Vue reducing bundle size of fusioncharts and apexcharts - javascript

I try to reduce my vue bundle size by changing the import of vue-apexcharts and vue-fusioncharts.
this is the import of apexcharts:
import VueApexCharts from 'vue-apexcharts';
components: {
apexchart: VueApexCharts,
},
But I only use two type of charts.
And for fusioncharts:
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Widgets(FusionCharts);
FusionTheme(FusionCharts);
Vue.use(VueFusionCharts, FusionCharts);
I only use it for one chart "hbullet" and it import all the library.
fusioncharts
apexcharts
Vue version 2.6.12
Did any one know how I can import only the charts that I want to use and not all library.
Thanks.

You can use modular import with FusionCharts, here is a snippet below
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts/core';
import hbullet from 'fusioncharts/viz/hbullet';
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, hbullet);
Please note this will not work for older browsers like IE

Related

implementing cubejs with vue 5.0.6

i am trying to implement cubejs with a vue 5.0.6 project. i have read in places that it is only compatible with vue2. as soon as i install it into my vue5.0.6 project it gives error "createElement is not a function" which is originated from the code createApp(App) in main.js file.
i need to know if its compatible or not. if it is, what am i doing wrong.
i have tried using h instead of createApp as well.
import { h } from 'vue'
import App from './App.vue'
// import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import "bootstrap/dist/css/bootstrap.min.css"
// import Chart from 'chart.js'
loadFonts()
h(App)
// .use(vuetify)
// .use(Chart)
.mount('#app')
the above code gives error ".mount is not a function"
need instant help

JS React import difference bundle size

What's the difference these imports in terms of React application bundle size?
import _ from 'lodash' // then use _.get
import { get } from 'lodash'
import get from 'lodash/get'
Found correct answer I was looking for here
import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';
it only loads the needed modules (results in smaller bundler size)
https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark

Syntax to import a d3 module using webpack

I am trying to import and use a d3 module. My project uses webpack.
The function in the module (https://github.com/d3/d3-plugins/blob/master/hive/hive.js) is declared like this:
d3.hive.link = function() {
I read the following to try and get the import working: https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ but I can't seem to crack the correct syntax to both import and call the link function.
Some of the variations I have tried are:
import {link as hiveLink} from 'd3-hive';
import {hive as hiveLink} from 'd3-hive';
import * as hiveLink from 'd3-hive';
Can someone point me at the correct import syntax?
The plugin you want to import is not an ES6 module. It is not compatible with D3 v4 (see README.md). So it just modifies your global d3 variable. While the article you referenced is about D3 v4 it does not work that way.
I think it is ok to import d3 library (version 3) which will initialize your global d3:
import * as d3 from 'd3';
and after that import that plugin which will add hive object into d3:
import 'd3-hive';

Automatically import modules with the same file suffix

I am currently setting up my Redux store and importing many different reducer files. This is beginning to look messy and wanted to know if there was a way to import all modules with the same file suffix. So currently...
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
Is there a way that I can import all 'reducer.js' files instead of manually import each module separately when each of the file paths is different?
As written in the duplicate question:
If you create an extra file reducers.js, with this definition:
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
export {
reducerOne,
reducerTwo,
reducerThree,
reducerFour,
reducerFive,
reducerSix,
reducerSeven
};
Then you can use this in your main file:
import { reducerOne, reducerTwo, reducerThree, reducerFour, reducerFive, reducerSix, reducerSeven } from '../reducers.js';
You basically 'bundle' all your reducers into one file with only one path. And since it's very few syntax, automating it to create such a file is trivial.

"Import in body of module; reorder to top import/first" Across Many Files

I have the same error as this answer, except instead of it just occurring in one file it is occurring in many; once I fix it for one file, another just pops up with the same error. I've seen this answer but whenever I run react-scripts start a node_modules folder is created in my src, so that solution isn't viable.
It would be too time consuming to have to fix every file that has this error every time I compile, so how can I get rid of this error? It seems to just be an eslint issue.
you will get this error if you declare variable in between your imports,
import React from 'react';
import axios from 'axios';
const URL = process.env.REACT_APP_API_BASE;
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';
declare variables after importing everything,
import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';
const URL = process.env.REACT_APP_API_BASE;
I found this issue while I was using React.lazy in my existing project. I got this error Failed to compile. :- Import in body of module; reorder to top import/first (with create-react-app).
import React from 'react';
import SelectField from '../inputs/SelectField';
const Questions = React.lazy(() => import('./questions'))
import _ from 'lodash';
Solution:-
Only reorder the position i.e. put all import on top then react.lazy.
import React from 'react';
import SelectField from '../inputs/SelectField';
import _ from 'lodash';
const Questions = React.lazy(() => import('./questions'))
I got this same error when I added an extra semicolon ';' at the end of an import statement.
I suggest removing any extraneous semicolons. This should make the error go away.
Moving every import statement to the top of the file solves the issue.
Happened to me when I put require before import like this:
require('dotenv').config()
import React from 'react';
import ReactDOM from 'react-dom';
...
Solution: Put the require after the imports
If You are using Component Lazy loading then always put lazy load component import code below normal import code.
Correct Example
import First from './first'
const Second = React.lazy(()=>import("./Second))
Incorrect Example
const Second = React.lazy(()=>import("./Second))
import First from './first'
I came across this issue too. I found that you must import all ES6 modules at the top level of your JavaScript files."... the structure of ES6 modules is static, you can’t conditionally import or export things. That brings a variety of benefits.
This restriction is enforced syntactically by only allowing imports and exports at the top level of a module:"
From Dr. Axel Rauschmayer’s Exploring JS:
Wrong
1.
import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase"
Right
2.
import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase.js"
//this is code firebase.js
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export default {db,auth,storage};
When I change the firebase into firebase.js in Snippet 2.
My Error vanished
I had forgotten to add from.
Before:
import UpperBlock;
After:
import UpperBlock from "../components/dashboard/shared/UpperBlock";
Make sure you import well your component and then stop the server and restart it again. It worked for me.
I forgot to add {Component} after importing 'react' library to my project, this solved my issue.
Move all of your imports to the top of the file.
Even in case of a require (that is written in between import statements), this error will come.
e.g.
import 'some_module';
require('some_file');
import 'some_other_module');
This would result in an error.
You would want to do this instead:
import 'some_module';
import 'some_other_module');
require('some_file');
I was facing the same issue when I installed chat.js library in my reactJs project. I solved this issue by moving my chart.Js import to the index.js file
index.js file:
import React from "react";
import ReactDOM from "react-dom";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; <--- imported
import "./index.css";
import App from "./App";
ChartJS.register(ArcElement, Tooltip, Legend); <---- imported
If you're experiencing this error in modern versions of react(current version 18.0.0) make sure you're making all your imports before the ReactDOM.createRoot declaration.
For example, I got the error with:
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
import { Provider } from "./context";
This will result in an error. Instead, import everything before the createRoot:
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "./context";
const root = ReactDOM.createRoot(document.getElementById("root"));
This will fix the error. Simple fix but it's easy to miss
If I put double Semicolon behind the importing statement than I got "error".you can see difference between two pictures in import './index.css'; is different
For Example :-
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';;
import 'tachyons';
import {robots} from "./Robots";
import reportWebVitals from './reportWebVitals';
import CardList from './CardList';

Categories

Resources