Skip to content
Advertisement

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: file structure

Advertisement

Answer

please do the following step

  1. add “type”: “module” in package.json

    { “name”: “modern_javascript_app_example”, “version”: “1.0.0”, “description”: “Learning …”, “main”: “index.js”, “type”: “module”, “scripts”: {

  2. and use import ‘./content.js’; not import ‘./config’; in serer.js file

Advertisement