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
