Expected behaviour
Hello I'd like to import Highstock lib using RequireJs AMD Module, as recommended in readme.md in github Highcharts/Highstock: GitHub Highcharts
Example to import Highchart in documentation:
require.config({
packages: [
{
name: "highcharts",
main: "highcharts",
},
],
paths: {
// Change this to your server if you do not wish to use our CDN.
highcharts: "https://code.highcharts.com",
},
});
Demos:
Import AMD Highcharts
Import AMD multiple version Highchart
Actual behaviour
If I try use highstock.js As the example below, it won´t works:
/**
* Tell RequireJS how and where to search for the highcharts package
*/
require.config({
packages: [
{
name: "highcharts",
main: "highcharts",
},
],
paths: {
highcharts: `${libPath}/highstock/9.1.2`,
},
});
define(["highcharts", "highcharts/modules/exporting", "highcharts/highcharts-more"], function (Highcharts) {
"use strict";
//highstock code here...
});
To make this work it's needed change the highstock.js file name to highcharts.js due to the name defined in lib highstock:
"highcharts/highcharts"
//Lib Highstock content
define("highcharts/highcharts", function () {
return factory(root);
});
As I can´t change the name:
{
name: "highcharts",
main: "highcharts",
}
//to
{
name: "highstock",
main: "highstock",
}
The requireJs never will find the highstock.js file, to do so, I have to change the file name to highcharts.js.
I appreciate any support.
I was calling by Highstock in wrong way:
/**
* Tell RequireJS how and where to search for the highcharts package
*/
require.config({
packages: [
{
name: "highcharts",
main: "highcharts",
},
],
The correct way to call by highstock lib is:
packages: [
{
name: "highcharts",
main: "highstock",
},
Related
I am trying to add new projects to my GatsbyJS site using Netlify CMS. The problem is that my code is using relative path to reach the thumb images but when uploading a new thumb image from netlify it saves it as an absolute path. This is causing a problem and I dont understand what it is exactly. Is Gatsby not able to read the absolute path that is being received from the CMS? If that could be the problem, how could i make that the CMS gives me a relative path?
Any help will be much appreciated :)
This is the path in my markdown files:
thumb: ../images/thumbs/memory.png
This is the path created by the CMS:
/src/images/thumbs/img_2370.jpg
This is my config.yml
backend:
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
publish_mode: editorial_workflow
media_folder: "src/images/thumbs"
collections:
- name: "projects" # Used in routes, e.g., /admin/collections/blog
label: "Projects" # Used in the UI
folder: "src/projects" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- { label: "Title", name: "title", widget: "string" }
- { label: "Stack", name: "stack", widget: "string" }
- { label: "Slug", name: "slug", widget: "string" }
- { label: "Url", name: "url", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" }
- { label: "Thumb", name: "thumb", widget: "image" }
- { label: "Body", name: "body", widget: "markdown" }
This is a "known issue" that Netlify should fix soon (it has been 2 years since it has been spotted so far). Netlify doesn't support relative paths hence the image paths are broken.
Consider using the following solutions:
gatsby-plugin-netlify-cms-paths adding the following in your gatsby-config.js:
module.exports = {
plugins: [
// Including in your Gatsby plugins will transform any paths in your frontmatter
`gatsby-plugin-netlify-cms-paths`,
// Including in your Remark plugins will transform any paths in your markdown body
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-plugin-netlify-cms-paths`,
],
},
},
],
}
gatsby-remark-relative-images-v2 by adding:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
// gatsby-remark-relative-images-v2 must
// go before gatsby-remark-images
{
resolve: `gatsby-remark-relative-images-v2`,
},
{
resolve: `gatsby-remark-images`,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 590,
},
},
],
},
},
Check that media_folder and public_folder are properly configured:
media_folder: src/images/thumbs
public_folder: /images/thumbs
Note the starting slash in the public_folder and double-check that those are the correct ones.
Running webpacker 3.5.5 (both the gem and package). This is mostly working, but in IE11 the app is broken because arrow functions do not appear to be transformed. However, inspecting the minified code it seems like the only place arrow functions aren't transformed are inside my vue components.
I think this is because my babel class properties plugin is not applying to my Vue loader somehow, but I haven't been able to come up with a solution.
Here's my .babelrc
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"IE 11"
],
"uglify": true
},
"useBuiltIns": true
}
]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
[
"transform-class-properties",
{
"spec": true
}
]
],
"env": {
"test": {
"presets": ["es2015"]
}
}
}
And here's the entirety of my environment.js file that modifies the webpack environment that webpacker ships with (vue loader is at the bottom).
const { environment } = require('#rails/webpacker');
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}]
});
const webpack = require('webpack');
// append some global plugins
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
axios: 'axios',
moment: 'moment-timezone',
_: 'lodash'
}));
// Necesary configuration for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
'VueLoaderPlugin',
new VueLoaderPlugin()
);
environment.loaders.append('vue', {
test: /\.vue$/,
loader: 'vue-loader'
});
module.exports = environment;
Edit for more info: Here is the entry point to my pack called 'wrestling'
import 'babel-polyfill';
import 'wrestling';
Then in wrestling.js...
import './styles/wrestling'
import Rails from 'rails-ujs'
Rails.start();
import wrestlingSetup from './wrestlingSetup'
wrestlingSetup();
WrestlingSetup contains the actual references to the vue files. I've cut down the file to show what a single vue import looks like within the file. All the rest are essentially the same.
import Vue from 'vue/dist/vue.esm'
// Redacted a bunch of imports, but they all look like this oen
import WrestlerCreate from './vue/wrestler_create.vue'
export default function() {
document.addEventListener('DOMContentLoaded', () => {
axiosSetup();
const app = new Vue({
el: '#app',
components: {
// Other vue components here that I've removed for simplicity
WrestlerCreate,
}
})
});
}
Here's an actual example of the Vue component
<template>
<div role="form">
<!-- other form elements -->
</div>
</template>
<script>
export default {
name: 'wrestler-create',
props: [
],
// This does not get transformed by babel
data() {
return {
loading: false,
error: false,
errorMessage: "Error, please try again later or contact support.",
first_name: '',
last_name: '',
weight_class: '',
academic_class: ''
}
},
methods: {
// removed for simplicity
}
}
</script>
For clarify sake:
Please use function() for data. I find function() gives me less trouble than arrow functions.
export default {
data: function() {
return {
message: "Hello something!",
secondMessage: "Hello world!"
};
}
}
If you really wish to use arrow function, you can write:
export default {
data: () => {
return {
message: "Hello something!",
secondMessage: "Hello world!"
};
}
}
I can't figure out how to import html files with webpack 2! I am using angular 1.6.0 and typescript.
I would like to import a template and use it as a router state template:
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import theView from './theView.html';
import appComp from './app.component';
export default angular
.module('app.main', [uiRouter])
.component('myAppComp', appComp)
.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$locationProvider.hashPrefix('');
$stateProvider
.state('main', {
url: '/main',
template: '<p>main state template</p>'
})
.state('main.cardList', {
url: '/cardList',
template: theView
});
}
It gives:
error:
ERROR in ./src/app/module.ts
(3,22): error TS2307: Cannot find module './theView.html'.
What (wierd) I don't understand is if I import the template same as above and use it in a component template, it does gives same error "cannot find module './theView.html'" but it works!
This works (with ts compilation error):
import template from './theView.html';
.component(appComp, {
template
})
webpack.config:
module.exports = {
entry: './src/app/module.ts',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
}
]
},
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
}
};
What is going on here..?
For the people who can come across this problem in the future; it is solved as follows:
declare const require: any;
$stateProvider
.state('main.cardList', {
url: '/cardList',
template: require('./theView.html').default
});
Credits to #yadejo for the answer above!
I'm building my app using Webpack 2. I'm using PostCSS 2 for CSS modules. Here is my CSS importing configuration for Webpack:
{
test: /\.css$/,
exclude: /(node_modules)/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
plugins: loader => [
require("postcss-import")({
path: './js',
addDependencyTo: webpack,
}),
require('postcss-cssnext')(),
],
},
},
],
},
Now, the problem is, that this generates really ugly class names. Example using React:
import React, {Component} from 'react';
import styles from './Element.css';
export default class Element extends Component{
render(){
return (
<div className={styles.myElement}>This is an example.</div>
);
}
}
Renders into:
<div class="_1DHVkmCxFFQMFYac-L_MIg">This is an example.</div>
Now, this is fine in production, but in development, something like class="myElement--_1DHVkmCxFFQMFYac-L_MIg" would be a lot nicer. I found a GitHub issue discussing this, but as I'm new to Webpack, I couldn't figure out how to implement their suggestion. Whatever I tried resulted in an error, where Webpack couldn't resolve the module.
I tried adding localIdentName: '[local]--[hash:base64:5]' to postcss-loader options, but that did nothing.
So, how do I retain the original class name in the generated class name?
Adding this line to the css-loader resolved it:
localIdentName: debug ? '[name]_[local]___[hash:base64:10]' : undefined,
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
minimize: false, //this line!!
},
},
you can use minimize: !isDebug and isDebug is a bool to know if you are debugging or not. but setting to false should leave "nice names"
I am trying to use ng2-highcharts in my application. But after importing the necessary classes using the statement
import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';**
if I try to specify these classes in the array of directives in my component (directives: [Ng2Highcharts]), I am getting the following error in my console.
[TypeError: require is not a function][1]
My System.config looks as follows
System.config
Can someone tell me what I am missing here ?
You need to define 'ng2-highchart' within your SystemJS configuration:
<script>
System.config({
map: {
'ng2-highchart': 'node_modules/ng2-highchart'
},
(...)
});
</script>
See this question for more details:
How to use highcharts with angular 2?
Here is my candlestick sample... see if this helps.
import { Component } from '#angular/core';
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'high-chart',
directives: [CHART_DIRECTIVES],
providers: [JSONP_PROVIDERS],
template: `
<h2> This is HighChart CandleStick component </h2>
<chart type="StockChart" [options]="options3"></chart>
`
})
export class HighChartsComponent {
options3: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options3 = {
title : { text : 'CandleSticks' },
rangeSelector : {
selected : 1
},
series : [{
type : 'candlestick',
name : 'CandleSticks',
data : res.json(),
dataGrouping : {
units : [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
},
tooltip: {
valueDecimals: 2
}
}]
};
});
}
Remove format: 'register' from you packages. This will help it detect the right format. Or you can add the format as follows:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
"node_modules/ng2-highcharts": {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
},
paths: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
}
});