Incomplete Sourcemap with Gulp, Rollup, Babel - gulp

I'm having trouble obtaining a good sourcemap using this Gulp configuration.
gulp.task('scripts', () => {
return gulp.src('app/scripts/**/*.js')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.rollup(
{
plugins: [
babel(
{
babelrc: false,
presets: ["es2015-rollup"],
exclude: 'node_modules/**',
plugins: [
["transform-react-jsx", {
"pragma": "m"
}]
]
}
)
],
entry: './app/scripts/main.js'
}
)
)
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({stream: true}));
});
The main.js is a simple script that import local file
'use strict';
import Application from './framework/Application.js';
code...
But the sourcemap I got is this:
{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";< ... many ';' here ... >;"}
Npm dev package installed
"babel-core": "^6.4.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.5.2",
"browser-sync": "^2.2.1",
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-babel": "^6.1.1",
"gulp-cache": "^0.4.2",
"gulp-cssnano": "^2.0.0",
"gulp-eslint": "^3.0.0",
"gulp-filter": "^4.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.0.1",
"gulp-rollup": "^2.11.0",
"gulp-sass": "^2.0.0",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.0.0",
"main-bower-files": "^2.5.0",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"run-sequence": "^1.2.2",
"wiredep": "^4.0.0"
Any ideas?

Related

Expected comma or closing brace json(518) after React Native update v0.66.4

After ugrading React Native from v0.63.3 to v0.66.4 (followed RN Upgrade Helper) I get an error which derives from node_modules/jest-resolve/node_modules/resolve/test/resolver/malformed_package_json/package.json. How can I suppress or fix this?
Error: Expected comma or closing brace json(518) - the json file only contains an opening "{" tag.
Dependencies:
{
...
"dependencies": {
"#babel/polyfill": "7.0.0-beta.47",
"#babel/preset-env": "^7.5.5",
"#bugsnag/js": "^7.9.2",
"#bugsnag/plugin-react": "^7.9.2",
"#bugsnag/react-native": "^7.9.4",
"#monterosa/react-native-parallax-scroll": "https://github.com/xxxxxxxx/react-native-parallax-scroll.git#xxxxxxxxx",
"#react-native-async-storage/async-storage": "^1.15.4",
"#react-native-community/blur": "git+https://github.com/thedeepanshujain/react-native-blur.git#xxxxxxx",
"abortcontroller-polyfill": "^1.1.9",
"date-fns": "^1.29.0",
"debug": "^3.1.0",
"eslint-plugin-import": "^2.11.0",
"expr-eval": "^2.0.2",
"formik": "1.5.1",
"iban": "^0.0.10",
"mobx": "^4.3.1",
"mobx-react": "^5.2.3",
"mobx-react-lite": "^1.4.1",
"mobx-react-router": "^4.0.5",
"modal-react-native-web": "^0.2.0",
"patch-package": "https://github.com/xxxxxxxx/patch-package.git#xxxxxxxxx",
"qs": "^6.5.1",
"react": "17.0.2",
"react-dom": "16.14.0",
"react-dropzone": "^5.1.0",
"react-fast-compare": "^2.0.4",
"react-native": "0.66.4",
"react-native-actionsheet": "https://github.com/xxxxxxxx/react-native-actionsheet.git#xxxxxxxx",
"react-native-calendars": "1.1260.0",
"react-native-collapsible": "^1.6.0",
"react-native-device-info": "^5.5.3",
"react-native-document-picker": "^3.2.4",
"react-native-dropdownalert": "https://github.com/xxxxxxxxx/react-native-dropdownalert.git#xxxxxxxx",
"react-native-extra-dimensions-android": "https://github.com/xxxxxxxxx/react-native-extra-dimensions-android.git#xxxxxxxxx",
"react-native-fs": "^2.14.1",
"react-native-google-analytics-bridge": "^7.1.0",
"react-native-i18n": "git+https://github.com/lemankk/react-native-i18n.git#xxxxxxx",
"react-native-image-capinsets": "https://github.com/xxxxxxxx/react-native-image-capinsets.git#xxxxxxxx",
"react-native-image-crop-picker": "^0.25.0",
"react-native-image-zoom-viewer": "^2.2.26",
"react-native-ios-launch-arguments": "^1.1.0",
"react-native-iphone-x-helper": "^1.3.1",
"react-native-keyboard-manager": "4.0.13-15",
"react-native-linear-gradient": "^2.4.0",
"react-native-loading-placeholder": "^0.0.6",
"react-native-locale": "^0.0.19",
"react-native-pdf": "^5.0.6",
"react-native-safari-view": "^2.1.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-segmented-control-tab": "^3.2.2",
"react-native-splash-screen": "3.2.0",
"react-native-svg": "12.1.1",
"react-native-touch-id": "git+https://github.com/xxxxxxxx/react-native-touch-id.git#xxxxxxx",
"react-native-version-number": "https://github.com/xxxxxxxx/react-native-version-number.git#xxxxxxx",
"react-native-web": "^0.14.0",
"react-native-web-linear-gradient": "^1.0.2",
"react-native-web-webview": "^0.2.5",
"react-native-webview": "10.10.0",
"react-navigation": "2.11.2",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"resize-observer-polyfill": "^1.5.0",
"rn-fetch-blob": "^0.10.16",
"url-search-params": "^1.0.2",
"victory": "^32.0.2",
"victory-native": "^32.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/eslint-parser": "^7.16.5",
"#babel/eslint-plugin": "^7.16.5",
"#babel/plugin-proposal-do-expressions": "^7.8.3",
"#babel/plugin-proposal-function-bind": "^7.8.3",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"#babel/plugin-proposal-optional-chaining": "^7.8.3",
"#babel/plugin-syntax-class-properties": "^7.8.3",
"#babel/plugin-syntax-do-expressions": "^7.8.3",
"#babel/plugin-transform-flow-strip-types": "^7.8.3",
"#babel/plugin-transform-react-jsx-source": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/runtime": "^7.12.5",
"#bugsnag/source-maps": "^2.0.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-native-web": "^0.4.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"bugsnag-build-reporter": "^1.0.3",
"copy-webpack-plugin": "^4.5.2",
"eslint": "7.14.0",
"eslint-plugin-flowtype": "^6.1.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-native": "^3.11.0",
"file-loader": "^6.0.0",
"flow-babel-webpack-plugin": "^1.1.1",
"flow-bin": "^0.158.0",
"hard-source-webpack-plugin": "^0.12.0",
"html-webpack-plugin": "^3.2.0",
"husky": "1.0.0-rc.13",
"jest": "^26.6.3",
"jetifier": "^1.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"nodemon": "^1.18.3",
"npm-license-crawler": "^0.1.9",
"npm-run-all": "^4.1.2",
"prettier": "1.18.2",
"pretty-quick": "^1.4.1",
"raw-loader": "^0.5.1",
"react-art": "^16.4.2",
"react-test-renderer": "17.0.2",
"speed-measure-webpack-plugin": "^1.2.2",
"url-loader": "^1.1.1",
"webpack": "^4.17.0",
"webpack-bugsnag-plugins": "^1.6.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.6",
"why-did-you-update": "^1.0.6"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-.+)/)"
],
"testPathIgnorePatterns": [
"/node_modules/",
"<rootDir>/__tests__/testLib/"
],
"setupFilesAfterEnv": [
"<rootDir>/jest-setup.js"
]
}
}

Babel throws a type error when exporting aggregates

When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)
From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.

NodeJs, es6 debugging issue in VSC

I am trying to debug nodeJS code in Visual Studio Code but unfortunately I get info that:
(function (exports, require, module, __filename, __dirname) { import { start } from './server'
As far as I know it means that es6 features are not supported, but I think that my package.json and .babelrc are correct.
.babelrc:
"presets": [
"es2015",
["#babel/env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
],
"sourceMaps": true,
"retainLines": true
}
package.json:
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^23.4.2",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"eslint": "^4.15.0",
"eslint-config-prettier": "^2.9.0",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jest": "^21.15.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"jest": "^23.6.0",
"mock-req-res": "^1.0.2",
"mongodb-memory-server": "^5.2.8",
"nodemon": "^1.18.3",
"prettier": "^1.15.2",
"rimraf": "^2.6.2",
"supertest": "^3.3.0"
},
Any ideas what is wrong ?
I think you should try
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
It will automatically compile your code as required for node

'import' and 'export' may appear only with 'sourceType: module'

I've got the following gulpfile.js:
var gulp = require('gulp'),
babelify = require('babelify'),
browserify = require('browserify'),
envify = require('envify/custom'),
eslint = require('gulp-eslint'),
stylelint = require('gulp-stylelint'),
vueify = require('vueify');
var vueCompile = function (app) {
var b = browserify({
entries: 'Views/Ui/src/' + app + '/main.js',
debug: true,
paths: ['./node_modules', './node_modules/globalize/dist'],
transform: [babelify, vueify]
});
return b.transform(
{ global: true }, // Required in order to process node_modules files
envify({ NODE_ENV: process.env.NODE_ENV })
)
.bundle()
// .pipe(source('ui.js'))
// .pipe(buffer())
// .pipe(process.env.NODE_ENV === 'production' ? uglify() : buffer())
// .pipe(gulp.dest('Views/Ui/js/' + app))
};
gulp.task('vue', function () {
return vueCompile('ui');
});
and the following package.json dependencies:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.13.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.13.0",
"babel-runtime": "^6.26.0",
"babelify": "7.3.0",
"browserify": "^16.2.2",
"dateformat": "^1.0.12",
"envify": "^4.1.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.0.11",
"gulp-debug": "3.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.9",
"gulp-zip": "^3.2.0",
"merge-stream": "^1.0.1",
"node-sass": "^3.13.1",
"run-sequence": "^2.1.0",
"sassify": "^2.0.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.5.16",
"vue-resource": "1.5.1",
"vueify": "^9.4.0",
"vuex": "^2.0.0"
},
"dependencies": {
"acorn": "^6.0.4",
"cldr-core": "^33.0.0",
"cldr-dates-full": "^33.0.0",
"cldr-numbers-full": "^33.0.0",
"devextreme": "18.2.3",
"devextreme-vue": "18.2.3",
"eslint": "^3.18.0",
"eslint-plugin-vue": "beta",
"globalize": "^1.3.0",
"gulp-eslint": "^4.0.0",
"gulp-phpcs": "^2.2.0",
"gulp-stylelint": "^4.0.0",
"quill": "^1.3.6",
"stylelint": "^8.0.0",
"stylelint-config-recommended": "^1.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-processor-html": "^1.0.0",
"v-hotkey": "^0.2.3",
"vinyl-source-stream": "^1.1.0"
}
Since I'm trying to minimize my example it may be that there are a few dependencies which are not necessary for the example.
My main.js starts with the following line of code:
import App from './components/App.vue'
If I'm going to run the gulp task vue it ends in the following output:
[10:57:57] Using gulpfile ...\gulpfile.js
[10:57:57] Starting 'vue'...
[10:57:57] 'vue' errored after 68 ms
[10:57:57] Error:
...\Ui\src\akte\main.js:1
import App from './components/App.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
As I can say, babelify doesn't seem to run successfully, because the exception will be thrown when the .bundle() method will be called.
Am I missing something basic?
I've found the answer by myself. So just in case someone has the same problem, here is my solution:
The .babelrc file was missing, so something went wrong while transforming the code.
My file has the following content:
{
"presets": [
"env",
"stage-2"
],
"plugins": [
"transform-runtime"
]
}
After adding the file in the same directory as the gulpfile.js everything works as expected.

Why gulp-babel doesn't create any files?

I want to compile my src folder to my build folder but gulp-babel doesn't create any file and I don't see any errors.
gulp.task('build', () => {
gulp
.src(['./src/**/*.js'])
.pipe(
babel({
presets: ['#babel/preset-env']
})
)
.pipe(gulp.dest('build/'))
})
Log:
[10:52:18] Starting 'build'...
[10:52:18] Finished 'build' after 5.85 ms
I got a similar source and destination for my SCSS files and it works perfectly, so it's not a path issue as far as I know.
packages.json
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.6",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.1.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-typescript": "^7.1.0",
"#babel/traverse": "^7.1.4",
"eslint": "^5.0.1",
"eslint-config-prettier": "^3.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^3.0.0",
"eslint-plugin-security": "^1.4.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-nodemon": "^2.4.1",
"gulp-sass": "^4.0.2",
"node-sass": "^4.10.0",
"nodemon": "^1.11.0",
"typescript-eslint-parser": "^21.0.0",