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?
Related
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"
}
}
This is my first time dealing with typescript and I have no idea of what is happening. When I start my application with the command yarn dev:server the app loads the environment variables defined on the .env file, although i removed the dotenv package.
// package.json
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev:server": "ts-node-dev --respawn --transpile-only src/index.ts",
"typeorm": "npx ts=node ./nodemodules/typeorm/cli.js",
"test": "NODE_ENV=test jest"
},
"devDependencies": {
"#types/cors": "^2.8.10",
"#types/express": "^4.17.11",
"#types/jest": "^26.0.23",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.25.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"supertest": "^6.1.3",
"ts-node-dev": "^1.1.6",
"typescript": "^4.2.4"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"pg": "^8.6.0",
"reflect-metadata": "^0.1.13",
"typeorm": "^0.2.32"
}
}
// app.js
import "reflect-metadata";
import express, { Application } from "express";
import cors from "cors";
import "./database/connect";
import custumerRoutes from "./app/routes/Custumer";
interface IAppController {
express: Application;
}
class AppController implements IAppController {
express: Application;
constructor() {
this.express = express();
this.middlewares();
this.routes();
}
middlewares() {
this.express.use(cors());
this.express.use(express.json());
}
routes() {
this.express.use("/custumer", custumerRoutes);
this.express.get("/", (req, res) => {
res.send("🔥 server up and running");
});
}
}
const app = new AppController().express;
export { app };
is it possible that one of the packages i'm using is automatically loading the environment variables? if so, would it be possible to disable this functionality?
I found out that dotenv is a dependency of the package typeorm. This is why it was loading automatically.
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
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"]
}
This question already has answers here:
ES2015 "import" not working in node v6.0.0 with with --harmony_modules option
(4 answers)
Closed 5 years ago.
I'm running into an issue that seems to be very popular with Node / NPM
None of my search results seems to address my issue exactly...
I'm using Restify & NodeJs...but a simple npm run start produces the following error...
import logger from 'src/modules/amLogger.js';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
My packake.json file:
{
"name": "example",
"version": "0.0.1",
"author": "Me#me.com",
"engines": {
"node": ">=8.2.1",
"npm": ">=5.3.0"
},
"license": "MIT",
"dependencies": {
"ascii-art": "^1.4.2",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-generator": "^6.25.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-trailing-function-commas": "^6.20.0",
"babel-plugin-transform-async-to-module-method": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-plugin-transform-export-extensions": "^6.8.0",
"babel-plugin-transform-flow-strip-types": "^6.21.0",
"babel-plugin-transform-object-rest-spread": "^6.20.2",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-register": "^6.18.0",
"canvas": "^1.6.6",
"chalk": "^2.0.1",
"compression": "^1.7.0",
"documentation": "^5.0.1",
"dotenv": "^4.0.0",
"lodash": "^4.17.4",
"pretty-error": "^2.1.1",
"restify": "^5.0.1",
"restify-error": "^1.0.0",
"restify-plugins": "^1.6.0",
"socket.io": "^2.0.3",
"util": "^0.10.3",
"winston": "^2.3.1"
},
"devDependencies": {
"ascii-art": "^1.4.2",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-generator": "^6.25.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-trailing-function-commas": "^6.20.0",
"babel-plugin-transform-async-to-module-method": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-plugin-transform-export-extensions": "^6.8.0",
"babel-plugin-transform-flow-strip-types": "^6.21.0",
"babel-plugin-transform-object-rest-spread": "^6.20.2",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-register": "^6.18.0",
"canvas": "^1.6.6",
"chalk": "^2.0.1",
"compression": "^1.7.0",
"documentation": "^5.0.1",
"dotenv": "^4.0.0",
"es6-promise": "^4.1.1",
"lodash": "^4.17.4",
"pretty-error": "^2.1.1",
"restify": "^5.0.1",
"restify-error": "^1.0.0",
"restify-plugins": "^1.6.0",
"socket.io": "^2.0.3",
"util": "^0.10.3",
"winston": "^2.3.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"am:version": "/bin/sh scripts/display.sh",
"am:pretty-error": "node --require pretty-error/start am.js",
"am:start": "/bin/sh scripts/display.sh && node am.js",
"start": "node am.js"
},
"description": "example",
"main": "am.js"
}
Here is my am.js file
'use strict';
require('dotenv').config();
import logger from 'src/modules/amLogger.js';
import chalk from 'chalk';
import util from 'util';
/**
* Module Dependencies
*/
const restify = require('restify'),
winston = require('winston'),
errs = require('restify-errors'),
art = require('ascii-art'),
compression = require('compression');
// create the Restify Server
const server = restify.createServer({
name: 'example',
version: 'v0.0.1',
...
The error is happening at import logger from 'src/modules/amLogger.js'; however if I comment out this line the error simply moves to the next import statement -- I've also tried running this without the 'use strict';
What am I missing?
Node doesnt support yet es6 imports here you have an article that explains it
https://medium.com/the-node-js-collection/an-update-on-es6-modules-in-node-js-42c958b890c