Create Sourcemaps with Vue3 in babel.config.js? - babeljs

Question

I'm using Vue3. I want generate sourcemaps using Babel and then get the relative path.
Here is my folder structure for the frontend dir:
├── CONTRIBUTING.MD
├── Changelog.js
├── README.md
├── babel.config.js
├── config
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── sample.env
├── src
├── tailwind.config.js
├── tests
└── unit-test
I'm working on integrating Sentry with the Vue3 frontend of a project. The last step is creating and uploading source maps to Sentry.
Here is my Babel config file:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
], // I tried this but this doesn't seem to work.
sourceMaps: true
}
Here is the package.json:
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"ci:lint": "vue-cli-service lint --no-fix --max-warnings=0",
"prepare": "cd .. && husky install .husky",
"sb:build": "vue-cli-service storybook:build -c config/storybook",
"sb:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-5",
"#fullstory/browser": "^1.6.0",
"#gtm-support/vue-gtm": "^1.6.0",
"#sentry/fullstory": "^1.1.8",
"#sentry/tracing": "^6.19.7",
"#sentry/vue": "^6.19.7",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9",
"aws-amplify": "^4.3.22",
"aws-appsync": "^4.1.7",
"axios": "^0.27.2",
"core-js": "^3.23.0",
"d3": "^7.5.0",
"dayjs": "^1.11.3",
"graphql-tag": "^2.12.6",
"html-to-pdfmake": "^2.4.4",
"pdfmake": "^0.2.5",
"postcss": "^8.4.14",
"register-service-worker": "^1.7.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"uuid": "^8.3.2",
"vue": "^3.2.28",
"vue-router": "^4.0.16",
"vue-toastification": "^2.0.0-rc.5",
"vue3-country-region-select": "^1.0.0",
"vue3-draggable-resizable": "1.6.4",
"vue3-markdown-it": "^1.0.10",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#storybook/addon-essentials": "^6.0.26",
"#storybook/addon-links": "^6.0.26",
"#storybook/vue3": "^6.0.26",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"husky": "^7.0.4",
"sass": "^1.51.0",
"sass-loader": "^10.2.1",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-cli-plugin-tailwind": "^3.0.0-beta.0"
}
}