db-migrate with #babel/register and ES6 modules - "SyntaxError: Unexpected token export" error - syntax-error

Really hoping someone can help me with this as it's driving me crazy.
Node v12.4.0
package.json: -
{
"name": "#mypackage/db-migrate",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "ISC",
"workspaces": {
"packages": [
"common/models"
]
},
"dependencies": {
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"#babel/register": "^7.6.0",
"#mypackage/models": "1.0.0",
"db-migrate-mysql": "^1.1.10",
"db-migrate-plugin-babel": "^2.0.1",
"npm-upgrade": "^2.0.2"
}
}
.babelrc: -
{
"presets": [
"#babel/preset-env"
]
}
Directory structure: -
common->models - this contains the source lib for #mypackage/models
migrations - contains all the migration files
Yarn installs all the dependencies without issue.
So when I run a migration command ("db-migrate down -c 1", for example), I get the following: -
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
^^^^^^
SyntaxError: Unexpected token export
This is happening when I am trying to export/import from one of the #mypackage/models files.
var CONSTANT_ONE = "foo_one";
var CONSTANT_TWO = "foo_two";
var CONSTANT_THREE = "foo_three";
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
Is this a root directory issue? I am complete baffled and utterly frustrated. Any help VERY welcome.

Solved by changing .babelrc to babel.config.js.

Related

Can someone help me resolve this problem? Fatal error: Unable to find local grunt

I am learning hybris and I started using smartedit. The problem is that when I run ant clean all or ant updatesystem I get this error.
Running grunt default
grunt-cli: The grunt command line interface (v1.3.2)
Fatal error: Unable to find local grunt.
If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:
https://gruntjs.com/getting-started
What have I done till now:
I have grunt-cli installed globally, and grunt installed locally. Also, I run npm install.
Here is my packege.json file:
{
"name": "name",
"version": "1.0.0",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.4.1",
"grunt-contrib-jshint": "^3.0.0",
"grunt-contrib-watch": "^1.1.0"
},
"dependencies": {},
"description": "desc"
}
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
I tried a bunch of ways to resolve this problem but nothing seemed to work. Can someone help me out?

inject is not defined - CodeceptJs and CucumberJs

It's my first time using CodeceptJs and I'm struggling to run my feature file as the IDE asks me to implement steps for my scenario but this is already done, so I feel it may be searching for them somewhere other than the specified under the codecept.conf.js file?
When I run npx codeceptjs gherkin:steps or snippets on the terminal I get this message saying Could not include object Step Definition from ./step_definitions/steps.js from module '/Users/myUser/IdeaProjects/codeceptjs_webdriver/step_definitions/steps.js' The "from" argument must be of type string. Received undefined .
I then move the step_definitions folder to inside features as read that this would be the default location for these and now get an inject is not defined error, which may be the actual cause for the issue I'm getting, but not sure what to do to fix it.
I've tried on IntelliJ Ultimate, Webstorm and VSCode but get the same on all of them.
basic.feature
Feature: Business rules
In order to achieve my goals
As a persona
I want to be able to interact with a system
Scenario: do something
Given I have a defined step
steps.js
const {Given} = require('cucumber');
const {I} = inject();
Given(/^I have a defined step$/, function () {
I.amOnPage('/');
});
codecept.conf.js
exports.config = {
output: './output',
helpers: {
WebDriver: {
url: 'https:www.google.com',
browser: 'chrome'
}
},
include: {
I: './steps_file.js'
},
mocha: {},
bootstrap: null,
teardown: null,
hooks: [],
gherkin: {
features: './features/*.feature',
steps: ['./step_definitions/steps.js']
},
plugins: {
screenshotOnFail: {
enabled: true
},
pauseOnFail: {},
retryFailedStep: {
enabled: true
},
tryTo: {
enabled: true
}
},
tests: './*_test.js',
name: 'codeceptjs_webdriver'
}
package.json
{
"name": "codeceptjs_webdriver",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"codeceptjs": "^3.0.0",
"cucumber": "^5.0.1"
},
"dependencies": {
"#codeceptjs/configure": "^0.6.0"
},
"description": ""
}
IntelliJ Ultimate 2020.2
And here my Github repo
Thank you very much.
It's working now and I've come back to update it here if useful to someone else.
Was able to keep the steps under step_definitions/steps folder (not the one inside the features folder). To fix the non implemented issue had to install the wdio dependency. In order for this to take effect properly through running npm install both node_modules and package-lock.json had to be deleted to be freshly regenerated.
updated package.json
{
"name": "codeceptjs_webdriver",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "npx codeceptjs run"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"#wdio/selenium-standalone-service": "^6.6.2",
"codeceptjs": "^2.6.8",
"codeceptjs-assert": "0.0.4",
"webdriverio": "6.3.6"
},
"description": ""
}
updated codecept.conf.js
exports.config = {
output: './output',
helpers: {
WebDriver: {
url: 'https://www.google.com',
browser: 'chrome'
}
},
include: {
I: './steps_file.js'
},
mocha: {},
bootstrap: null,
teardown: null,
hooks: [],
gherkin: {
features: './features/*.feature',
steps: ['./step_definitions/steps.js']
},
plugins: {
wdio: {
enabled: true,
services: ['selenium-standalone']
// additional config for service can be passed here
},
screenshotOnFail: {
enabled: true
},
pauseOnFail: {},
retryFailedStep: {
enabled: true
},
},
tests: './*_test.js',
name: 'codeceptjs_webdriver'
}

Ngx\clipboard Not working with Aot and Rollup

I have tried to implement aot in my app but While building my app with aot and rollup gets this error.I have used ngx-clipboard.
'ngx-clipboard/src/index' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/window.service' is
imported by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be
resolved ΓÇô treating it as an external dependency
'ngx-clipboard/src/clipboard.directive' is imported by
wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it as
an external dependency
'ngx-clipboard/src/clipboard.service' is
imported by wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it a
s an external dependency
'ngx-clipboard/src/document.service' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/clipboard.service' is imported
by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved
ΓÇô treating it as an external dependency
No name was provided for external module 'ngx-clipboard/src/index' in
options.globals ΓÇô guessing 'import10'
No name was provided for external module 'ngx-clipboard/src/window.service'
in options.globals ΓÇô guessing 'import13'
No name was provided for external module 'ngx-
clipboard/src/clipboard.directive' in options.globals ΓÇô guessing
'import5'
No name was provided for external module 'ngx-
clipboard/src/clipboard.service' in options.globals ΓÇô guessing 'import28'
No name was provided for external module 'ngx-
clipboard/src/document.service' in options.globals ΓÇô guessing 'import27'
Here is my package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"aot": "node_modules/.bin/ngc -p wwwroot/tsconfig-aot.json",
"rollup": "node_modules/.bin/rollup -c wwwroot/rollup-config.js",
"cleanup": "rimraf wwwroot/app/aot && rimraf wwwroot/build.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"angular/animations": "4.1.3",
"angular/common": "4.1.3",
"angular/compiler": "4.1.3",
"angular/compiler-cli": "4.1.3",
"angular/core": "4.1.3",
"angular/forms": "4.1.3",
"angular/http": "4.1.3",
"angular/material": "2.0.0-beta.6",
"angular/platform-browser": "4.1.3",
"angular/platform-browser-dynamic": "4.1.3",
"angular/platform-server": "4.1.3",
"angular/router": "4.1.3",
"angular/upgrade": "4.1.3",
"core-js": "2.4.1",
"ngx-clipboard": "8.0.3",
"rxjs": "5.4.0",
"systemjs": "0.20.13",
"zone.js": "0.8.11"
},
"devDependencies": {
"ngx-window-token": "0.0.2"
"rollup": "0.43.0",
"rollup-plugin-commonjs": "8.0.2",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-uglify": "2.0.1",
"typescript": "2.2.2",
"rimraf": "2.6.1"
}
}
Here is my tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"app/app.module.ts",
"app/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "app/aot",
"skipMetadataEmit": true
}
}
Here is my rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'wwwroot/app/main-aot.js',
dest: 'wwwroot/build.js', // output a single application bundle
sourceMap: false,
format: 'iife',
onwarn: function (warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
// console.warn everything else
console.warn(warning.message);
},
plugins: [
nodeResolve({ jsnext: true, module: true }),
commonjs({
include: 'node_modules/**',
}),
uglify()
]
}
Thanks in advance
Try this:
In rollup-config.js import alias
import alias from 'rollup-plugin-alias';
Under plugins add
'ngx-clipboard': __dirname + '/node_modules/ngx-clipboard/dist/',
'ngx-window-token': __dirname + '/node_modules/ngx-window-token/dist/'

npm run script causes Windows Script Host error

I a trying to use npm to minify javascript.
This is my package.json:
{
"name": "name1",
"version": "1.0.0",
"description": "",
"scripts": {
"minifyjs": "minifyJs",
"minifycss": "minifyCss",
"minifyhtml": "minifyHtml"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-css": "^3.4.19",
"html-minifier": "^3.0.2",
"uglify-js": "^2.7.0"
}
}
and my minifyJs script is :
var uglifyJS = require('uglify-js');
var fs = require('fs');
var result = uglifyJS.minify(['src/main1.js', 'src/main2.js'], {
compress: {
drop_console: true,
unused: true
}
});
fs.writeFileSync('dist/minifyJs.js', result.code);
When I call npm run minifyjs I get the following error:
What am I doing wrong - btw this was working on another machine.....
Can anyone help?
The entries under scripts are commands that are run by NPM. They are not simply paths to JavaScript files.
You need to tell NPM to run your JavaScript tasks using node:
...
"scripts": {
"minifyjs": "node minifyJs",
"minifycss": "node minifyCss",
"minifyhtml": "node minifyHtml"
},
...

How to include Underscore.js in angular2 project built using angular-cli

I want to include underscore.js inside angular2 project built using angular-cli.
Till now I am unable to do so. I tried so far:
1- npm install underscore --save
2- tsd install underscore
3- script src="node_modules/underscore/underscore.js" , reference in index.html
4- inside system-config.js
/** Map relative paths to URLs. */
var map = {
'underscore': '../node_modules/underscore/underscore.js'
};
/** User packages configuration. */
var packages = {
'underscore': '../node_modules/underscore/underscore.js'
};
5- import * as _ from 'underscore';
But underscore.js is not getting copied in 'dist' directory during run-time , and browser complain of not finding underscore.js. I think I am missing something at Point#4.
Any help is much appreciated as I am beginning learning angular2.
Please remember that this project is made by angular-cli, and not by any other seed project. Other than Underscore.js, project is working fine.
[EDIT]
package.json has "underscore": "^1.8.3" in dependencies
Using Angular CLI 1.0.0-rc.1, the recommended solution is described here:
Angular2 2.4 How to load external libraries sush as Underscore into angular2.
npm install underscore --save // save to dependencies: required to run
npm install #types/underscore --save-dev // save to dev dependencies: required in dev mode
Then in your component class:
import * as _ from 'underscore';
...
subtitle = _.head(['xyz'])
Alternatively, there is another way to load "static" scripts in angular-cli as described here https://www.npmjs.com/package/angular-cli#global-library-installation:
In .angular-cli.json, add it to the scripts array:
"scripts": ["../node_modules/underscore/underscore.js"]
This will load underscore.js, but this is not a good way to make it available for use in your typescript classes.
install underscore using npm
Go to yourappname/src/typings.d.ts and add this line
declare module 'underscore';
then run ng build
Angular 2 full 3 file snippets
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"tsd": "^0.6.5",
"underscore": "^1.8.3",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2"
}
}
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'underscore': 'npm:underscore',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'underscore':{
main: './underscore.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
},
"ambientDependencies": {
"underscore": "github:DefinitelyTyped/DefinitelyTyped/underscore/underscore.d.ts#f0990e288ac73d593e982995947567aa2643b828"
}
}
1- npm install underscore --save
2- tsd install underscore (if tsd not install first install that)
3) now do npm install
4) then npm start
install underscore:
npm i underscore --save
in angular-cli.json:
"scripts": [
"../node_modules/underscore/underscore-min.js",
...
],
after run command:
ng build
in component:
declare var _: any;
#Component({...})
Do you have in your project a file called Package.json?
If Yes, you can try to add this line
"underscore": "^1.8.3",
in the dependencies of this file.
Modifications in system-config.ts
var map = {
"underscore": "node_modules/underscore",
};
var packages = {
'underscore': { main: 'index.js', defaultExtension: 'js' }
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
paths: {
"underscore": "/node_modules/underscore.js"
}
};
And to do a npm install after that.
I think you might have missed a step? Did you remember to setup underscore in the "angular-cli-build.js" file? This step tells clingon to put underscore in the vendor folder (/dist/vendor).
Here's how I got underscore working.
Install underscore and typings:
npm install underscore --save
typings install underscore --save --ambient
Setting up underscore in "angular-cli-build.js":
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'moment/moment.js',
'underscore/underscore.js'
]
});
};
Then underscore get compiled to the vendor folder (/dist/vendor), and now it's possible to point to this location from the system.config.ts file:
const map: any = {
"underscore": "vendor/underscore/underscore.js",
"moment": "vendor/moment/moments.js"
};
/** User packages configuration. */
const packages: any = {
'underscore': {
format: 'cjs'
},
'moment': {
format: 'cjs'
}
};
Remember to use the hole path including the .js hope this helps :)
I did the same as with moment, from the docs: https://github.com/angular/angular-cli/wiki/3rd-party-libs
I am using Angular-cli, all I did was to add this line in package.json
"underscore": "^1.8.3",
and then I Run:
1. npm install underscore --save
2. npm install
and it worked...