I lately started experiencing this issue where I can not import the 'mysql' module in my component.js
export default Component.extend({
actions: {
createPost: function (newPost) {
var mysql = require('mysql');
}
}
});
This code is followed by this error:
There was an error running your app in fastboot. More info about the error:
Error: Could not find module `mysql` imported from `dummy/components/create-new-post/component`
So the file is present in api-directory/tests/dummy/app/components/create-new-post/component.js
However, I have such function present in: api-directory/server/mocks/posts.js and it seems to be working fine there when I use the same 'var mysql = require('mysql');'
I simply cannot get my head over this issue and surfed everywhere for a solution. Can anyone please assist and enlighten me on this most possibly easy solution? Thanks.
Nevermind, I'm a bloody idiot who didn't realize the difference between back-end and front-end. I injected the store service into the component and used createRecord function along with save to pass the record to the back-end where I successfully could execute the query.
Related
I am using a userFunction to query the property database in a custom Forge Viewer extension. This works great while testing the site locally using npm run serve. However, when I deploy the website to the web (which uses npm run build), the function no longer executes. The error says: SyntaxError: Function statements require a function name. This is because, according to the documentation, the function executed through executeUserFunction has to be named userFunction.
Upon further inspection I discovered that this was because of Vue & Webpack's mangling feature (executed by terser-webpack-plugin), where it renames variables and removes function names to decrease file size.
I have tried many different things, from making the function part of the extension's class to moving it to the global JS scope, but nothing helped. I also tried to exclude objects.js (which is the name of the extension I wrote) from mangling, but this didn't work either.
How do I configure terser to stop mangling this one variable?
I eventually figured out a way to do this which worked:
Add the following to vue.config.js:
module.exports = {
...
chainWebpack: config => {
config.optimization.minimizer('terser').tap(args => {
// eslint-disable-next-line no-param-reassign
args[0].terserOptions.keep_fnames = true;
return args;
});
},
};
This will prevent terser from removing function names, and will make it so userFunction still works. Weird design choice by Autodesk to require a function name, but at least it works now :)
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 have created many models in loopback for my project. And use these models with the help of "http://localhost:3000/explorer" in my browser.
These model API's are working fine. But, whenever I tried to use built-in models i.e "user" from the explorer. I got the below error:
and in the terminal. I got the below error. And terminal command automatically terminates.
I am new in the loopback. Why am I not able to use built-in models "user".
Please, help me.
Thanks in advance.
To anyone else that encounters this, I ran into this today and found this question unanswered, so I will do my best to give my explanation and findings here.
The error, roleModel.isInRole is not a function, means simply that the role model does not have a function called isInRole.
In my case, this was because another model was automatically generated from an existing database table called Role, which overrode the internal Role model of Loopback.
When the internal Role model is overridden, the isInRole function is not inherited automatically and will result in the above error.
While working through a tutorial to start learning Grails, I made a mistake and ran:
grails create-domain-class com.FooBar
instead of:
grails create-domain-class com.acme.FooBar
It was immediately obvious I had made an error so I tried the following:
Searched for a function that reverses the create-domain-class command, it seems there isn't one.
Searched for advice on the web and the consensus is that you can delete a domain class file, any associated views and tests, then to be safe run a text search for your class name in your project directory for any references you may have missed. I have done all this.
Then I ran the correct command to create com.acme.FooBar, which worked.
After this the app fails to run and reports the following error:
org.hibernate.DuplicateMappingException: duplicate import: FooBar refers to both com.acme.FooBar and com.FooBar (try using auto-import="false")
After adding the following code to com.acme.FooBar:
...
static mapping = {
autoImport false
}
...
The app now runs as expected.
However as an experienced Java developer who occasionally does refactor a package I would like to understand how to do that without causing a DuplicateMappingException or resorting to the "autoImport false" solution.
Thanks.
You shouldn't be doing
static mapping = {
autoImport false
}
As, by doing this you said that don't check for domain just by name and look up for package as well. Hence, once you do that you will have to use Fully qualified name of the class in your queries / hqls which may itch sometimes.
You should be removing the Domain completely i.e.
remove the Domain
remove the view folder creating by default with very same name and so do the controller
Now, do grails clean-all(Make it a thumb rule to use grails clean-all first for any issue unexpectedly occuring).
To be more accurate do remove target directory from your project and then do run grails run-app.
I had done very same thing many times and got it resolved by above steps.
Hope it helps.
Stack: MySQL + Express + Angular + Node and node-mysql to talk to the DB.
EDIT: I'm connectiong to a local DB and the connection works. I can't get Breeze to communicate with it.
I'm trying to get the Breeze Todo app to work with this setup but I'm getting a localhost:3000/ToDos? 404 (Not Found) when Breeze goes out to get the data.
Do I need to create the API for Breeze to talk to? I've tried this:
angular.module('mysql', ['ngResource']).
factory('ToDos', function($resource) {
var ToDos = $resource('/ToDos', {}, {update:{method:'PUT'}});
return ToDos
});
And then injecting it into the datacontext service here:
angular.module('mainApp').factory('datacontext',
['$http', 'logger', 'breeze', 'ToDos', datacontext]);
function datacontext($http, logger) {
var dataService = new breeze.DataService({
serviceName: '/ToDos',
hasServerMetadata: false
});
var manager = new breeze.EntityManager({
dataService: dataService
});
...
}
I'm pretty lost as to what I'm doing wrong. Any help would be appreciated.
EDIT: The comments informed me that the backend API needs to be created. I'm working on that but could use some help converting the breeze-mongodb module.
In Breeze's zza example in repository.js there are calls to this module's MongoQuery() and MongoSaveHandler() functions. Would it be as simple as converting them to MySQL connection.query? And any help in the conversion would be much appreciated!
I'm very curious about your progress on this. It's quite ambitious.
Ultimately I believe you'll be writing something like the "breeze-mongodb" npm module which will have a query and save implementation attuned to MySQL.
It could be tricky without an ORM. If you choose to go with an ORM in Node for MySQL (node-orm???), you can learn a lot about what to do from the Breeze source code for ContextProvider, ContextProvider.EF and ContextProvider.NH in the "breeze.net.server" repo on github. You don't have to be a C# person to glean transferable insights from that code base.