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.
Related
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.
My goal is to use AWS Amplify in a Sapper project.
Creating a Sapper project from scratch (using webpack) then adding AWS Amplify and running it in dev is a success, but run it in production throws a GraphQL error in the console (Uncaught Error: Cannot use e "__Schema" from another module or realm).
Fixing this error thows another one (Uncaught ReferenceError: process is not defined).
A solution is to upgrade GraphQL from 0.13.0 to 14.0.0 unfortunatly GraphQL 0.13.0 is an AWS Amplify API dependency.
Does anyone know what can be done to get AWS Amplify work with Sapper in production ?
The link to the repo containing the source files is located here: https://github.com/ehemmerlin/sapper-aws-amplify
(Apologies for the long post but I want to be explicit)
Detailled steps
1/ Create a Sapper project using webpack (https://sapper.svelte.dev).
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
yarn install
2/ Add AWS Amplify (https://serverless-stack.com/chapters/configure-aws-amplify.html) and lodash
yarn add aws-amplify
yarn add lodash
3/ Configure AWS Amplify (https://serverless-stack.com/chapters/configure-aws-amplify.html)
Create src/config/aws.js config file containing (change the values with yours but works as is for the purpose of this post):
export default {
s3: {
REGION: "YOUR_S3_UPLOADS_BUCKET_REGION",
BUCKET: "YOUR_S3_UPLOADS_BUCKET_NAME"
},
apiGateway: {
REGION: "YOUR_API_GATEWAY_REGION",
URL: "YOUR_API_GATEWAY_URL"
},
cognito: {
REGION: "YOUR_COGNITO_REGION",
USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID"
}
};
Add the following code to the existing code in src/client.js:
import config from './config/aws';
Amplify.configure({
Auth: {
mandatorySignIn: true,
region: config.cognito.REGION,
userPoolId: config.cognito.USER_POOL_ID,
identityPoolId: config.cognito.IDENTITY_POOL_ID,
userPoolWebClientId: config.cognito.APP_CLIENT_ID
},
Storage: {
region: config.s3.REGION,
bucket: config.s3.BUCKET,
identityPoolId: config.cognito.IDENTITY_POOL_ID
},
API: {
endpoints: [
{
name: "notes",
endpoint: config.apiGateway.URL,
region: config.apiGateway.REGION
},
]
}
});
4/ Test it
In dev (yarn run dev): it works
In production (yarn run build; node __sapper__/build): it throws an error.
Uncaught Error: Cannot use e "__Schema" from another module or realm.
Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutions
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
5/ Fix it
Following the given link (https://yarnpkg.com/en/docs/selective-version-resolutions) I added this code to package.json file:
"resolutions": {
"aws-amplify/**/graphql": "^0.13.0"
}
6/ Test it
rm -rf node_modules; yarn install
Throws another error in the console (even in dev mode).
Uncaught ReferenceError: process is not defined
at Module../node_modules/graphql/jsutils/instanceOf.mjs (instanceOf.mjs:3)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/definition.mjs (definition.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/validate.mjs (validate.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/graphql.mjs (graphql.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/index.mjs (main.js:52896)
at \_\_webpack_require\_\_ (bootstrap:63)
A fix given by this thread (https://github.com/graphql/graphql-js/issues/1536) is to upgrade GraphQL from 0.13.0 to 14.0.0 unfortunatly GraphQL 0.13.0 is an AWS Amplify API dependency.
When building my project (I'm using npm and webpack), I got this warning,
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults
for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
which seems to be related to the schema error, as these posts indicate that the quickest fix for the error is to set NODE_ENV to production in your environment (mode is set to the NODE_ENV environment variable in the webpack config):
https://github.com/aws-amplify/amplify-js/issues/1445
https://github.com/aws-amplify/amplify-js/issues/3963
How to do that:
How to set NODE_ENV to production/development in OS X
How can I set NODE_ENV=production on Windows?
Or you can mess with the webpack config directly:
https://gist.github.com/jmannau/8039787e29190f751aa971b4a91a8901
Unfortunately some posts in those GitHub issues point out the environment variable change might not work out for a packaged app, specifically on mobile.
These posts suggest that disabling the mangler might be the next best solution:
https://github.com/graphql/graphql-js/issues/1182
https://github.com/rmosolgo/graphiql-rails/issues/58
For anyone just trying to get the basic Sapper and Amplify setup going, to reproduce this error or otherwise, I build up mine with:
npm install -g #aws-amplify/cli
npx degit "sveltejs/sapper-template#webpack" my-app
npm install
npm install aws-amplify
npm install lodash (Amplify with webpack seems to need this)
amplify configure
npm run build
amplify init (dev environment, VS Code, javascript, no framework, src directory, __sapper__\build distribution directory, default AWS profile. This generates aws-exports.js.
In src/client.js:
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
npm run build
When I try to use the project creation template which is on github, even after changing the appropriate values in config.yaml I am getting following error.
location: /deployments/projectcreation000/manifests/manifest-1534790908361
message: 'Manifest expansion encountered the following errors: Error compiling Python code: No module named apis Resource: project.py Resource: config'
you can find the repo link here : https://github.com/GoogleCloudPlatform/deploymentmanager-samples/tree/master/examples/v2/project_creation
Please help as I need it for production workflow. I have tried "sudo pip install apis" in Cloud Shell but it does not help, even after successful installation of apis module.
you either need to fix the import or move the file, so that apis.py will be found.
The apis module in this context refers to,
not a pip package. Ensure you have all the files in the same relative paths to each other when deploying these samples.
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
I'm trying to deploy a Meteor app using mup and an AWS EC2 micro instance.
I've followed the whole tutorial here http://www.curtismlarson.com/blog/2015/11/03/deploy-meteor-to-aws/, successfully running mup deploy.
However when I go to the instance's Public IP on google chrome or firefox, it simply says:
myapp.com took too long to respond.
If anyone could tell me how I can find the source of this problem, I'd be extremely grateful!
Here's my mup.json:
{
// Server authentication info
"servers": [
{
"host": "52.***.***.***",
"username": "ubuntu",
"pem": "~/************.pem"
}
],
// Install MongoDB in the server, does not destroy local MongoDB on future setup
"setupMongo": true,
// WARNING: Node.js is required! Only skip if you already have Node.js installed on server.
"setupNode": true,
// WARNING: If nodeVersion omitted will setup 0.10.36 by default. Do not use v, only version number.
"nodeVersion": "0.10.41",
// Install PhantomJS in the server
"setupPhantom": true,
// Show a progress bar during the upload of the bundle to the server.
// Might cause an error in some rare cases if set to true, for instance in Shippable CI
"enableUploadProgressBar": true,
// Application name (No spaces)
"appName": "menus",
// Location of app (local directory)
"app": "~/menus",
// Configure environment
"env": {
"ROOT_URL": "http://myapp.com"
},
// Meteor Up checks if the app comes online just after the deployment
// before mup checks that, it will wait for no. of seconds configured below
"deployCheckWaitTime": 15
}
The "ROOT_URL": "http://myapp.com" line is exactly how it appears in the file ( I didn't know what else to choose).
Edit: Here's the /opt/menus/config/env.sh file:
#!/bin/bash
export PORT=80
export MONGO_URL=mongodb://127.0.0.1/menus
export ROOT_URL=http://localhost
#it is possible to override above env-vars from the user-provided values
export PORT=\8\0
export ROOT_URL=\h\t\t\p\:\/\/\m\y\a\p\p\.\c\o\m
export METEOR_SETTINGS=\{\"\p\u\b\l\i\c\"\:\{\}\}
export CLUSTER_ENDPOINT_URL=\h\t\t\p\:\/\/\5\2\.\2\0\1\.\2\1\2\.\1\4\2\:\8\0
Those escapes definitely look out of place, but I feel like 1 wrong stroke could leave it still crashing! The fact that ROOT_URL is defined twice is concerning me. How exactly should I proceed?
For me mup still has a bug where the file /opt/myapp/config/env.sh generated by mup was incorrectly formatted (there were some extra spaces and extra escapes). You may want to check that, i.e., ssh into your instance and look at that file. If you need to fix it, do so, and then run mup restart from your development machine.
The second hypothesis I have is that mup doesn't interpret ~. So you may want to try using the resolved path for app, or just the relative path from where your mup.json lives.
Update:
As expected, the env.sh file is wrong (bug in mup). Try this:
#!/bin/bash
export PORT=80
export MONGO_URL=mongodb://127.0.0.1/menus
export ROOT_URL=http://localhost
#it is possible to override above env-vars from the user-provided values
export PORT=80
export ROOT_URL="http://myapp.com"
export METEOR_SETTINGS="{\"public\":{}}"
export CLUSTER_ENDPOINT_URL="http://52.201.212.142:80"