Vue脚本块导入JSON报错：module has no exports 求助

在原生JS入口文件中导入JSON（如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，推测是缺少特定Loader配置导致的问题。

项目配置 #

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()
  ]
};

已尝试的方案 #

• 移除package名称中的.json扩展名
• 使用默认或非默认导入类型
• 使用json-loader（尽管Webpack已内置JSON导入功能）
• 为vue-loader添加.json扩展名支持
• 为babel-loader添加.json扩展名支持

解决建议 #

问题根源是Webpack对.vue文件内script部分的JSON导入处理逻辑缺失，需要在Webpack配置中明确添加JSON文件的处理规则，同时确保vue-loader能正确解析导入的JSON。

步骤1：添加JSON文件处理规则 #

在module.rules数组中新增以下规则：

{
  test: /\.json$/,
  type: 'json'
}

Webpack 5已经内置了JSON处理能力，无需额外安装json-loader，type: 'json'即可让Webpack正确解析JSON文件并导出为ES模块。

步骤2：修改后的完整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'
        ]
      },
      // 新增JSON处理规则
      {
        test: /\.json$/,
        type: 'json'
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

额外注意事项 #

• 在.vue文件中导入JSON时，务必使用完整文件名（包含.json扩展名），例如import pkg from './package.json';
• 如果仍有报错，可检查Babel配置是否禁用了JSON导入，Vue 2.7配合Webpack 5一般无需额外添加Babel插件
• 确认Webpack版本为5.x，其JSON处理逻辑与Webpack 4不同，确保配置符合Webpack 5规范

内容的提问来源于stack exchange，提问作者derrick