We Keep Coding

Requiring external module #babel/register ReferenceError: require is not defined

I have a front-end build, which I was given and which I am trying to get to build. Whenever I run yarn run dev, I get the following:
(base) ➜ project git:(master) ✗ yarn run dev
yarn run v1.22.17
$ gulp
[22:18:45] Requiring external module #babel/register
ReferenceError: require is not defined
at file:///home/user/sites/project/gulpfile.babel.js:5:20
at ModuleJob.run (internal/modules/esm/module_job.js:145:37)
at async Loader.import (internal/modules/esm/loader.js:182:24)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What can I do to troubleshoot and fix this?
My installation steps were as follows:
yarn global add gulp-cli
yarn global add bem-tools-core
yarn
yarn run dev
I have tried installing with npm as well, just in case it might make a difference. It does not. The same error persists.
The top of the gulpfile.babel.js looks as follows:
"use strict";
import gulp from "gulp";
const requireDir = require("require-dir"),
paths = {
views: {
src: [
"./src/views/index.pug",
"./src/views/pages/*.pug"
],
The package.json is like this:
{
"name": "gulp-pug-starter",
"description": "Frontend development with pleasure",
"author": "Andrey Gorokhov",
"repository": {
"type": "git",
"url": "https://github.com/andreyalexeich/gulp-pug-starter.git"
},
"license": "MIT",
"type": "module",
"babel": {
"presets": [
"es2015"
]
},
"scripts": {
"dev": "gulp",
"build": "gulp prod --production",
"build:views": "gulp views --production",
"build:styles": "gulp styles --production",
"build:scripts": "gulp scripts --production",
"build:images": "gulp images --production",
"build:webp": "gulp webp --production",
"build:sprites": "gulp sprites --production",
"build:fonts": "gulp fonts --production",
"build:favicons": "gulp favicons --production",
"build:gzip": "gulp gzip --production",
"lint:styles": "stylelint \"src/**/*.scss\" --syntax=scss",
"lint:styles --fix": "stylelint \"src/**/*.scss\" --syntax=scss --fix",
"lint:scripts": "eslint --color ./src/blocks",
"lint:scripts --fix": "eslint --fix --color ./src/blocks",
"bem-c": "bem create $* -l src/blocks/components",
"bem-m": "bem create $* -l src/blocks/modules"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.17.0",
"babel-eslint": "~10.1.0",
"babel-loader": "^8.0.5",
"babel-register": "^6.26.0",
"bem-tools-core": "bem-tools/bem-tools-core",
"bem-tools-create": "bem-tools/bem-tools-create",
"browser-sync": "^2.23.6",
"del": "^5.1.0",
"eslint": "~7.7.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "~7.0.1",
"gulp-clean-css": "~4.3.0",
"gulp-debug": "~4.0.0",
"gulp-favicons": "^2.3.1",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-if": "^3.0.0",
"gulp-imagemin": "~7.1.0",
"gulp-newer": "^1.4.0",
"gulp-plumber": "^1.2.0",
"gulp-pug": "^4.0.1",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "~4.1.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-svg-sprite": "^1.5.0",
"gulp-watch": "^5.0.0",
"gulp-webp": "^4.0.1",
"husky": "^4.2.1",
"imagemin-giflossy": "^5.1.10",
"imagemin-jpeg-recompress": "~7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "~9.0.0",
"imagemin-webp": "^6.0.0",
"imagemin-zopfli": "^7.0.0",
"lint-staged": "^10.0.3",
"require-dir": "^1.2.0",
"stylelint": "^13.6.1",
"stylelint-order": "^4.1.0",
"stylelint-selector-bem-pattern": "^2.1.0",
"webpack": "~4.44.1",
"webpack-stream": "^5.2.1",
"yargs": "~15.4.1"
},
"dependencies": {
"bootstrap": "^5.1.1",
"gsap": "./gsap-bonus.tgz",
"headroom.js-latest": "^0.9.6",
"jquery": "^3.6.0",
"jquery-ui_1.12": "^1.12.0",
"magnific-popup": "^1.1.0",
"owl.carousel": "^2.3.4",
"popper.js": "^1.16.1",
"smart-grid": "^2.1.2",
"swiper": "6.8.4"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"!(_*).scss": [
"stylelint --fix --color --config ./.stylelintrc"
],
"*.js": [
"eslint --fix --color"
]
}
}

Namespace has no exported member 'LocationState'

I get this error when I try to run my TypeScript application:
Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'.
This is my package.json:
{
"name": "motor.ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#digital/react-avis-atom": "^2.4.0",
"#elastic/apm-rum": "^5.6.1",
"#types/react-router-dom": "^4.3.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"moment": "^2.22.2",
"query-string": "5",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-moment": "^0.7.9",
"react-router-dom": "^4.4.0-alpha.1",
"react-scripts-avis": "2.16.75"
},
"scripts": {
"start": "react-scripts-avis start",
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts-avis build'",
"build:sys": "REACT_APP_ENV=sys yarn run build",
"build:uat": "REACT_APP_ENV=uat yarn run build",
"build:production": "REACT_APP_ENV=production yarn run build",
"test": "react-scripts-avis test --env=jsdom",
"eject": "react-scripts-avis eject",
"lint": "yarn tslint",
"tslint": "tslint -t stylish -c tslint.json -e '**/node_modules/**/*' 'src/**/*.+(ts|tsx)'",
"tslint-fix": "yarn tslint --fix",
"tslint-staged": "LIST=`git diff-index --cached --name-only HEAD | grep .*\\\\.ts | grep -v json`; if [[ ! -z ${LIST} ]]; then tslint -t stylish $LIST; else echo 'empty'; fi",
"analyze": "source-map-explorer build/static/js/main.*",
"uploadSrcMap": "NODE_TLS_REJECT_UNAUTHORIZED=0 node ./tools/sourceMapUploader.js"
},
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"devDependencies": {
"#types/classnames": "^2.2.6",
"#types/enzyme": "^3.1.13",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.1",
"#types/node": "^10.9.4",
"#types/react": "^16.4.13",
"#types/react-dom": "^16.0.7",
"#types/webpack-env": "^1.13.6",
"axios-mock-adapter": "^1.15.0",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.1",
"source-map-explorer": "^1.6.0",
"typescript": "^3.0.3"
},
"homepage": "."
}
How do I resolve this?

Your version of #types/react-router-dom is too old, try upgrading to a 5.x version.

SyntaxError: Cannot use import statement outside a module on heroku

I am using babel to bundle the file and run the bundled file to run the server. However, I am getting an error of 'SyntaxError: Cannot use import statement outside a module' on heroku. I am using #babel/cli, #babel/core, #babel/node, #babel/preset-env and babel-plugin-module-resolver. My babelrc looks like following
{
"presets": [
"#babel/preset-env"
],
"plugins": [
"graphql-tag"
]
}
Here is my script on package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "env-cmd -f ./dev/.env nodemon --exec babel-node app/server.js",
"syncGraphql": "rsync -a --prune-empty-dirs --include 'app/graphql/*' --include '*.graphql' 'app/graphql' 'dist'",
"build": "babel app/ -d dist && npm run syncGraphql",
"staging": "env-cmd -f ./staging/.env nodemon --exec babel-node app/server.js",
"start:dev": "cross-env NODE_ENV=production nodemon --exec babel-node app/server.js",
"start": "cross-env NODE_ENV=production node dist/server.js"
},
"engines": {
"node": "14.x"
},
I found similar question with two solution. One with the same babelrc I have and another to use type: module in package.json. But this way I get other issue like
internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module (.....)
There is no problem while I run the script yarn start:dev. But, I get the issue when running a bundled file on heroku
Here is the package.json
{
"name": "api-server",
"version": "0.0.1",
"description": "Description",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -rf dist && mkdir dist",
"dev": "env-cmd -f ./dev/.env nodemon --exec babel-node app/server.js",
"syncGraphql": "rsync -a --prune-empty-dirs --include 'app/graphql/*' --include '*.graphql' 'app/graphql' 'dist'",
"build": "babel app/ -d dist && npm run syncGraphql",
"staging": "env-cmd -f ./staging/.env nodemon --exec babel-node app/server.js",
"start:dev": "cross-env NODE_ENV=production nodemon --exec babel-node app/server.js",
"start": "node dist/server.js"
},
"engines": {
"node": "14.x"
},
"dependencies": {
"apollo-errors": "^1.9.0",
"apollo-server-express": "^2.24.1",
"bcryptjs": "^2.4.3",
"better-module-alias": "^1.1.0",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"dataloader": "^2.0.0",
"env-cmd": "^10.1.0",
"express": "^4.17.1",
"express-session": "^1.17.2",
"github-graphql-client": "^1.0.0",
"graphql": "^15.5.0",
"graphql-tools": "^7.0.5",
"helmet": "^4.6.0",
"http-status": "^1.5.0",
"isomorphic-git": "^1.8.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"merge-graphql-schemas": "^1.7.8",
"mongoose": "^5.12.10",
"node-fetch": "^2.6.1",
"passport": "^0.4.1",
"passport-github2": "^0.1.12",
"passport-gitlab2": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/node": "^7.14.2",
"#babel/preset-env": "^7.14.2",
"axios": "^0.21.1",
"babel-plugin-graphql-tag": "^3.3.0",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.26.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.23.2",
"fs-extra": "^10.0.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"nodemon": "^2.0.7",
"xmlhttprequest": "^1.8.0"
}
}

Access nuxt.js env variable in feathers client plugin in production mode

I can't seem to access the process.env.baseUrl variable from the feathers client plugin. The variable returns an empty string. I can use the variable on server side. I can resolve it by hardcoding the url in env.baseUrl in nuxt.config.js, but I'd rather not. The weird thing is that it runs without any issues on a windows 10 machine in both prod and dev mode. However on Ubuntu vm in the Google Cloud it doesn't work. It also doesn't work when running from a docker container. Please advice. Am I missing something obvious?
Configuration
system
Ubuntu 16.04.3 LTS
Node 9.4.0
package.json
{
"name": "my-app",
"description": "",
"version": "0.0.0",
"main": "src",
"keywords": [
"feathers"
],
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/"
},
"engines": {
"node": "^8.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
"dependencies": {
"#feathersjs/authentication": "^2.1.1",
"#feathersjs/authentication-jwt": "^1.0.2",
"#feathersjs/authentication-local": "^1.1.0",
"#feathersjs/client": "^3.4.0",
"#feathersjs/configuration": "^1.0.2",
"#feathersjs/errors": "^3.2.2",
"#feathersjs/express": "^1.2.0",
"#feathersjs/feathers": "^3.1.1",
"#feathersjs/socketio": "^3.2.0",
"#nuxtjs/axios": "^5.0.1",
"#nuxtjs/font-awesome": "^1.0.3",
"#nuxtjs/pwa": "^2.0.5",
"#sendgrid/mail": "^6.2.1",
"babel-eslint": "^8.2.1",
"buefy": "^0.6.3",
"compression": "^1.7.1",
"cookie-storage": "^3.1.0",
"cors": "^2.8.4",
"feathers-authentication-management": "^2.0.0",
"feathers-mongodb": "^2.9.1",
"feathers-stripe": "^0.4.1",
"feathers-vuex": "^1.1.4",
"helmet": "^3.10.0",
"izitoast": "^1.2.0",
"mongodb": "^3.0.2",
"node-ses": "^2.1.0",
"nuxt": "^1.4.0",
"nuxt-stripe-module": "^2.0.0",
"pug": "^2.0.0-rc.4",
"serve-favicon": "^2.4.5",
"socket.io-client": "^2.0.4",
"vee-validate": "^2.0.5",
"vue-bulma-rating": "^1.0.1",
"vue-no-ssr": "^0.2.2",
"vue-notifications": "^0.9.0",
"vue-observe-visibility": "^0.3.1",
"vue-smoothscroll": "^0.1.1",
"vue-social-sharing": "^2.3.3",
"vue-stripe-elements": "^0.2.3",
"vue2-animate": "^1.0.4",
"winston": "^2.4.0"
},
"devDependencies": {
"babel-plugin-module-resolver": "^3.1.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.1.3",
"eslint": "^4.17.0",
"mocha": "^4.1.0",
"node-sass": "^4.7.2",
"nodemon": "^1.14.12",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"sass-loader": "^6.0.6"
}
}
feathers.js
import feathers from '#feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'
console.log('logging in the client')
console.log(process.env.baseUrl)
const socket = io(process.env.baseUrl)
const feathersClient = feathers()
.configure(feathers.socketio(socket))
.configure(feathers.authentication({ storage: new CookieStorage() }))
export default feathersClient
nuxt.config.js
const path = require('path');
module.exports = {
/*
** Headers of the page
*/
head: {
},
loading: false,
loadingIndicator: 'circle',
plugins: [
{src: '~plugins/buefy'},
{ src: '~/plugins/vue-observe-visibility' },
{ src: '~/plugins/feathers' },
],
manifest: {
theme_color: '#3B8070'
},
/*
** Modules
*/
modules: [
'#nuxtjs/pwa'
],
rootDir: path.resolve(__dirname),
srcDir: path.resolve(__dirname, 'client'),
dev: process.env.NODE_ENV !== 'production',
build: {
vendor: [
'#feathersjs/client',
'socket.io-client',
],
postcss: {
plugins: {
'postcss-custom-properties': false
}
}
},
env: {
baseUrl: process.env.BASE_URL
}
}

The issue is because of your build and prestart stage. When you have below package.json
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
The build and prestart are run as independent commands and they will not see the HOST=0.0.0.0 PORT=8080 NODE_ENV=production envs. So you should either do it like below
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
Or use npm-run-all

This has nothing to do with nuxt.js. It has to do with that regardless of cross-env the environment variables from package.json do not get set. The only option is to export the environment variables from the shell in Ubuntu itself. The app works as designed.

Non deterministic behavior on dependencies - nodejs

I would solve a warning: when I run yarn install all dependencies are installed but I receive this warning:
warning Pattern ["esprima-fb#~3001.0001.0000-dev-harmony-fb"] is
trying to unpack in the same destination
"/Users/Me/Library/Caches/Yarn/v1/npm-esprima-fb-3001.1.0-dev-harmony-fb-b77d37abcd38ea0b77426bb8bc2922ce6b426411"
as pattern ["esprima-fb#~3001.1.0-dev-harmony-fb"]. This could result
in a non deterministic behavior, skipping.
If I delete node_modules folder and I run yarn install I don't receive the warning, when I re-execute yarn install I receive it again.
I suppose the problem is in yarn-lock file.
package.json
{
"name": "n1",
"version": "1.0.0",
"description": "none ",
"author": "none",
"main": "src/index.js",
"private": false,
"engines": {
"node": ">=7.6",
"yarn": "*"
},
"scripts": {
"precommit": "yarn lint",
"prestart": "yarn docs",
"start": "cross-env NODE_ENV=production pm2 start ./src/index.js",
"dev": "nodemon ./src/index.js",
"lint": "eslint **/*.js --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:fix": "yarn lint -- --fix",
"lint:watch": "yarn lint -- --watch",
"test": "cross-env NODE_ENV=test nyc --reporter=html --reporter=text mocha --timeout 20000 --recursive src/api/tests",
"test:unit": "cross-env NODE_ENV=test mocha src/api/tests/unit",
"test:integration": "cross-env NODE_ENV=test mocha --timeout 20000 src/api/tests/integration",
"test:watch": "cross-env NODE_ENV=test mocha --watch src/api/tests/unit",
"coverage": "nyc report --reporter=text-lcov | coveralls",
"postcoverage": "opn coverage/lcov-report/index.html",
"validate": "yarn lint && yarn test",
"postpublish": "git push --tags",
"docs": "apidoc -i src -o docs",
"postdocs": "opn docs/index.html"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"blubird": "^0.0.1-security",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"chalk": "^2.3.0",
"color": "^2.0.1",
"compression": "^1.7.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"cross-env": "^5.1.3",
"dotenv-safe": "^4.0.4",
"espree": "^3.5.2",
"esprima": "^4.0.0",
"express": "^4.16.2",
"express-validation": "^1.0.2",
"express-winston": "^2.4.0",
"helmet": "^3.9.0",
"http-status": "^1.0.1",
"joi": "^10.6.0",
"jwt-simple": "^0.5.1",
"lodash": "^4.17.4",
"method-override": "^2.3.10",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"mongoose": "^4.13.7",
"morgan": "^1.9.0",
"morgan-body": "^2.0.2",
"mysql": "^2.15.0",
"mysql2": "^1.5.1",
"nedb": "^1.8.0",
"node-geocoder": "^3.21.1",
"only": "0.0.2",
"passport": "^0.4.0",
"passport-jwt": "^3.0.1",
"pm2": "^2.9.1",
"readline-sync": "^1.4.7",
"request-promise": "^4.2.2",
"sequelize": "^4.28.6",
"serve-favicon": "^2.4.5",
"winston": "^2.4.0",
"yarn": "^1.3.2"
},
"devDependencies": {
"apidoc": "^0.17.5",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"coveralls": "^2.13.1",
"eslint": "^4.13.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.8.0",
"husky": "^0.14.3",
"mocha": "^3.5.3",
"nodemon": "^1.14.1",
"nyc": "^11.4.1",
"opn-cli": "^3.1.0",
"sinon": "^3.3.0",
"sinon-chai": "^2.14.0",
"supertest": "^3.0.0"
},
"license": "MIT"
}
yarn-lock
https://pastebin.com/vTrLHWff

Try removing both node_modules and yarn.lock:
rm -rf node_modules and rm yarn.lock
And then try running:
npm run rebuild which seem to help to resolve the issue.