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

Bundling amazon-sp-api with webpack

I'm, trying to generate a bundle from a javascript to get some requests from Amazon Selling Partner API. Actually, I have a mockup of a getOrders request which works in Node.js by using the
[amazon-sp-api client package] (https://www.npmjs.com/package/amazon-sp-api#setting-credentials-from-environment-variables).
As I need to get the script working in Oracle Netsuite, I would need to copy that script to the Netsuite account as a unique-file bundle.
So, I have generated the bundle I need but it launches a TypeError when trying to execute it as a unique file with Node. Indeed, the error header looks like this:
...readdirSync(__dirname + '/resources').reduce((eps, ep) => {
^
TypeError: readdirSync is not a function
It appears to be some issue about my webpack.config.js as I'm using a basic config and it probably requires specific details to lead with the dependencies.
There is a dependency I use in my script, which at once use third-party dependencies:
const SellingPartnerAPI = require('amazon-sp-api');
My webpack.config.js looks like this:
const path = require('path');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//This property defines where the application starts
entry:'./app.js',
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'get_orders.js'
},
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
/* new HtmlWebpackPlugin({
template: './src/index.html'
})*/
]
}
And the package.json is this:
{
"name": "orders-importer-bundle",
"version": "1.0.0",
"description": "Project to create a test blundle to import orders from Amazon to Netsuite using SP-API and SuiteScript.",
"main": "app.js",
"scripts": {
"pack": "webpack-dev-server --mode development --open --hot",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "node ./app.js"
},
"repository": {
"type": "git",
"url": "main"
},
"keywords": [
"webpack",
"bundle",
"netsuite",
"amazon",
"sp-api"
],
"author": "Roberto Carlos Rodriguez",
"license": "ISC",
"dependencies": {
"amazon-sp-api": "^0.7.1"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.7",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"babel-preset-env": "^1.7.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
}

Cannot publish app via github pages using webpack, why?

I'm building a simple application using Tailwindcss, JavaScript & Webpack and trying to publish it via Github Pages.
While running the app via local host works fine, I am encountering a problem when trying to publish the app via gh-pages. I'm receiving the error message "404 File not found", why is that? Are there any dependencies missing in the webpack.config.js or package-json file?
Any help is appreciated.
Please also see github repo: https://github.com/e-d-i/shoppingCart
package.json
"name": "shopping-cart",
"version": "1.0.0",
"description": "A simple shopping cart using HTML, CSS / Tailwind CSS, JavaScript & Webpack",
"main": "webpack.config.js",
"dependencies": {
"css-loader": "^6.3.0",
"gh-pages": "^3.2.3",
"mini-css-extract-plugin": "^2.3.0",
"postcss": "^8.3.9",
"postcss-loader": "^6.1.1",
"tailwindcss": "^2.2.16",
"webpack": "^5.56.1",
"webpack-cli": "^4.8.0"
},
"homepage": "https://e-d-i.github.io/shoppingCart/",
"devDependencies": {},
"scripts": {
"build": "webpack --config webpack.config.js",
"deploy": "gh-pages -d build"
},
"keywords": [],
"author": "e-d-i",
"license": "ISC"
}```
**postcss.config.js**
```const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss
],
};```
**webpack.config.js**
```const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: "./src/script.js",
output: {
filename: "main.js",
path: path.resolve(__dirname,"./build")
},
plugins: [new MiniCssExtractPlugin({
filename: "styles.css",
})],
module: {
rules: [
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
}
]
}
}```

You should add a "predeploy" in your package.json like so:
"predeploy": "npm run build"
and run it locally before you deploy to github pages.
source: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Webpack - npm run start and build doesn't work?

I am used to create react projects using create-react-app but i decided to create one without it but i am stuck in webpack configuration as i am new to it:
This is my package.json file:
{
"name": "package.json",
"version": "1.0.0",
"description": "Demo",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"server": "^1.0.30",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js file:
const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rules = [
{
test: /\.js$/,
exclude: /node-modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
exclude: /node-modules/,
use: ['style-loader', 'css-loader']
}
]
module.exports = {
entry: path.join(__dirname, 'src', index.js),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/build')
},
module: {rules},
plugins: [
new HtmlWebpackPlugin({template: './public/index.html'})
]
}
.babelrc.json file:
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
this is my whole project folders and files tree:
When i run npm run start or npm run build, it fails:
with npm run start, i get this error:
internal/modules/cjs/loader.js:968
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
With npm run build:
[webpack-cli] ReferenceError: index is not defined
I am new to webpack and i can't figure out where the problem is, i think i have installed all files and configurations required to make it work, so where is the problem exactly??

I think the problem is, you wrote index without string quotes.
entry: path.join(__dirname, 'src', index.js)
This should be
entry: path.join(__dirname, 'src', 'index.js')
It is like a variable when you write without string quotes. You can try the same this on console.log.
Because index is not defined.

There is an open bug report stating webpack-server 3.11 is not compatible with with webpack-cli v4.
The report can be found here: Issue 2759
Yes - webpack-dev-server does not work with webpack-cli v4
Link to comment: https://github.com/webpack/webpack-dev-server/issues/2759#issuecomment-706668920
The solution is to revamp your project.json file by changing to compatible versions (and welcome to Webpack :-) )

"main": "index.js" in package.json should be "main" : "src/index.js"

use LESS in webpack and es6

I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.
ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src
# ./src/app.js 3:0-24
My webpack.config.js is :
module.exports = {
context: __dirname + '/src',
entry:'./app.js',
module:{
loaders:[
{
//create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
//https://github.com/babel/babel-loader
test:/\.js$/,
exclude:'/node_modules',
loader:'babel',
query: {
presets: ['es2015']
}
},
{
//take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D
//https://github.com/webpack/less-loader
test:/\.less$/,
exclude:'/node_modules',
loader:"style!css!less"
}
]
}
};
My app.js is:
import '../style.less';
class Log{
constructor(){
console.log("sdfsdf");
}
}
new Log();
Inside the src directory i have the app.js , index.html and style.less files.
finally , this is my package.json file:
{
"name": "webpack-angular-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
any idea why i'm getting this error ?
Thanks

i had the exact same problem like you. i managed to solve that with tiny change.
path.join(__dirname, 'src')
instead of using:
__dirname + '/src/
now, make sure that your webpack.config.js look like:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
...
and when I import the style.less i used like above
import './style.less';

If all files are in the same directory (src), the first line in app.js should be:
import './style.less';