Develop Reference

unable to use babel to run file

I'm trying to get more familiar with modern javascript and am following a tutorial. Early setup includes running a file from another file. I have a server.js file with a simple 'import './config'; command. As a test that repo setup is correct, I should be able to run 'babel server.js'. But I keep returning the error shown below. How do I troubleshoot so that I can successfully run babel commands?
myName#SE-C02YNKJ9LVCF in ~/Linkedin_Learning/modern_javascript_app_example (main) > babel src/server.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
Things I've tried so far
as per tutorial, tried updating my bash_profile w/ 'export PATH=$PATH:./node_modules/.bin'
tried setting it in global PATH variable
setting all devDependencies in package.json file that mention #babel to consistent version.
After updating package.json file, new error is below:
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/robertgorowsky/Linkedin_Learning/modern_javascript_app_example/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///Users/myName/Linkedin_Learning/modern_javascript_app_example/babel.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
When I run babel --version, it returns '7.19.3 (#babel/core 7.19.3)' matching package.json file.
contents of files:
content.js
console.log('config test')
server.js
import './config';
package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning fullstack JavaScript Dev with MongoDB, Node.js, React.js",
"main": "index.js",
"type": "module", //added this line after first answer
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rgorowsky/modern_javascript_app_example.git"
},
"author": "",
"license": "GPL-3.0",
"bugs": {
"url": "https://github.com/rgorowsky/modern_javascript_app_example/issues"
},
"homepage": "https://github.com/rgorowsky/modern_javascript_app_example#readme",
"dependencies": {
"express": "^4.18.1",
"mongodb": "^4.10.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#babel/node": "^7.19.1",
"#babel/core": "^7.19.3",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-plugin-react": "^7.31.8",
"nodemon": "^2.0.20",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /|.js$/,
exclude: /.node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
babel.config.js
module.exports = {
presets: ['#babel/react', '#babel/env'],
plugins: ['#babel/plugin-proposal-class-properties'],
};
A picture of my repo file structure for reference:

please do the following step
add "type": "module" in package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning ...",
"main": "index.js",
"type": "module",
"scripts": {
and use import './content.js'; not import './config'; in serer.js file

What does this mean: TypeError: dest.on is not a function

I am a newbie, following a tutorial about modern webdev workflow. I get this error message in my console. TypeError: dest.on is not a function
I know, there are related questions and answers here. But I don't understand them. Because I don't know what "dest.on" is related to and what does it do.
This is the code so far:
var gulp = require("gulp");
var sass = require("gulp-sass");
var sourcemaps = require("gulp-sourcemaps");
var autoprefixer = require("auto-prefixer");
var imagemin = require("gulp-imagemin");
var browserSync = require("browser-sync").create();
gulp.task("css", function() {
return gulp
.src("src/sass/**/*.scss")
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(
autoprefixer({
browsers: ["last 2 versions"]
})
)
.pipe(sourcemaps.write("./maps"))
.pipe(gulp.dest("dist/css"));
});
Could anyone explain, what the error message means and how I can solve this particular problem? I am sorry for the redundancy but I found no solution in the existing answers.
Edit::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Maybe it helps adding the package.json
{
"name": "sitepointresponsivewebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"auto-prefixer": "^0.4.2",
"browser-sync": "^2.26.3",
"gulp": "^4.0.0",
"gulp-imagemin": "^5.0.3",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5"
}
}
This is the complete terminal error message
Beratungs-MacBook-Pro-2:sitepointResponsiveWebsite Beratung1$ gulp css
[14:04:02] Using gulpfile ~/Desktop/sitepointResponsiveWebsite/gulpfile.js
[14:04:02] Starting 'css'...
[14:04:02] 'css' errored after 12 ms
[14:04:02] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /Users/Beratung1/Desktop/sitepointResponsiveWebsite/gulpfile.js:13:6
at taskWrapper (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:396:14)
at runBound (domain.js:409:12)
at asyncRunner (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/async-done/index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)

With unfamiliar error messages like this, the stack trace is usually the most helpful.
at DestroyableTransform.Readable.pipe (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /Users/Beratung1/Desktop/sitepointResponsiveWebsite/gulpfile.js:13:6
The error is happening in the pipe() method in readable-stream. dest is the name of the first argument to pipe(); the fact that "dest.on" does not exist means that something you passed to pipe() is not actually a stream.
The second stack frame refers to line 13, which is this pipe() call:
.pipe(
autoprefixer({
browsers: ["last 2 versions"]
})
)
So, the return value of autoprefixer() is not a stream.
autoprefixer is:
var autoprefixer = require("auto-prefixer");
Looking at that module on npm: https://www.npmjs.com/package/auto-prefixer. Looks weird, it definitely isn't a stream API though.
The real autoprefixer module is called autoprefixer, no dash. You can use it together with gulp-postcss as described here: https://www.npmjs.com/package/autoprefixer#gulp
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')
// .. etc ..
.pipe(postcss([ autoprefixer({
// .. options ..
}) ]))

Webpack doesn't generate bundle.js

my webpack doesn't generate file though no errors shown. PLS help :D
i'm new to all this so dont be harsh pls :D
code in webpack.config.js
module.exports = {
entry : ['./app/index.js'],
output : {
path : '/build',
filename: 'bundle.js'
}
}
using npm run build, no errors returned.
package.json
{
"name": "es6",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"webpack": "^3.10.0"
},
"description": ""
}

After making a fresh directory, copying in your code as is, I get the following:
Error: EACCES: permission denied, mkdir '/build'
at Error (native)
It's trying to access the root level /build directory (which doesn't exist, at least for me).
Tweaking the config a bit more leads to this:
const path = require('path')
module.exports = {
entry : ['./app/index.js'],
output : {
// Get the path including the current directory node is running in
path : path.resolve(__dirname, './build'),
filename: 'bundle.js'
}
}
Which spits out a successful bundle.
There were no errors? Any output at all?

grunt required config property missing

setting up a new project that will have multiple grunt tasks that I want to load from task files.
when running my first task, 'core' which is supposed to build the core css for the site, I'm getting an error that I can't seem to resolve. been doing some googling and not finding this specific issue. any issues with the same error message usually were the result of a typo or misplaced curly braces on the part of the OP. Not sure that's the case here, but perhaps someone else sees what I'm obviously not seeing.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
};
grunt-tasks/grunt-core.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.config('core', {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
}
});
grunt.registerTask('core', ['sass:dist']);
};
error:
$ grunt core
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.dist" missing. Use --force to continue.
Aborted due to warnings.
I've tried a few different things. If I change the registerTask to this:
grunt.registerTask('core', ['sass']);
I get this error:
$ grunt core
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
not sure if this is relevant, but here is package.json and some specs on the system I'm using.
Mac OSX Yosemite
node version v5.10.1
npm 3.8.3
package.json
{
"name": "TEST",
"version": "1.0.0",
"description": "test test test",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/path/to/repo"
},
"author": "me <me#example.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/path/to/repo/issues"
},
"homepage": "https://github.com/path/to/repo",
"devDependencies": {
"angular": "^1.5.5",
"bootstrap-sass": "^3.3.6",
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^1.1.0",
"jquery": "^2.2.3",
"sass-lint": "^1.5.1"
},
"dependencies": {
"jquery": "^2.2.3"
}
}

Looks like it was user error on my part.
in the task file, I had grunt.config(), but I should have had grunt.initConfig()
var taskConfig = {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
},
concat : {
core : {
src : ['node_modules/jquery/dist/jquery.js', 'js/main.js'],
dest : "../dev/js/main.js"
}
}
};
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig(taskConfig);
grunt.registerTask('core', ['concat:core','sass']);
};

Grunt: Task "default" not found

I am trying to set up some simple Grunt tasks but upon running them I get a Warning in the terminal "Warning: Task "default" not found.
I have simplified the gruntfile down to just one task, to reduce the chance this was caused by syntax errors but I am still getting the same warning...
gruntfile.js
exports.module = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: {
'/public/scripts/test.min,js' : ['/public/scripts/test.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
package.json
{
"name": "CustomersCRUD",
"version": "0.0.1",
"description": "Customer CRUD Application",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dan Hutchinson",
"license": "ISC",
"dependencies": {
"express": "^4.6.1",
"serve-favicon": "^2.0.1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.0"
}
}
warning given
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Many thanks!

Okay, didn't catch this before but it's module.exports not exports.module
That should fix it. Also, I don't believe your file references need a / before them.

I see a comma here: '/public/scripts/test.min,js'
Could that be your issue?