plugin-syntax-dynamic-import issue in my vue js project
Closed this issue · 5 comments
I'm using your library to render a pdf file in my vue.js project, but getting an issue with the dynamic import.
.babelrc file:
{
"presets": [
"@vue/app"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
package.json:
{
"name": "pragmatic",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"test": "vue-cli-service test",
"e2e": "vue-cli-service e2e",
"lint": "vue-cli-service lint",
"e2e:open": "vue-cli-service e2e:open"
},
"dependencies": {
"animate.css": "^3.6.1",
"axios": "^0.18.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"chart.js": "^2.7.2",
"chartist": "^0.11.0",
"color-thief-browser": "^2.0.2",
"datamaps": "^0.5.9",
"detect-browser": "^2.5.1",
"echarts": "^4.1.0",
"echarts-gl": "^1.1.1",
"element-ui": "^2.4.1",
"es6-promise": "^4.2.4",
"es7-shim": "^6.0.0",
"file-saver": "^1.3.8",
"flag-icon-css": "^3.0.0",
"flex.box": "^3.4.4",
"fullcalendar": "^3.9.0",
"jquery": "^3.3.1",
"laue": "^0.1.0",
"lodash": "^4.17.10",
"mapbox-gl": "^0.45.0",
"mavon-editor": "^2.6.9",
"mdi": "^2.2.43",
"moment-timezone": "^0.5.17",
"npm": "^6.9.0",
"papaparse": "^4.5.0",
"pdfvuer": "^1.3.0",
"perfect-scrollbar": "^1.4.0",
"plotly.js": "^1.38.2",
"v-chartist": "^0.1.6",
"v-click-outside": "^1.0.4",
"v-viewer": "^1.0.1",
"v2-table": "^2.0.0",
"vue": "^2.5.16",
"vue-bulma-chartjs": "^1.0.5",
"vue-chartkick": "^0.3.3",
"vue-cute-timeline": "^1.2.4",
"vue-d3-network": "^0.1.24",
"vue-float-label": "^1.6.1",
"vue-fullscreen": "^2.1.3",
"vue-good-table": "^1.21.0",
"vue-highlightjs": "^1.3.3",
"vue-i18n": "^7.8.0",
"vue-lazyload": "^1.2.4",
"vue-peity": "^0.5.0",
"vue-pell-editor": "^1.0.1",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-resize": "^0.4.4",
"vue-router": "^3.0.1",
"vue-status-indicator": "^1.1.0",
"vue-virtual-collection": "^1.2.3",
"vue-virtual-scroll-list": "^1.2.5",
"vue2-google-maps": "^0.8.11",
"vue2-leaflet": "^1.0.2",
"vue2vis": "0.0.13",
"vuebar": "0.0.18",
"vuebars": "^0.1.1",
"vuetrend": "^0.3.2",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-plugin-unit-mocha": "^3.0.0-beta.6",
"@vue/cli-service": "^3.0.0-beta.6",
"@vue/test-utils": "^1.0.0-beta.13",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Error:
ERROR Failed to compile with 1 errors 11:02:00
error in ./node_modules/pdfvuer/src/Pdfvuer.vue
Syntax Error:
41 | this.fetch = function(query) {
42 |
43 | return import('raw-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
| ^
44 | .then(function(bcmap) {
45 |
46 | return {
Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
@ ./node_modules/pdfvuer/src/Pdfvuer.vue 3:0-241 4:0-254
@ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"C://Users//cloudfinch-dev//Desktop//feathercap-front-end-1//node_modules//.cache//cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/PDFJS.vue
@ ./src/PDFJS.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
Please help me out with this problem. Thanks.
Please ensure that your .babelrc file looks like this:
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
"plugins": ["syntax-dynamic-import"]
}Thanks for your reply. I replaced my .babelrc configuration with the above configuration, but it doesn't work. Now, i'm getting this error:
error in ./src/main.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules\babel-preset-stage-3\lib\index.js
at createDescriptor (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-descriptors.js:178:11)
at items.map (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-descriptors.js:109:50)
at Array.map ()
at createDescriptors (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-descriptors.js:101:10)
at presets (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-descriptors.js:47:19)
at mergeChainOpts (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-chain.js:320:26)
at C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-chain.js:283:7
at buildRootChain (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\config-chain.js:120:22)
at loadPrivatePartialConfig (C:\Users\cloudfinch-dev\Desktop\feathercap-front-end-1\node_modules@babel\core\lib\config\partial.js:85:55)
@ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
@shuvikash-patel you need to add only this line to your .babelrc:
"plugins": ["syntax-dynamic-import"]
I had the same issue as @shuvikash-patel with Vue CLI 3.5 and solved it by replacing the default .babelrc
{
"presets": [
"@vue/app"
]
}
with this babel.config.js:
module.exports = {
'presets': [
'@vue/app'
]
}
According to https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app the Dynamic Import Syntax plugin is already set in the default Vue CLI babel preset.
Thank you @umbertooo . With this configuration it works !!