Error when importing json in Vue script block - "module has no exports"

Question

I have a new, very barebones project. If I attempt to import json into my entry file (vanilla .js), it works, eg:

import pkg from './package.json';

When I attempt to do the same in a .vue file's <script> block, I get this error during building:

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)

All the files are in the same directory.

Can anyone advise on how to alleviate this? I am new to Webpack, so I wonder if there is a specific setting or structure to the loaders that I am missing.

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

What I've tried:

Removing the .json extension from the package name
using default or non-default import types
using json-loader even though json importing is built into webpack now
adding the .json extension to the vue-loader
adding the .json extension to the babel-loader

derrick · Accepted Answer · 2023-08-30 19:24:49Z

0

Solved, two notes:

Works if using require, eg. const pkg = require('./package.json');
Import works when the script block has a default export, eg:

import pkg from './package.json'

export default {
...
}

I now realize the "module has no exports" error was referring to the <script> block in the .vue file, not trying to communicate something about the json import.

answered Aug 30, 2023 at 19:24

derrick

13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error when importing json in Vue script block - "module has no exports"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related