npm run serve on vue cli app generated this error, "ERROR Error: .presets[0] must be a string, object, function"

Question

I just fixed 5 high npm severity vulnerabilities, subsequently I ran into several errors from babel and eslint conflicts. I am running:

node 16.14.0 @vue/cli 4.5.9

Based on previous errors , I had to remove node-sass and switch to dart sass (sass 1.50.0), and changed babel-eslint to @babel/eslint-parser 7.5.4. Now the only error is: Error: .presets[0] must be a string, object, function The offending files are all my config files for babel, vue and jest. Is there a different dependency I need to add to have compatibility? I followed these posts which helped fix other errors along the way, eslint, this, sass loader error, and this eslint is not constructor. This seems to be a commonjs issue as seen in the screenshot. Is this an eslint error or a babel error?

I went to the source of the error in

@babel/core/lib/config/validation/option-assertions and there is this:

function assertPluginTarget(loc, value) {
  if ((typeof value !== "object" || !value) && typeof value !== 
    "string" && typeof value !== "function") {
     throw new Error(`${msg(loc)} must be a string, object, 
 function`);
  }
  return value;
}

I have no idea what to do with this?

package.json

{
 "name": "cookie_mvp_next",
 "version": "0.1.0",
 "private": true,
 "proxy": "http://localhost:5000",
 "scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "test": "vue-cli-service test:unit --watch",
   "test:e2e": "vue-cli-service test:e2e",
   "lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/core": "^7.17.9",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.6",
"@googlemaps/js-api-loader": "github:googlemaps/js-api-loader",
"@stripe/stripe-js": "^1.17.1",
"axios": "^0.21.1",
"base-64": "^1.0.0",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"html-webpack-plugin": "^5.5.0",
"jwt-decode": "^3.1.2",
"nanoid": "^3.1.20",
"register-service-worker": "^1.7.1",
"stripe": "^8.174.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuelidate": "^0.7.6",
"vuex": "^3.4.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.5.4",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-plugin-pwa": "~5.0.4",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "^5.0.4",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "^5.0.4",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "^1.1.2",
"eslint": "^8.12.0",
"eslint-config-prettier": "^7.2.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^8.6.0",
"flush-promises": "^1.0.2",
"prettier": "^1.19.1",
"sass": "^1.50.0",
"sass-loader": "^12.6.0",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11"
 }
}

babel.config.js

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset"[
      ("@vue/app",
      {
        modules: "commonjs"
      })
    ]
  ]
};

jest.config.js

module.exports = {
  preset: "@vue/cli-plugin-unit-jest"
};

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/main.scss";`
      }
    }
  },
  transpileDependencies: []
};

score 0 · Answer 1 · answered Apr 09 '22 at 08:31

Your babel.config.js file looks ill-formatted, it should be probably

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset", [
      "@vue/app",
      {
        modules: "commonjs"
      }
    ]
  ]
};

Note the comma after "@vue/cli-plugin-babel/preset" and the lack of parentheses ( and ).

npm run serve on vue cli app generated this error, "ERROR Error: .presets[0] must be a string, object, function"

1 Answers1