[英]Webpack loader to process esm.js file
I added this npm package to my Vue.js project and followed the instructions to add the plugin in my main.js
file.我将这个 npm package添加到我的 Vue.js 项目中,并按照说明将插件添加到我的
main.js
文件中。
When I run the project locally with npm run serve
I'm getting this error:当我使用
npm run serve
在本地运行项目时,出现此错误:
./node_modules/@laruiss/vue-dsfr/dist/vue-dsfr.esm.js 954:31
Module parse failed: Unexpected token (954:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
It seems this is an issue with the esm.js
file type.这似乎是
esm.js
文件类型的问题。 I read and tried solutions given in dozens of thread on the web, but no luck so far.我阅读并尝试了 web 上几十个线程中给出的解决方案,但到目前为止还没有成功。
This is my package.json
:这是我的
package.json
:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --public 127.0.0.1",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@laruiss/vue-dsfr": "^1.0.0-beta.39",
"@vue/compat": "^3.1.0",
"axios": "^0.21.4",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.2",
"vue": "^3.1.0",
"vue-router": "^4.0.5",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "^4.5.15",
"@vue/cli-plugin-router": "^4.5.15",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
This is my vue.config.js
:这是我的
vue.config.js
:
module.exports = {
chainWebpack: (config) => {
config.resolve.alias.set('vue', '@vue/compat')
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
},
devServer: {
watchOptions: {
ignored: ['node_modules', /public/],
},
},
pwa: {
}
};
This is my babel.config.js
:这是我的
babel.config.js
:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
I have tried to add "type": "module"
to my package.json
while attempting to debug this, but it would raise the issue that my vue.config.js
was not a module.我试图在尝试调试时将
"type": "module"
添加到我的package.json
中,但这会引发我的vue.config.js
不是模块的问题。
I have also tried several options for a webpack.config.js
file but none of them worked either, so I don't have a webpack config file for now.我也为
webpack.config.js
文件尝试了几个选项,但它们都不起作用,所以我现在没有 webpack 配置文件。
Any advice to solve this issue is welcome !欢迎任何解决此问题的建议!
Try adding type: "module" to your pakage.json.尝试将 type: "module" 添加到您的 pakage.json。 This tells webpack its a moduke or esn file.
这告诉 webpack 它是一个 moduke 或 esn 文件。 Bu default I thing webpack will comsoder it a commonjs file without the type propertym
Bu default I thing webpack 将把它当作一个没有类型属性的 commonjs 文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.