I'm trying to deploy a Vue 3 application that uses Vite, which locally works perfectly, but after deploy I get this error.
Uncaught TypeError: Cannot read properties of undefined (reading 'memoizedProperty')
I read that it could be from aws-sdk not collaborating well with Rollup, but it seems that the other solutions on the internet haven't worked.
Here are the relevant parts from vite.config.js:
resolve: {
alias: {
// vue: '#vue/compat'
'#': fileURLToPath(new URL('./src', import.meta.url)),
path: 'path-browserify',
// 'aws-sdk': 'aws-sdk/dist/aws-sdk.min.js',
'./runtimeConfig': './runtimeConfig.browser', // fix production build
},
},
This is one of the threads I've been following: https://github.com/aws/aws-sdk-js/issues/1769
How can I make sure this works?
Related
We are currently developing an Aurelia application that needs to run on Internet Explorer 11. Everything is great until we try to run our Karma/Tape tests on IE11 using karma-ie-launcher.
Karma start properly, some tests are executing, until a test using a waitForDocumentElement is encountered. Since waitForDocumentElement use promises, I told myself, great, I just need to load some Promise polyfills into Karma and everything will start working just like it does when using Chrome. But, It obviously didn't.
So, finally the question. Is there a way to have my tests running on Karma, targeting IE11 using karma-ie-launcher and have the ability to use waitForDocumentElement in my tests. It seems to be the culprit here since it use promises.
I may to build up a sample repo aside my project if its needed.
Thanks!
Edit:
Here's the stack trace of the 'Out of stack space' error. For the records, rawValue is a bindable property I'm trying to assert inside a waitForDocumentelement so the binding and all have the time to do their stuff.
WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:31:17)
at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:36:17)
at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection Error: Out of stack space
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2691:7)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)'
Karma creates a property on the window named __karma__ which lists the files that match the patterns in your karma.conf.js. Typically there's some code in your test entry point module that pares down this list of filenames and strips the extension, etc so they become a list of module names suitable for your loader... requirejs in your case ;)
This array of module names is then assigned to the deps property of the requirejs config which causes requirejs to load all of them before calling the function assigned to the callback property of the requirejs config.
I've been manually adding bluebird as the first dependency. Then in the callback, I do some feature detection and if Promise is not supported by the browser, assign it to window.Promise.
Here's an example that should map pretty cleanly to your setup. Relevant lines are indicated with comments.
const testModules = Object.keys(window.__karma__.files)
.filter(filename => /\.spec\.js$/.test(filename))
.map(filename => filename.replace(/^\/base\/dist\/|\.js$/g, ''));
testModules.unshift('bluebird'); // make bluebird the first dependency in the array... this means it will be the first argument to the callback function (see below)
let karmaStarted = false;
require.config({
baseUrl: '/base/global/output',
paths: {
'bluebird': '../some/path/to/bluebird.min' // ensure the loader can find bluebird
},
deps: testModules, // bluebird is the first item in this array of modules
callback: (bluebird: any) => { // bluebird is the first arg... there are many other args but we don't care about the rest
if (karmaStarted) {
return;
}
// polyfill Promise on an as-needed basis.
if (!('Promise' in window && 'resolve' in window.Promise && 'reject' in window.Promise && 'all' in window.Promise && 'race' in window.Promise)) {
window.Promise = bluebird.Promise;
}
karmaStarted = true;
window.__karma__.start();
}
});
Prior to firebase 3 update our acceptance test have been running without any issues. We use the following in our beforeTest and afterTest
moduleForAcceptance('Acceptance | Dashboard | Items | Library | New', {
beforeEach() {
stubFirebase();
var ref = createOfflineRef(basicDataRef, 'https://MY-APP.firebaseio.com');
replaceAppRef(this.application, ref);
stubValidSession(this.application, {uid: 'xxxx'});
},
afterEach() {
unstubFirebase();
}
});
basicDataRef is a fixture for the test. The above code allows my to mock session following the test-helper in torii library to allow my application to correctly obtain the data needed as my firebase hieararchy is as follows:
/
+--uid
+--profile
+--otherdata
I am not testing for permission rules, just interaction to save/edit data in the application, and this has worked OK prior to firebase 3 migration. After version 3 all my test returns the following:
actual: >
false
expected: >
true
stack: >
at http://localhost:7357/assets/test-support.js:4130:12
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:7357/assets/vendor.js:49473:7)
at onerrorDefault (http://localhost:7357/assets/vendor.js:41461:24)
at Object.exports.default.trigger (http://localhost:7357/assets/vendor.js:62212:11)
at http://localhost:7357/assets/vendor.js:63463:40
at Queue.invoke (http://localhost:7357/assets/vendor.js:10415:16)
message: >
Error: permission_denied at /xxxx/profile: Client doesn't have permission to access the desired data.
I always thought the createOfflineRef in emberfire allows us to bypass rules checking. the fact that it keeps returning permission_denied is quite perplexing. Maybe i need to re-engineer the test? Or I approach this wrongly all this time? Any input is greatly appreciated
Got to the bottom of this, and I guess I'll answer my own questions in case somebody else experience the same issue as I have.
the new firebase InitializeApp method has an additional optional parameter called name. By default, Emberfire service sets this name to be:
export const DEFAULT_NAME = '[EmberFire default app]';
However the Emberfire test helper to create firebase offline ref stubs the firebase instance with a different instance name to be:
export const DEFAULT_NAME = '[EmberFire offline test app]';
This cause my test to fail with permission denied, as the acceptance test is attempting to connect to the '[EmberFire default app]' and the stubbed offline reference is called something else.
Creating my own create-offline-ref helper substituting the DEFAULT_NAME to '[EmberFire default app]' solves the problem. I'm not sure as to what is the best practice for acceptance test as the change seems deliberate on emberfire.
I Was testing EmberJs application with Qunit and karma runner and it was working all good.
Then I had to integrate faye into the application which went well but then on running my test suite, it shows following error and crashes:
ReferenceError: Faye is not defined
The error is thrown where, I am defining the client in emberjs
client = new Faye.Client(uri);
Though this works in development, staging but not in testing.
Overhere, uri = "http://localhost:9292/faye"
faye.js is included in vendor.js(single js file which have all the js plugins including ember.js and ember-data.js itself) which is loaded before app.js(file where above line exists)
The reason of that weird behavior is related to the following lines in Faye:
if (typeof module !== 'undefined')
module.exports = Faye;
else if (typeof window !== 'undefined')
window.Faye = Faye;
Source: https://github.com/faye/faye/blob/master/javascript/faye.js#L143
So if module is not undefined(meaning it is defined) then module.exports will be set object, if not, window.Faye will be set.
If you use a debugger and set a breakpoint on that line you will that module is actually defined, why? it is a QUnit global helper method!
Why Faye does this? I guess because it can be run in a NodeJS environment (you can read more about module.exports here).
As I see it you have 2 possible solutions:
Require Faye before QUnit.
Patch Faye to ignore the existence of module in window.
I've encountered the same behavior while using Teaspoon with QUnit.
Making Teaspoon require Faye before QUnit seems like a bad idea and will be probably in ugly hack.
I've ended up with patching Faye to make it skip the module check, not so beautiful either, but I believe this is reasonable.
I am using ember-cli and have a problem with selecting the production environment. Specifically, everything works when I run ember serve --environment=development and I get a blank page when I run ember serve --environment=production. In the console, I see:
Uncaught TypeError: undefined is not a function
Uncaught Error: Could not find module simple-auth/authenticators/base
All other things are equal, and all dependencies are up to date. I'm a total noob so I don't even know where to begin on how to debug: is it ember? ember-cli? broccoli? Any help would be appreciated.
I had exact the same problem, and James_1x0 is correct, it is an broccoli issue.
After debugging it occurs, that the "undefined" error apears on "Ember.handlebars.compile" which lead to other research.
It seems, that in production envrironment "handlebars.js" is replaced by "handlebars.runtime.js" in the ember-cli build process, which seem to be a problem for broccoli at this time.
Other devs had the same problem but with other libraries as well:
https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195
Here the solution was to add:
var index = app.legacyFilesToAppend.indexOf('bower_components/handlebars/handlebars.runtime.js');
if(index) {
app.legacyFilesToAppend[index] = 'bower_components/handlebars/handlebars.js';
}
into your Brocfile.js to replace the "handlebars.runtime.js" with the "handlebars.js".
This also fixed the problem for me.
It sure has the drawback that the whole handlebars file is deployed but its a workarround for now, until the problem is fixed.
Solution is mentioned on Ember CLI website:
This is somewhat non-standard and discouraged, but suppose that due to a requirement in your application that you need to use the full version of Handlebars even in the production environment.
Basically, you can pass vendorFiles option to your EmberApp instance which will force CLI to include full version of Handlebars.
Example of explicitly requiring handlebars.js , in Brocfile.js:
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'bower_components/handlebars/handlebars.js'
}
}
});
This is recommended way of solving this issue(discussion on GitHub).
A hopefully simple question about AngularJS unit testing. I have a controller using a simple service (adapted from angular-seed project)
services.js:
angular.module('myApp.services', []).value('version', '0.1');
controllers.js:
function MyCtrl1($s, version) {
$s.version = version;
}
MyCtrl1.$inject = ["$scope","version"];
This works great im my app. However, I have trouble creating the controller in unit test frame work. I can't figure our how to inject 'version' service (or create instance) and pass it to $controller() factory - I assume that's what I want to do?! Here's the bare bones spec:
controllerSpec.js:
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
// how about version service?
ctrl = $controller(MyCtrl1, {$scope: scope, /* version: <where from?> */});
}));
it('Version should be 0.1 ...', function() {
expect(scope.version).toBe('0.1');
});
Running the test harness yields:
>test.sh
... failed (3.00 ms): Error: Error: Unknown provider: versionProvider <- version
Error: Unknown provider: versionProvider <- version
I have tried various things with $injector/$provider and module() but to no avail. I'm sure the answer is simple, but I can't see it.
just add beforeEach(module('myApp.services')) to your describe block. This will load the services module with the "version" service into the test injector and that will make it available to your test.