Solvedvue chartjs Standalone chartjs build (don't include moment.js)

Expected Behavior

Moment.js shouldn't be included

Actual Behavior

Moment.js appears on my package.lock file and gets bundled in my build

Environment

  • vue.js version: 2.3.3
  • vue-chart.js version: 2.6.0
  • npm version: 5.0.3
  • webpack: 2.5.1

Can you help me figure out how I configure this correctly so that I only get the standalone chart.js build: https://github.com/chartjs/Chart.js/blob/3e94b9431a5b3d6e4bfbfd6a2339a350999b3292/docs/getting-started/installation.md . Moment.js is a very heavy package and if I can avoid including it in my site I'll gladly do that. The documentation makes it sound like treeshaking can do this but I'm just using the vue webpack cli and it's still coming through.

Thanks

17 Answers

โœ”๏ธAccepted Answer

Oh damn, really? So I'm stuck with having moment.js in my project even though I never use it. It's literally the largest chunk in my whole project. Thanks for your answer though!

Update:
I was able to exclude it by using

vue.config.js

configureWebpack: {
    externals: {
        moment: 'moment'
    }
}

I don't know if it has any other impacts besides moment.js is gone and my full project shrunk by about 250kb.

Other Answers:

That is because if you import Chart from 'chart.js' you will get the bundled one (with moment.js).
There are some issues at chart.js to kill moment.js and replace it with date-fns. However I don't know if it will happend.

I would love to change that, however it would be confusing to break with the standard behaviour of the chart.js npm package. So the solution needs to be on user side right now.

๐Ÿ’ Solution

You need to add an alias to your webpack config, so it will grab the standalone version

webpack.config.js

resolve: {
    alias: {
      'chart.js': 'chart.js/dist/Chart.js'
    }
}

This way it will grab the standalone version.

xj3Ie4rLNuLSM

Related Issues:

35
vue chartjs [Vue warn]: Invalid prop: type check failed for prop "chartData"
Oh now I understand Well the issue is that the prop is defined as an object in the mixin ...
15
vue chartjs Standalone chartjs build (don't include moment.js)
Oh damn really? So I'm stuck with having moment.js in my project even though I never use it It's lit...
3
vue chartjs Loading data from server and displaying
Hi @cdubant I recently had to implement something like this and I was kinda stuck ...
673
helm User "system:serviceaccount:kube-system:default" cannot get namespaces in the namespace "default"
That's because you don't have the permission to deploy tiller add an account for it: Console output:...
513
helm Error: no available release name found
Per #2224 (comment) the following commands resolved the error for me: Hi folks i just don't have any...
497
helm unable to retrieve the complete list of server APIs
For anyone who hits this it's caused by api-services that no longer have backends running.. In my ca...
290
helm helm upgrade --install no longer works
I thought I was experiencing the same problem but it turned out I just had an old delete (but not pu...
202
helm system:default not sufficient for helm, but works for kubectl
Per jayunit100 's advice add role cluster-admin to serviceaccount kube-system:default works for me b...
180
helm Values not exist with loop over a range
@worldsayshi For what it's worth I just ran into this same issue and it turns out there's a relevant...
150
helm Support for using {{ values }} within values.yaml
YAML also provides a handy feature called anchors which let you easily duplicate content across your...
145
helm Accessing values of the subchart with dash in the name
Use the index template function to access a value with a '-' in the name: {{ index .Values gitlab-ru...
144
helm Helm init fails on Kubernetes 1.16.0
The following sed works-for-me: The issue with @mattymo solution (using kubectl patch --local) is th...
135
helm Scoping releases names to namespaces
Explicitly It would be really nice if I could do the same things as I can do with services and other...
118
helm Error converting YAML to JSON could not find expected ':'
For what it's worth I have just run into very curious bug with (.Files.Glob configOverrides/*).AsCon...
106
helm Error: UPGRADE FAILED: cannot re-use a name that is still in use
For those stuck when initial deployment fails After you fix your chart but still cannot deploy with ...
94
react chartjs 2 Mix chart, labels.slice is not a function error
After fiddling with this for a little while I found a way to fix the example It is very easy and I d...
90
helm Error: UPGRADE FAILED: no resource with the name "anything_goes" found
Completely removing release from Helm via helm delete release works but it is not a viable solution ...
88
helm Warning after upgrading to 3.3.3
To close out this ticket.. Your ~/.kube/config should only be readable by the current user not the g...
85
ngx charts How to make width responsive (100%)
I solved it by putting it inside a div with css --> display: grid; // html // css #pie-chart-parent ...
78
helm Connection refused error when issuing helm install command
@cookkkie The service account needs to have a clusterRole: Admin default does not have a cluster adm...
77
react chartjs 2 Defaults creating error
got the same issue solve it by change the chart.js: ^2.9.4 in your package.json then delete node mod...
70
helm Add 'helm install --app-version' command/versioning a chart against an app version
Any update on this It seems PR from @Eraac does what is requested As @TD-4242 mentioned we also run ...
60
Chart.js Cannot read property 'transition' of null
This error occurs when you just initialized the graph and overwrite the dataset almost immediately a...
51
helm Error when updating Statefulsets
I had a similar error when adding a 2nd container (k8s 1.7.8) The first time I'm updating a stateful...
48
helm Using .Chart.name in range function
Just for reference here in case you are landing to this issue the documented way is working ...
44
helm Unable to perform helm upgrade due to resource conflict
This doesn't really help because I still need to manually remove old resources Output of helm versio...
43
helm Naming convention of Release and Chart
We ran into the exact same issue Usually the chart name is your app name I'm having difficulties und...
41
Chart.js Padding inside the canvas with a line chart without scale
Adding the layout padding works for me Hello ...
39
helm Helm3: No 'init', doesn't use existing ~/.helm
Found this in another issue: ./helm version version.BuildInfo{Version:v3.0.0-beta.1 GitCommit:f76b5f...
37
helm app-name has no deployed releases
Cannot agree more Our production is experiencing the same error So deleting the chart is not an opti...
35
Chart.js Do not require moment.js
@ciaoben @lsn793: While we wait for the much anticipated 2.8 (or 3.0?) release Expected Behavior Cha...
34
helm Error forwarding ports: error upgrading connection
Hi I have Helm install locally and Tiller on my cluster everything looks healthy but running helm in...
33
helm Release failure or error logs
helm status only shows that the release is failed not quite useful for debugging helm install will p...
32
Chart.js HTML legend example
@sensaetions The default generateLegend() function will generate a <ul class=0-legend> for the chart...
32
helm Proposal: Allow templating in values.yaml
@alexbrand You could use the tpl function to render values that contain variables: values.yaml templ...
32
ngx charts wrong context of AxisTickFormatting methods
[xAxisTickFormatting]=xFormat // in your template guys just simple declare function like this: ...
29
helm "required" template function breaks linter
Having a default value for a required values in the charts values.yaml file defeats the whole purpos...
27
MPAndroidChart how to display dynamic labels for XAxis
There's also an IndexAxisValueFormatter class if you have a simple lookup. I am using bar chart and ...
27
helm UPGRADE FAILED: No resource with the name "" found
This is a process I use to recover from this problem (so far it has worked every time without any in...
27
helm Error: could not find a ready tiller pod
Run this command may solve your issue kubectl logs --namespace kube-system tiller-deploy-2654728925-...
26
helm helm v3.0 mapping values are not allowed in this context
I get the same error message with our SonarQube chart for OpenShift The same install works with Helm...
25
helm Secret Management in Helm
The method proposed above does not seem like it would work with helm rollback or simple helm upgrade...
25
helm Helm 2.2.3 not working properly with kubeadm 1.6.1 default RBAC rules
After running helm init When installing a cluster for the first time using kubeadm v1.6.1 the initia...
24
helm helm cant upgrade already created resources
For the benefit of the group I am using helm 2.9.1 and I want to create a namespace with an annotati...
23
Chart.js Uncaught TypeError: Cannot read property 'length' of null (vuejs + chart.js)
Oh I see <canvas>...</canvas> need to be declared before <script>...</script> ๐Ÿ‘ ...
23
helm helm upgrade fails with spec.clusterIP: Invalid value: "": field is immutable
Update! The update fails ONLY when using helm upgrade --install w/ --force Less of a blocker now. ...
22
Chart.js Display formatted times on y-axis
Hi @justjoehere Sure Hi I am trying to upgrade my graph from Chart.js v1 to v2 So far it's great a l...
22
helm example .Files.Get from documentation not working
@prein something like this will work for you I need for my project read files and combine them to on...
22
helm Helm cannot fetch values from within a repository chart
I too would like this feature We have a number of different environments Hello everyone ...