I want to use imports in my Meteor Atmosphere package. Something like:
import { Meteor } from 'meteor/meteor'
But I always get this error:
import { Meteor } from 'meteor/meteor';
SyntaxError: Unexpected reserved word
I already added ecmascript to my package dependencies, but that doesn't help.
Package.onUse(function (api) {
// Npm.depends({});
api.versionsFrom('1.4.1');
api.use([
'ecmascript',
'es5-shim',
'mongo',
'templating',
'reactive-var',
'trever:quill',
'aramk:quill',
'aldeed:simple-schema'
], 'client');
api.addFiles([
'blog.html',
'blog.css',
'blog.js',
'edit-entry.html',
'edit-entry.css',
'edit-entry.js',
], 'client');
api.addFiles([
'blog-server.js',
], 'server');
});
How can I use ES6 features in Meteors Atmosphere packages?
Is there a sample package file structure?
The problem was that I didn't add the external packages to client AND server:
api.use([
'ecmascript',
'es5-shim',
'mongo',
'templating',
'reactive-var',
'momentjs:moment#2.15.2',
'kadira:flow-router#2.12.1',
'aldeed:simple-schema#1.5.3',
'aldeed:collection2#2.10.0',
'aldeed:autoform#5.8.1',
'blaze-html-templates',
'kadira:blaze-layout#2.3.0'
], ['client', 'server']);
Related
In my React Native 0.68.2 "expo": "^45.0.0" app i'm trying to use react-native-firebase and i have done everything except react-native-link as it's not supported in the latest version of React Native. When I run my project, it shows error from the node module of react-native-firebase. I'm guessing it's happening for some version conflict. Here is the long error :
Error: You attempted to use a firebase module that's not installed on
your Android project by calling firebase.app().
Ensure you have:
imported the 'io.invertase.firebase.app.ReactNativeFirebaseAppPackage'
module in your 'MainApplication.java' file.
Added the 'new ReactNativeFirebaseAppPackage()' line inside of the RN
'getPackages()' method list.
See http://invertase.link/android for full setup instructions.
Here's my app build/gradle file dependencies:
classpath('com.android.tools.build:gradle:7.0.4')
classpath('com.facebook.react:react-native-gradle-plugin')
classpath('de.undercouch:gradle-download-task:4.1.2')
classpath 'com.google.gms:google-services:4.3.13'
And my android/app/build/gradle :
apply plugin: "com.android.application"
apply plugin: 'com.google.gms.google-services'
implementation "com.facebook.react:react-native:+" // From node_modules
implementation project(path: ":#react-native-firebase_messaging")
implementation project(path: ":#react-native-firebase_app")
And setting.gradle :
include ':#react-native-firebase_messaging'
project(':#react-native-firebase_messaging').projectDir = new File(rootProject.projectDir, './../node_modules/#react-native-firebase/messaging/android')
include ':#react-native-firebase_app'
project(':#react-native-firebase_app').projectDir = new File(rootProject.projectDir, './../node_modules/#react-native-firebase/app/android')
And MainApplication :
import io.invertase.firebase.messaging.ReactNativeFirebaseMessagingPackage;
packages.add(new ReactNativeFirebaseMessagingPackage());
App.js :
import messaging from '#react-native-firebase/messaging';
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log("Message handled in the background!", remoteMessage);
})
const unsub = messaging().onMessage(async remoteMessage=>{
Alert.alert('A new FCM msg arrived', JSON.stringify(remoteMessage))
console.log(remoteMessage);
return unsub;
})
app.json :
"plugins": [
"#react-native-firebase/app",
"#react-native-firebase/crashlytics",
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
]
],
I'm trying to import a package into my Rails 6 project – I'm on Rails 6.0.3.4 and webpacker 5.2.1 gem.
The package is installed yarn add #shopify/react-form
It's imported into the file import {useForm, useField} from '#shopify/react-form';
Now after running ./bin/webpack-dev-server
I get this:
ERROR in ./node_modules/#shopify/react-form/build/esm/validation/validator.mjs 35:25-32
Can't import the named export 'isEmpty' from non EcmaScript module (only default export is available)
And few more of the same error but different file names.
I read on another issue that adding a new rule to webpack would fix the issue, so I followed the instructions on the webpacker README:
The thing is I don't have /config/webpack/base.js, I created on anyway and created a rules directory in side the /config/webpack/ directory, so my base.js looks like this:
// /config/webpack/base.js
const { webpackConfig, merge } = require('#rails/webpacker')
const fixConfig = require('./rules/fix')
module.exports = merge(webpackConfig, fixConfig)
and the fix looks like this:
// /config/webpack/rules/fix.js
module.exports = {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
I need help/guidance to figure out hot to solve this. TIA!
I managed to fix the error, this article guided me to figure out how to merge a new rule into webpack config.
Here is what environment.js looks right now:
// /config/webpack/environment.js
const { environment } = require('#rails/webpacker')
environment.config.merge({
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
})
module.exports = environment
Before it was:
const { environment } = require('#rails/webpacker')
module.exports = environment
I ended up deleting base.js and fix.js.
I am using the AWS Amplify Storage module to store and retrieve user files using the JavaScript API. When I serve or build with Parcel, the following error message is printed to the console:
TypeError: S3 is not a constructor
at AWSS3Provider._createS3 (AWSS3Provider.ts:501)
at AWSS3Provider.<anonymous> (AWSS3Provider.ts:130)
at step (AWSS3Provider.ts:19)
at Object.next (AWSS3Provider.ts:19)
at fulfilled (AWSS3Provider.ts:19)
The error occurs with Parcel v1.12.4 and AWS Amplify v2.2.4.
Minimal steps to reproduce
An appropriately configured Cognito identity pool and S3 bucket per the AWS Amplify Storage documentation are needed.
The following files should all be in the same directory.
A package.json with dependencies.
{
"main": "index.js",
"dependencies": {
"aws-amplify": "^2.2.4",
"lodash": "^4.17.15"
}
}
An aws-exports.js that specifies the identity pool and S3 bucket:
export const awsconfig = {
Auth: {
identityPoolId: "xx-xxxx-x:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
region: "xx-xxxx-x"
},
Storage: {
AWSS3: {
bucket: "a-bucket-name",
region: "xx-xxxx-x"
}
}
};
An index.html:
<!DOCTYPE html>
<html lang="en">
<body>
<main></main>
<script src="./index.js"></script>
</body>
</html>
An index.js:
import Amplify, { Storage } from "aws-amplify";
import { awsconfig } from "./aws-exports";
Amplify.configure(awsconfig);
// not required, but helps to confirm everything else worked
window.LOG_LEVEL = "DEBUG";
Storage.get("test.txt")
.then(result => console.log(result))
.catch(err => console.log(err));
Run the following
npm install
parcel index.html
then view the page and error message in the console.
Note that replacing the call to Storage.get() with Storage.configure() does not produce an error.
I have tried bundling the same with a default webpack configuration, and I do not observe the error. This makes me suspect that I may need to override some parcel configuration.
I encountered this when deploying Lambdas using #aws-cdk/aws-lambda-nodejs.
I worked around this by using the aws-sdk available in the Lambda runtime environment instead of bundling my own copy in each Lambda's assets. It should equally apply to other assets that end up running in Lambda.
npm install --save-dev parcel-plugin-externals
Add to package.json:
"externals": [
"aws-sdk"
]
Instantiate S3 client using
import * as AWS from 'aws-sdk';
const s3 = new AWS.S3();
instead of
import * as S3 from 'aws-sdk/clients/s3';
const s3 = new S3();
References:
https://github.com/aws/aws-cdk/issues/7685
What is the correct way to configure a submodule in Angular 2 so that it will work after AOT and rollup? I'm not concerned about lazy loading and will be happy for all submodules to be bundled together, but loadChildren is the cleanest way of referencing a submodule and having it use the correct <router-outlet>, and although I've tried various methods, none will work in both development and production.
I followed the instructions in the AOT cookbook to prepare my app for deployment. My module structure is root > account > admin, and I want the admin routes to load in the outlet defined by the account component.
Here's the router config for the account module:
import { NgModule } from '#angular/core';
import { AdminModule } from './admin/admin.module';
const accountRoutes: Routes = [{
path: 'account',
component: AccountComponent,
children: [
{ path: 'setup', component: SetupComponent },
{ path: 'admin', loadChildren: () => AdminModule }
]
}];
This works in development, but NGC compilation fails with Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'accountRoutes'.
I added an export to accountRoutes but this also fails to compile with Error: Error encountered resolving symbol values statically. Function calls are not supported..
One suggestion was to use a string instead of a function so that NGC can compile the code:
loadChildren: 'app/account/admin/admin.module#AdminModule'
This works in development and compiles successfully but the compiled app will not run, because SystemJS is unavailable. The error is:
ERROR Error: Uncaught (in promise): TypeError: System.import is not a function
TypeError: System.import is not a function
at t.loadFactory (build.js:6)
at t.load (build.js:6)
at t.loadModuleFactory (build.js:12)
I tried including SystemJS in the production build but it could not find the separate module file app/account/admin/admin.module.ngfactory - after rollup everything is in one build.js. There may be a way to have separate rollups build each submodule, but that's a lot of work.
I found the suggestion of referring to an exported function:
export function loadAdminModule() {
return AdminModule;
}
loadChildren: loadAdminModule
This works in development, but in production the runtime compiler is unavailable so it logs build.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded.
The helper function can be modified so it works in production by referencing the NgFactory instead, but this won't work in development.
import { AdminModuleNgFactory } from '../../../aot/src/app/account/admin/admin.module.ngfactory';
export function loadAdminModule() {
return AdminModuleNgFactory;
}
loadChildren: loadAdminModule
Is there a supported way of using loadChildren so that it will work with the instructions in the AOT cookbook? Is it better to use webpack instead?
For anyone having the same problem, here's the temporary workaround I'm using. Hopefully a better answer will come along soon.
I now define my submodules in a dedicated file, submodules.ts. I have two versions of this file, submodules-jit.ts for development, and submodules-aot.ts for AOT/rollup deployment to production. I gitignore submodules.ts and have added commands to my npm start and npm build:aot scripts that substitute in the right one.
// submodules-jit.ts
import { AdminModule } from './account/admin/admin.module'
export function adminModule(): any { return AdminModule; }
// submodules-aot.ts
import { AdminModuleNgFactory } from '../../aot/src/app/account/admin/admin.module.ngfactory'
import { AdminModule } from './account/admin/admin.module'
export function adminModule(): any { return AdminModuleNgFactory; }
export function adminModuleKeep(): any { return AdminModule; }
AdminModule must be referenced in the AOT file so it is preserved.
Then I use the adminModule function in my routes:
import { adminModule } from '../submodules'
{ path: 'admin', loadChildren: adminModule }
Finally for convenience, npm scripts drop in the correct file.
"build:aot": "cp src/submodules-aot.ts src/app/submodules.ts && ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"start": "cp src/submodules-jit.ts src/app/submodules.ts && concurrently \"npm run build:watch\" \"npm run serve\""
Needless to say this is a horrible hack, but it keeps the routing files clean and most of the evil in one place.
In my case I solved with your hint on loading routes from an external module, then reading this issue on angular/cli issue page.
So, I came out refactoring my routes from:
import { TestModule } from './pathToModule/test.module';
export function exportTestModule() {
return TestModule;
}
. . .
{
path: 'test',
loadChildren: exportTestModule
}
To:
. . .
{
path: 'test',
loadChildren: './pathToModule#TestModule'
}
How do I correctly import my collection definition?
I get this error message when as a result of trying to import
I externalized my collection definition FROM the main myMeteorApp.js file:
(My directory structure looked like this:)
/myMeteorApp
/myMeteorApp.js
...TO the tasks.js file:
(My directory structure currently looks like this:)
/myMeteorApp
--/imports/api/tasks.js
The contents of tasks.js look like this:
import { Mongo } from "meteor/mongo";
const Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});
const buyList = new Mongo.Collection("BuyList");
const WhoAreWe = new Mongo.Collection("whoDb");
const merchantReviews = new Mongo.Collection("MerchantReviews");
const Messages = new Meteor.Collection("messages", {transform: function (doc) { doc.buyListObj = buyList.find({sessionIDz: {$in: [doc.buyList]}}); return doc; }});
export { Images };
export { buyList };
export { WhoAreWe };
export { merchantReviews };
export { Messages };
I have packages babel-preset-es2015 and ecmascript installed, but these haven't helped.
Looking forward to your help...
Everything is the chat session we had indicates that your original app used Meteor 1.2, which did not support ES2015 modules. In addition, you did not import them correctly.
Here is a short checklist for import-related issues:
Make sure that your project is actually using Meteor v1.3+ (run meteor --version). Earlier versions did not support the modules feature.
Make sure that you have the ecmascript package installed (run meteor list or cat .meteor/packages | grep ecmascript from your project's root directory. If not, meteor add ecmascript. This is the package used for compiling ES2015.
Make sure that you are using it correctly. There are 2 types of exports:
default - import foo from 'imports/bar' goes with export default bar.
named - import { foo } from 'imports/bar' goes with export const foo = ..., etc.