We Keep Coding

async function doesn't work in the gulpfile.babel.js

I have a 1gulpfile.babel.js with such code inside (where async-function should be assigned as an error handler for the gulp task):
// Load Node Modules/Plugins
import gulp from 'gulp';
import concat from 'gulp-concat';
// import myth from 'gulp-myth';
import uglify from 'gulp-uglify';
import jshint from 'gulp-jshint';
import imagemin from 'gulp-imagemin';
import connect from 'connect';
import serve from 'serve-static';
import browsersync from 'browser-sync';
import postcss from 'gulp-postcss';
import cssnext from 'postcss-cssnext';
import cssnano from 'cssnano';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import babelify from 'babelify';
import plumber from 'gulp-plumber';
import del from 'del';
import config from './config.json';
import sourcemaps from 'gulp-sourcemaps';
import regeneratorRuntime from "regenerator-runtime";
// Error Handler
async function onError(err) {
console.log('Name:', err.name);
console.log('Reason:', err.reason);
console.log('File:', err.file);
console.log('Line:', err.line);
console.log('Column:', err.column);
}
var cssFiles = ['app/css/main.css', 'app/css/*.css'];
// Styles Task
gulp.task('styles', () => {
return gulp.src(cssFiles)
.pipe(plumber(
{
errorHandler: onError
}
))
.pipe(concat('all.css'))
.pipe(postcss([
cssnext(),
cssnano()
]))
.pipe(plumber.stop())
.pipe(gulp.dest(config.css.dest));
});
also in this (root project) directory is package.json file:
{
"name": "gulp-book",
"version": "1.0.0",
"description": "A simple gulp project...",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ms",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"babelify": "^8.0.0",
"beeper": "^3.0.0",
"browser-sync": "^2.27.9",
"browserify": "^17.0.0",
"connect": "^3.7.0",
"cssnano": "^5.1.7",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-jshint": "^2.1.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"jshint": "^2.13.4",
"postcss-cssnext": "^3.1.1",
"regenerator-runtime": "^0.13.9",
"serve-static": "^1.15.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}
and .babelrc file:
{
"presets": [ "es2015", "stage-0" ]
}
When I'm executing gulp --gulpfile 1gulpfile.babel.js styles command I'm getting and error:
[18:55:28] Requiring external module babel-register
TypeError: Cannot read properties of undefined (reading 'default')
at C:\Users\Sergey\Documents\code\web\Getting-Started-with-Gulp-Second-Edition\gulpfile.babel.js:5:69
at Object.<anonymous> (C:\Users\Sergey\Documents\code\web\Getting-Started-with-Gulp-Second-Edition\gulpfile.babel.js:28:2)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at loader (C:\Users\Sergey\Documents\code\web\Getting-Started-with-Gulp-Second-Edition\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.<computed> [as .js] (C:\Users\Sergey\Documents\code\web\Getting-Started-with-Gulp-Second-Edition\node_modules\babel-register\lib\node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at requireOrImport (C:\Users\Sergey\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
So the question is - what is the error and how I can handle with it?

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
Error Stack Trace:
App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
...(options?.jsxRuntime !== 'classic' && {
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadCjsDefault (/Users/user/path/to/project/node_modules/#babel/core/lib/config/files/module-types.js:85:18)
at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/#babel/core/lib/config/files/module-types.js:57:16)
Here is my babel.config.js:
return {
presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
plugins: [
['inline-dotenv'],
['.....']
]
}
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.16.5",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/datetimepicker": "4.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/netinfo": "7.1.3",
"#react-native-community/push-notification-ios": "^1.2.2",
"#react-native-community/slider": "4.1.12",
"#react-navigation/native": "^5.1.4",
"aws-amplify": "^3.3.1",
"aws-amplify-react-native": "^4.2.6",
"axios": "^0.19.2",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-barcode-scanner": "~11.2.0",
"expo-camera": "~12.1.0",
"expo-constants": "~13.0.0",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-mail-composer": "~11.1.0",
"expo-notifications": "~0.14.0",
"expo-permissions": "~13.1.0",
"expo-secure-store": "~11.1.0",
"expo-sqlite": "~10.1.0",
"expo-updates": "~0.11.2",
"expo-web-browser": "~10.1.0",
"file-saver": "^2.0.2",
"jsbarcode": "^3.11.3",
"link": "^0.1.5",
"metro-config": "^0.64.0",
"npm": "^8.3.0",
"qs": "^6.9.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-barcode-expo": "^1.1.1",
"react-native-elements": "^3.2.0",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~2.1.0",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^8.6.0",
"react-native-paper": "^3.10.1",
"react-native-push-notification": "^3.5.2",
"react-native-reanimated": "~2.3.1",
"react-native-router-flux": "^4.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"react-navigation-animated-switch": "^0.6.4",
"react-navigation-drawer": "^2.4.11",
"react-navigation-header-buttons": "^3.0.5",
"react-router-dom": "^6.0.0-alpha.3",
"yarn": "^1.22.17"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^0.0.7",
"babel-jest": "^25.1.0",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-preset-expo": "9.0.1",
"eslint": "^6.8.0",
"expo-cli": "^5.0.2",
"jest": "^26.6.3",
"jest-expo": "^44.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^16.13.1"
},
"private": true
}
Any help will be greatly appreciated.

can you give your
package.json
node version
I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining

Just to let you know, it's a bug in babel-preset-expo when you are using Node 12.
Optional chainning is not supported in node12 and can be easily replaced with extra checks
https://github.com/expo/expo/pull/15545

From what I can see, Expo SDK 44 is still in beta.
The Error Stack Trace reads that newer syntax (in this case the optional chaining operator ?.) isn't being transpiled by Babel which causes the failure.
Simply downgrading to the stable SDK 43 should solve all issues.
P.S: This error has been reported to Expo already by the beta testers.

If you use expo v44 you have to update babel-preset-expo dev dependency to v9.0.2:
"babel-preset-expo": "9.0.2",

Downgrading to SDK 43.0.0 worked fine for me:
expo update 43.0.0

Keep getting Uncaught SyntaxError: cannot use import statement outside a module

I keep getting message even after trying out the following:
btw, I am using the exact same code as the lecture, so I'm guessing it might be a version issue.
1. Add "type":"module" in package.json file
//which throws a different error: [ERR_REQUIRE_ESM]: require() of ES Module not supported
2. use require() instead
// which throws another error: Uncaught ReferenceError: require is not defined
3. in html file, add type module
<script type = "module" src="./app/javascripts/app.js"></script>
app.js
// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";
//Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract';
import voting_artifacts from '../../build/contracts/Voting.json';
//require("../stylesheets/app.css")
//const Web3 = require("web3")
//const contract = require("truffle-contract")
//const voting_artifacts = require("../../build/contracts/Voting.json")
package.json
{
"name": "truffle-init-webpack",
"version": "0.0.1",
"description": "Frontend example using truffle v3",
"scripts": {
"build-amd": "npm run bundle-amd && npm run minify-amd",
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.1.8",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.0.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.6",
"web3": "^0.18.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"milsymbol": "^2.0.0",
"node-fetch": "^2.6.1",
"solc": "^0.8.10",
"truffle": "^4.0.1",
"truffle-hdwallet-provider": "latest"
}
}

Vue - failed to compile tiptap.esm.js

I'm new to npm and I'm trying to use tiptap in my project. The problem is that after I try to import tiptap, it raises error. This is what I did:
sudo npm install -g vue-cli
vue init webpack frontend
vue add vuetify - didn't do nothing so I did
npm add vuetify
Then I added this to main.js
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
npm install tiptap
Then I added import { Editor, EditorContent } from 'tiptap' to App.vue and it started raising error:
<template>
<div> ... SOME CODE ...
</div>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
name: 'App'
}
</script>
ERROR
Failed to compile.
./node_modules/tiptap/dist/tiptap.esm.js
Module parse failed: Unexpected token (126:23)
You may need an appropriate loader to handle this file type.
| } = this.node;
| const pos = this.getPos();
| const newAttrs = { ...this.node.attrs,
| ...attrs
| };
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 46:0-47
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Do you know what to do?
EDIT - package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.0.1",
"tiptap": "^1.32.1",
"vue": "^2.5.2",
"vuetify": "^2.4.7"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using
vue add vuetify
then install tiptap :
npm i tiptap
and use as explained in official docs

when i run enzyme example, i got "SyntaxError: /Users/a2014/Desktop/draghtml/test/test.js: Unexpected token (58:26)"

this is my test code
import React from 'react';
import { expect } from 'chai';
import { mount, shallow } from 'enzyme';
import Welcome from '../script/src/entry';
describe('<Welcome />', () => {
it('calls componentDidMount', () => {
const wrapper = mount(<Welcome />);
expect(Welcome.prototype.componentDidMount.calledOnce).to.equal(true);
});
});
this is my package.json
"scripts": {
"cover": "istanbul cover _mocha -- --delay",
"test": "mocha --compilers js:babel-core/register --require ./test/test.js",
"dev": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chai": "^4.1.1",
"enzyme": "^2.9.1",
"html-webpack-plugin": "^2.30.1",
"isparta-loader": "^2.0.0",
"istanbul": "^0.4.5",
"jsx-loader": "^0.13.2",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.4",
"mocha": "^3.5.0",
"phantomjs-polyfill": "0.0.2",
"react-addons-test-utils": "^15.6.0",
"react-test-renderer": "^15.6.1",
"should": "^11.2.1",
"webpack": "^3.4.1"
},
"dependencies": {
"babel-runtime": "^6.25.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
when i run "npm run test",it got an error,how to solve it?
SyntaxError: /Users/a2014/Desktop/draghtml/test/test.js: Unexpected token (58:26)
58: const wrapper = mount(<Welcome />);
it seems like dont't resolve

You need to use Babel with a correct preset to parse the JSX syntax of your component, which is not supported by NodeJS, event in the latest version, and it will probably won't be supported in the future.
One option is to install the React preset and include it in a .babelrc file:
{
"presets": ["react"]
}