Would you kindly explain how the import marked in red can work? For me, it simply does not. (they are using it in react-boilerplate template)
Please excuse me, I am not an experienced JS developer.
The export is done as a default array of functions (as below).
// Bootstrap sagas
export default [
githubData,
];
The import is done in standard way in a test file as below.
import { githubData } from '../sagas';
My point is, if the githubData was exported as "export function* githubData" I think there would be no problem. However I am not sure how importing member of default array of functions can work in this way. Maybe I have incompatible version of babel, node?
if the githubData was exported as export function* githubData i think there would be no problem
Well, there is no problem because that's exactly how it is exported. Being also a part of the default-exported value doesn't stop it from working.
Related
I have strange problem possibly bug with importing JSON file as object into my application. I do have:
"compilerOptions": {
"resolveJsonModule": true,
"esModuleInterop": true,
}
Looking at the s̶o̶u̶r̶c̶e̶ ̶a̶n̶d̶ source maps JSON is being imported and even when I look at debugger:
But as you see debugger is able to see contents of this var/JSON while app claims it's undefined. Can it be building cache problem?
I import JSON file like:
import * as eventsDB from './events.json';
and for debugging purpose I export it like this:
export const jsonDB = eventsDB;
EDIT: After checking carefuly build whole reducer where I import and export JSON was ommited but for some reason everything was in Source-Maps, I'm currently searching for possible reason.
Guys I've located the problem. I think this might be helpful, so I want to share the solution. As I said in reducer named events (file name events.ts) I've imported the JSON:
import * as eventsDB from './events.json';
And some of you might already noticed the problem. Even when I included the extension, for some reason there was name conflict so under events reducer
import events from '../reducers/events';
I actually had the JSON. And under JSON I had undefined. Still the mistery is why debugger saw the contents of the variable correctly.
I do my development using modern JS (ES6) which means modules.
Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.
What are my options here?
You have a couple options.
First and foremost, edit the code.
You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.
The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:
// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"
let LineSegments2 = function ( geometry, material ) {
// ...
}
export default LineSegments2
// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"
// and so on...
Your other option is to use a bundler with an export loader.
Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:
import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"
I'm trying to diagnose a problem thats recently arisen for us, after upgrading our suppported browser (~40 -> ~60)
We have this effective code in an external (now unsupported) library, that sits in an iffe:
(function(window, undefined){
# external library
if(!window.terribleIdea){
window.terribleIdea = {}
}
<some code>
if(!window.terribleIdea.config.url){
window.terribleIdea.config.url = 'the wrong url'
}
localStorage.set('somethingImportant', getStuff(window.terribleIdea.config.url))
})( window );
Now we did have a bootstap type file that looked like this:
# appBootstrapper.js
import applyConfig from './app/configApplier';
import ALL_ANGULAR_MODULES from './app'; # contains angular.module set up for
# app and every dependency
fetchConfig()
.then(applyConfig)
.then () => angular.bootstrap(document, [ALL_ANGULAR_MODULES])
.catch( error => {
alert(`It borked: ${error.message}`)
});
Amongst other things applyConfig does:
window.terribleIdea = {
config: {
url: 'not terrible'
}
}
What now happens, is that the import statement of ALL_ANGULAR_MODULES ends up running the code in the external library, and setting local storage. What we think used to happen is that it was only called on angular.bootstrap running.
Now what I need to find out is, has the functionality of the import statement changed in a later version of chrome, or has it always been running this code and gone unnoticed?
All I can find is references to Dynamic Imports, and the order of scripts running, in <script></script> tags.
It is hard to debug without access to the project (see discussion in comments above). Here are some possibilities worth exploring while encountering such issues. It is of course possible that it was like this all along.
Change in the bundler configuration. Webpack accepts entries as arrays, and order matters in them.
Change in the way the bundler/dependency manager reacts to dynamic imports
Change in the way your application loads its dependency during the its bootstrap phase. It is not (imo) angular specific, as many app use some kind of "componentization" which translates in files executed in a different order they are imported (as they may only export constructors or whatnot).
I would like to create a global function called "translate". As i know, i can define global variables and their values in the app.module.ts file. So i tried following code:
export function translate(string) {
// i am not sure if it would make a difference if i would use var
let ts = new TranslateService();
return ts.get(string).subscribe(res=>{
return res;
});
}
So maybe i try to use the wrong class, maybe the mistake is somewhere else. I use the ngx-translate Module (and it works great). Instead of always declaring to use the "TranslateService" (in every class where a translation is needed), i want to have a global function, where i can access the translations via only a function (i do not want to call another class...). You can see the code that i do like to use in the global function at the very end of the link (ngx-translate)
Thanks in advance.
global means for me, that something is accessible everywhere in the project.
I think thats a very bad idea, even if you get it to work somehow by some messy hack thats not the way this is intended to work.
TranslateService is already a service you can inject in every class you need it. And injecting a service using Angulars dependency injection is the intended way to use it. If you are afraid that there will be multiple translate services in the end - don't worry, Angulars dependency injection system takes care of that.
I guess you want to do this because you always have to write public translate: TranslateService in your constructor. But if you export a function in your app.module you have to import it again in your class, so you will have to write import { translate } from 'path/to/app.module/translate'; instead every time.
I am trying to bulid a simple app using Vue / Vuex starting from vue-cli webpack template.
The app works fine but I would like to add the possibility to load and save the state in a JSON file.
Is there a best practice in order to do that ?
My first idea was to read the data into the file store.js
import Vue from 'vue'
import Vuex from 'vuex'
import fs from 'fs'
// Read file
let loaded = null
fs.readFile('./data.json', 'utf8', (err, data) => {
if (err) throw err;
loaded = data;
})
Vue.use(Vuex)
const state = {
notes: loaded,
activeNote: {}
}
...
...
But I am getting error when I try to import fs module.
There are great plugins available for exactly what you're trying to do.
Basically, having Vuex and defining a state is he way to go, however, you should do it a little different.
Take a look at this plugin:
https://github.com/robinvdvleuten/vuex-persistedstate
Since you're using Webpack it is pretty easy to install, use yarn add vuex-persistedstate for example..
Then, you import the plugin using import createPersistedState from 'vuex-persistedState'.
Now you change up your store a little bit, doing something like this:
export const store = new Vuex.Store({
state: {
yourVar: 0
},
mutations: {
changeValue (state, number) {
state.yourVar += number
}
},
plugins: [createPersistedState()]
})
That's basically it. All you need to do is add the plugin line to your Vuex store and all variable data inside your state will be saved in the browsers localStorage by default. Of course, you can read through the GitHub repository to see how you can use sessions, cookies etc, but that should work just fine.
The important part here are your mutations, since everything you want to do with your store variables HAVE to be declared by a mutation function.
If you try to modify your stored variables using ordinary functions, you'll get some warnings. The reason behind this is to ensure that no unexpected mutation of your data will take place, so you have to explicitly define what you want your program to accept in order to change your variables.
Also, using the export const store before your new Vuex.Store allows you to import that state in any of your Vue components and call the mutation functions out of there as well, using store.commit('changeValue', number).
I hope this answer helps you out a little bit, I was struggling with the exact same problem about 2 days ago and this is working like a charm ;)