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"
Related
I've created a big sass stylesheet with all sorts of colors. Following vite's guide for sass, I got sass working in my components. Now I'd like to use these external variables in my Svelte components' stylesheets as well.
So far I've tried:
#use "./test.sass" // along with "./test"
p {
color: $testColor
}
As well as
#import url("./test.sass") // along with "./test"
// ... same as above
It gives me an error Error: Undefined variable. And my variable is defined properly in test.sass
#use wraps imported variables in a namespace, so instead of $testColor you have to explicitly state that these variables come from a module.
#use "./test.sass"
p {
color: test.$testColor
}
or
#use "./test.sass" as *
p {
color: $testColor
}
I am writing library and i have exports like this:
export function a(){ ... }
And using these functions as graphs.a()
After i added
import * as d3 from 'd3'
if i use library with
<script src="graphs.js"></script>
all is ok and module have functions, but when i use in node.js
import * as graphs from './graphs.js'
global.graphs = graphs
module 'graphs' contains no functions
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}
Symbol(Symbol.toStringTag): "Module"
__esModule: true
__proto__: Object
Module using <script>
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}
address_graph: (...)
address_sankey: (...)
query: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get address_graph: ƒ ()
get address_sankey: ƒ ()
get query: ƒ ()
__proto__: Object
The import syntax only works if you're using a module bundler like Webpack or Rollup, or if you are using <script type="module">. What is your build system like?
If you could share an example repository that reproduces the behavior, it would help folks be able to debug.
Typically with Webpack, the build injects a <script> tag automatically into the HTML that points to the built bundle, so you should not need to include the <script> tag yourself. If you do, it might introduce conflicts or not work correctly.
If you want to import the library in Node, it needs to be built to a CommonJS module (that should be an output option of Webpack).
So, hi. I've been struggling for 4 hours to add at least two different Vue components to my app.js file which is located in js folder along with these vue components in my Laravel project.
I couldn't find any real solution on the internet since it didn't fix my problem.
I have tried something like
Vue.component('signature-element', require('./components/Signature.vue').default);
under the other component which works perfectly, but the problem is I can't make the app work with 2 or more components.
I've tried installing vue-router via npm and configuring a router but it didn't work too, somehow whole JS stopped without any errors in the command log in browser or in Mix.
I've also tried calling the import function instead of the first one I've mentioned, for example:
const componentVar = import ...;
inside vue:
new Vue({
components: { first, componentVar },
mounted() {}
});
But this also did not work unfortunately.
In the second example you're trying to registrate locally your components.
If you want to do this you can do it like this:
import first from './components/first'
import componentVar from './components/componentVar'
new Vue({
el: '#app',
components: {
'first': first,
'componentVar': componentVar
}
})
Instead if you want to use the first example this means you want to register your components globally. That means they can be used in the template of any root Vue instance (new Vue) created after registration
Example:
Vue.component('signature-element', { /* ... */ })
new Vue({ el: '#app' })
Then in your view
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
In my webpack config:
resolve: {
alias: {
'three': path.resolve('node_modules', 'three/build/three.js'),
'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),
'OBJLoader': path.resolve('node_modules', 'three/examples/js/loaders/OBJLoader.js')
}
In my module:
import * as THREE from 'three' // if I do import THREE from 'three' it fails with three being undefined
import OrbitControls from 'OrbitControls'
import OBJLoader from 'OBJLoader'
If I use import * THREE from 'three' all is well and I can get THREE to be defined and complete the cube tutorial without hassle. If I change to import * as THREE from 'three' three.js is loaded - so that's not the problem?
How do I get the OrbitControls and the OBJLoader to load? When I try to get them to load, I get Uncaught ReferenceError: THREE is not defined(…) within OrbitControls.js: THREE.OrbitControls = function ( object, domElement ) { THREE is undefined.
So there's a problem with the packaging of the modules? I installed this from https://www.npmjs.com/package/three
So what gives? Is it a problem how Three.js is packaged on npm or is it a misconfiguration in my webpack.config? Is there a way to tell webpack "let's package the root three.js file, and then package the OrbitControls.js file"?
I needed to install the three-orbit-controls and the three-obj-loader via npm.
Then in my module, it was simply requiring them:
var OBJLoader = require('three-obj-loader')(THREE)
var OrbitControls = require('three-orbit-controls')(THREE)
All set!
I am writing a test for a React component that uses react-router. I am using Mocha with Chai and Chai-jQuery.
My tests work fine, until I import a component from react-router into a component (e.g. Link). At this point, I get the following error:
ReferenceError: navigator is not defined
at Object.supportsHistory (/Users/nico/google-drive/code/agathos/client/node_modules/history/lib/DOMUtils.js:61:12)
I used to get a similar error with react-bootstrap until I updated to react-bootstrap v0.29.3. I have the most recent version of react-router v2.4.0 (and history v2.1.1). But the problem persists.
The only solution I have found is to change node_modules/history/lib/DOMUtils: navigator into window.navigator. This is a hack though, and not a good solution.
I think the problem is with react-router, but I don't have a solution.
Just in case, here is my test-helper.js.
import jquery from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
// set up a testing environment to run like a browser in the command line
// create a fake browser and html doc
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
// prevent jquery defaulting to the dom by giving it access to the global.window
const $ = jquery(window);
// build renderComponent function that should render a React class
function renderComponent(ComponentClass, props = {}, appState = {}) {
const componentInstance = TestUtils.renderIntoDocument(
<Provider store={createStore(reducers, appState)}>
<ComponentClass {...props} />
</Provider>
);
// produces html
return $(ReactDOM.findDOMNode(componentInstance));
}
//build a helper for simulating events
// $.fn allows you to add a custom function to your jquery library
$.fn.simulate = function(eventName, value) {
if (value) {
// `this` allows you to access the object appended to
// `val()` is a jquery function that sets the value of selected html element
this.val(value);
}
// the [] are object method selectors, which allow you to access e.g. Simulate.change
TestUtils.Simulate[eventName](this[0]);
};
// set up chai jquery
chaiJquery(chai, chai.util, $);
export {renderComponent, expect};
It seems that react-router assumes navigator is in the global scope.
To resolve this error, you should add navigator to the global scope in your test setup phase:
global.navigator = {
userAgent: 'node.js'
};