I'm trying to import amcharts' parts in the vue component like that:
import * as am4core from "#amcharts/amcharts4/core";
import * as am4charts from "#amcharts/amcharts4/charts";
but it breaks styles of the site: final css file contains only /* (ignored) *//* (ignored) *//* (ignored) */ instead of the actual styles. I've found a thread on the github with the same problem, but it was close w/o any resolution.
Could anyone help me to figure out the reason of this behavior and the actual fix?
amcharts: 4.10.5; Webpack: 4.43.0
So, I've found a solution for this.
You need to remove those generated files (if they were created):
public/vendors~xlsx.js
public/xlsx.js
public/vendors~pdfmake.js
public/vendors~canvg.js
Add this to the webpack configuration (for laravel-mix add this inside the mix.webpackConfig({...}) construction):
{
externals: function (context, request, callback) {
if (/xlsx|canvg|pdfmake/.test(request)) {
return callback(null, "commonjs " + request);
}
callback();
}
}
More details are here.
Related
I'm getting an error when using a custom command I've added to my /support/commands.js file.
What is worth mentioning, all others custom commands I've added work fine.
I've followed some other solutions others have mentioned on this forum but none have helped.
I've restarted both VSCode and Cypress.io to no avail.
My cypress.json file is as follows (I'm missing my projectId, where do I find it?):
{
"supportFile": "cypress/support/index.js"
}
Cypress code:
// verify the stepper header
cy.verifyStepperHeader()
custom command:
// verify the stepper header
Cypress.Commands.add('verifyStepperHeader', () => {
cy.get('.stepper-header').scrollIntoView()
.should('be.visible').within(() => {
cy.contains('User Targets').should('be.visible')
cy.contains('Data Upload').should('be.visible')
cy.contains('Data Quality').should('be.visible')
cy.contains('Sensor Mapping').should('be.visible')
cy.contains('Tuning Mode').should('be.visible')
cy.contains('Tuning').should('be.visible')
cy.contains('Tuning Results').should('be.visible')
cy.contains('Validation').should('be.visible')
cy.contains('Validation Results').should('be.visible')
cy.contains('Summary').should('be.visible')
})
})
I've also got
// Import commands.js using ES2015 syntax:
import './commands'
in my index.js file which I think is the default.
I am using Laravel with Vue.js and Webpack / Laravel Mix.
I have Single File Components which should make use of Mixins.
The folder structure looks like this:
/app.js
/vue-components/Component.vue
/mixins/api/common.js
common.js defines a mixin like so:
export default {
// all content goes here
}
And when I import it from app.js and console.log it, it shows the data:
import industries from "./mixins/api/common";
console.log(industries); // this shows the content
Vue.component(
'some-component',
require("./vue-components/Component.vue")
);
Within Component.vue I use mixins: [ industries ], and that gives me the following error:
Component.vue?bb93:73 Uncaught ReferenceError: industries is not defined
Question 1:
Is it not possible to declare mixins globally and reference them from within a component?
To solve the issue I tried importing the mixin directly within the component instead of the global app.js file.
But import industries from "./mixins/api/common"; within Component.vue throws the following error while trying to compile with npm run:
This relative module was not found:
* ./mixins/api/common in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"babel-plugin-syntax-dynamic-import","webpack-async-module-name"],"env":{"development":{"compact":false}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/vue-components/Component.vue
Question 2:
If I have to import the mixin from within the Single File Components, what should the path look like?
As in Vue Document, You can declare mixin globally
//- build your mixin
const mixin = {
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
}
Vue.mixin(mixin)
new Vue({
myOption: 'hello!'
})
// "hello!"
You can also import mixin to use for each component.
In above your Component.vue, import path is not correct.
You should do import industries from "../mixins/api/common"
I would like to globally append a specific selector to all CSS selector used in my application.
I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.
I don't want to edit all my classname within jsx files. I just want to append this specific selector at build time.
Is there a loader to achieve this? Or any other solution...
What I actually have:
.myClass {
...
&--blue { ... }
}
What I want after Webpack transpilation:
.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }
Thanks
Gautier
PS: The reason I need this feature is to avoid CSS selector collision with the Website I'm integrating my application. I don't wan't to manually edit all my scss files to append the selector.
this should be solvable by in you main sass file:
.specificClass {
#import 'variables';
#import 'fonts';
// ... do more imports
}
i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.
I am new to using gulp-sass and sass\scss structure in general, so bear with me!
I have a scss file in which I want to import some partials.
I have a styles folder in which lives my main scss file and a partials sub folder which contains a couple of files I wish to import in.
So at the top of my main.scss I have the typical:
#import 'partials/main_menu';
#import 'partials/main_usermenu';
Here are the relevant pieces of my gulp file:
var paths = {
scss_files:'./src/assets/styles/**/*.scss'
}
gulp.task('compile_sass', function () {
return gulp.src(paths.scss_files, {base:'src'})
.pipe(gulp.dest(paths.dist))
.on('error', gutil.log)
.pipe(sass({outputStyle: 'compressed'})
.on('error', sass.logError))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.dist))
});
When my gulp task runs, I get an error saying my main_menu partial was not found or unreadable and hence it fails to import.
Am I missing something in my task, e.g. is there some gulp-sass option I should be using or should it just work?
Thanks
After viewing this related question I was able to solve a similar problem I was having.
I believe if you add the 'includePath' option to the sass() function call that contains the parent path to your partials directory the error will go away.
i.e. something like
.pipe(sass({includePath: ['parent/PathTo/Partials'], outputStyle: 'compressed'})