Babel.js 在Vue脚本块中导入json时出错-“模块没有导出”

wr98u20j  于 2023-09-28  发布在  Babel
关注(0)|答案(1)|浏览(129)

我有一个新的,非常简单的项目。如果我尝试将json导入到我的入口文件(vanilla .js)中,它会工作,例如:
import pkg from './package.json';
当我尝试在.vue文件的<script>块中执行相同操作时,在构建过程中会出现以下错误:

WARNING in ./App.vue?vue&type=script&lang=js& 1:192-195
export 'default' (imported as 'mod') was not found in '-!./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use!./node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&' (module has no exports)

所有文件都在同一个目录中。
有人能建议如何缓解这种情况吗?我是Webpack的新手,所以我想知道是否有一个特定的设置或结构的加载器,我错过了。

package.json:

{
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "vue": "^2.7.14"
  },
  "devDependencies": {
    "@babel/core": "^7.22.11",
    "@babel/preset-env": "^7.22.10",
    "babel-loader": "^9.1.3",
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "node-sass": "^9.0.0",
    "postcss-loader": "^7.3.3",
    "postcss-preset-env": "^9.1.2",
    "postcss-url": "^10.1.3",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "vue-loader": "^15.10.1",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js:

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

module.exports = {
  devtool: false,
  entry: {
    main: "./main.js",
  },
  mode: "development",
  output: {
    filename: "output.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: "vue-loader",
          options: { productionMode: false }
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: "css-loader",
            options: { importLoaders: 2 },
          },
          'sass-loader'
        ]
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

我尝试过的:

  • 从包名中删除.json扩展名
  • 使用默认或非默认导入类型
  • 使用json-loader即使json导入现在内置到webpack中
  • 将.json扩展名添加到vue-loader
  • 将.json扩展名添加到babel-loader
11dmarpk

11dmarpk1#

解决了,两个注意事项:

  • 工程如果使用需要,例如. const pkg = require('./package.json');
  • 当脚本块具有默认导出时,导入工作,例如:
import pkg from './package.json'

export default {
...
}

我现在意识到“模块没有导出”错误是指.vue文件中的<script>块,而不是试图传达有关json导入的信息。

相关问题