Ember CLI + Watchman Not Detecting Addon Changes - ember.js

I have an Ember.js addon which Watchman does not seem to operate correctly with. Any changes made to the addon-name/app files do not trigger a rebuild. However, changes to files within addon-name/tests do trigger a rebuild.
I have a .watchmanconfig file set up as follows...
{
"ignore_dirs": [ "tmp", "dist", ".idea", "docs", ".git", "node_modules" ]
}
After running the dummy app with ember s, I checked watchman watch-list and do not see the addon listed in the "roots" category. I've added it manually, but that does not help either, as I'm guessing ember s has to tell watchman what to do when the files are changed.
Any ideas on what might be happening?
OS: Mac OSX High Sierra (10.13.4)
Ember: v3.1.0
Node: v8.11.1
NPM: 6.0.0
Yarn: 1.5.1

If you are using symlink then some times watchman does not track the changes, to track your changes in your addon's index.js add following code
module.exports = {
name: projectName,
isDevelopingAddon: true
};
Hope it helps

Related

error when deploy to AWS after build using vue3 + vite

First off all excuse the bad english..
Im develop/build using vue3 + vite2.
Deploy the 'dist' folder on AWS EC2 and run the server with nginx.
And when I connect to that page, I get an error that I can't see.
Has anyone ever seen an error like this?
(When build/run locally, it works normally without errors.)
after a day of suffering, i found that it was due vueI18n plugin in the vite.config.ts file.
import vueI18n from '#intlify/vite-plugin-vue-i18n';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
plugins: [
vue(),
vueI18n({
include: path.resolve(__dirname, './path/to/src/locales/**'),
}),
],
....
I don't know for what reason,
When I delete that plugin, it worked fine.
the reason for adding vueI18n plugin is because a warning related to bundle install occurred.
i guess is that the plugin conflicts with vite's build environment.

TypeError: Amplify.configure is not a function with SvelteKit + Amplify AWS

I was doing some hands on with the new SvelteKit FE using AWS Amplify to use Cognito service to authenticated my app and everything run fine in dev mode. But then, I tried to build it for deployment and this is where the fun begin...
First, I was not able to simply build the app. There was an error with Vite not able to correctly "interpret" the "browser" field!? :
'request' is not exported by __vite-browser-external, imported by node_modules/#aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
The issue is documented here (https://github.com/aws/aws-sdk-js/issues/3673) and here (https://github.com/aws-amplify/amplify-ui/issues/268).
I apply the solution suggested but ErikCH to add an alias in the svelte.config.cjs file:
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser"
}
}
So now, I was back on track since the app build without an hitch. But then, I tried to run the app with an "npm run preview" but it stop dead on this message:
TypeError: Amplify.configure is not a function
I double check my code and I don't see anything missing or out of place. Here's the imports and call of that function :
...
import Amplify from '#aws-amplify/core';
import Auth from "#aws-amplify/auth";
import awsconfig from "../aws-exports";
Amplify.configure(awsconfig);
...
As mention before, the project run in dev mode, it all in pure Javascript, nothing really fancy. I updated to the latest package of everythings... here my actual version:
#sveltejs/kit": "^1.0.0-next.159
vite v2.5.1
"aws-amplify": "^4.2.5"
node v14.17.5
npm v7.21.1
I saw comments about removing completely Amplify libs and write wrappers to call Cognito directly but I found this not very productive and cumbersome. So, my last resort is the call Stackoverflow to the rescue! ;-)
Edit #1 I realize that this error occur in the app.js, that is the server side of the FE app. This is not right. This MUST run in the browser. How come it end up in the server side ???
I had to change Amplify to a named import for preview to work for me after build.
import { Amplify } from '#aws-amplify/core'
And in case anyone faced 'dev' issues with Amplify + SvelteKit, adding the following to the top of the <head> tag in app.html may help.
<script>
var global = global || window
var Buffer = Buffer || []
var process = process || { env: { DEBUG: undefined }, version: [] }
</script>
My versions:
Node.js: 14.18.0
#aws-amplify/auth: 4.3.11
#aws-amplify/core: 4.3.3
#sveltejs/kit: 1.0.0-next.190
typescript: 4.4.4
I'm not entirely sure this gets you on the right track, but one thing that has helped me out with package import weirdness, especially when it's between dev and build, is vite's optimizedDeps config directive. Perhaps something within the AWS package(s) is not liking the pre-bundling that vite is doing and you need to exclude it? This might help explain why things run fine while in dev.

Embli-Cli Not work after Building

Iam working around Ember-Cli.I build a project and customize the "ember-cli-build.js" but finally it doesn't work.
this is my work steps:
1) ember new myapp
cd myapp
ember server
it works fine and i can see my project on "http://localhost:4200"
2) then run ember build --environment=production and get Built project successfully. Stored in "dist/". so it appear that my project built.
3) then i run this url on browser that direct to my dist directory project
localhost/~/myapp/dist/index.html
but nothing shows.
i check the console and it seems that the "ember" is running, but nothing shows on the screen
i found the anwser. first of all on the "enviroment" change these locationType: 'hash'
APP: {
rootElement: "#page-base"
}
and then go to "project/app/index.html" and place <div id="page-base"></div>
then build the project by ember build --environment=production
it works fine.
It is expected that you deploy everything inside /dist folder to your server and it will be the root of your http server. And there is a way to simulate this behavior on your local environment. All you need is to install http-server globally in your system:
npm install http-server -g
then navigate to the dist folder of your app:
cd myapp/dist
and start the http-server:
http-server -o
That's it. You have your built ember application running in your browser locally.

Does ember-cli support object literal shorthands?

UPDATE 2
I've filed an issue at the ember-cli repo describing simple steps to reproduce the issue: https://github.com/ember-cli/ember-cli/issues/4015.
UPDATE
This is related to using in-repo-addons. The ember compiler does not choke when using this syntax in your regular app. I will be filing a bug report at http://github.com/ember-cli/ember-cli shortly with steps to reproduce and will link back to the issue here when it is ready.
I caught the bug for es6 and started using the object literal method shorthand:
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
// stuff I want to do once we're in the DOM
}
})
but it chokes when running ember build --environment production. Thoughts?
Build failed.
Unexpected token punc «(», expected punc «:»
Ember-cli uses babel which does support object literal shorthands.
See:
https://babeljs.io/docs/learn-es6/
In Repo Addons (currently) require ember-cli-babel as a dependency.
$ cd lib/<your addon>
$ npm install ember-cli-babel --save
$ cd ../..
$ ember build --environment production

Running jest tests directly in Intellij Idea/WebStorm?

I'm using jest to write tests in my ReactJS application.
So far, to run my test suite, I need to type 'npm test'.
Here's the snippet from package.npm:
"scripts": {
"test": "./node_modules/.bin/jest",
(other stuff)
},
"jest": {
"unmockedModulePathPatterns": ["<rootDir>/node_modules/react"],
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"testFileExtensions": [
"es6",
"js"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
]
},
Is it possible to run those tests within my IDE (IDEA/WebStorm) directly, preserving the configuration? I'm not a js guy, but for example WebStrom works perfectly fine with Karma. Shouldn't this be possible with jest-cli either?
To make Jest test results shown in a tree view (like karma, etc.), a special integration is needed. WebStorm doesn't yet support Jest. Please vote for WEB-14979 to be notified on any progress.
EDIT: as of March 2017 the first version of Jest integration at WebStorm has been released.
In WebStorm 9+ You can set this up as follows:
Install Jest CLI: npm install --save-dev jest-cli
Create node run configuration with javascript file set to node_modules/.bin/jest, and application parameter to --runInBand. runInBand tells jest to run in single process, otherwise there's a port conflict when running multiple node processes in debug mode
Create some tests and run configuration in Debug mode (Ctrl-D/CMD-D). If you set breakpoints in your test or app code they should hit
It would be great though if you could click on file:line numbers in the output to go directly to the code.
app_sciences's answer is awesome, but does not work for Windows.
For windows, you can use next configuration:
Provided configuration is taken from here
For IDEA I'm using https://confluence.jetbrains.com/display/IDEADEV/Run+Configurations for that purposes. For WebStorm it seems you can add your config by yourself https://www.jetbrains.com/webstorm/help/creating-and-editing-run-debug-configurations.html . The configuration you are talking about is on the software level. If you will configure to run it via your IDE it will definitely will run within the ENV variables and paths given, you just need to add the needed global paths and the commands to run.