webpack - cannot resolve the file

Question

When I run npm run build, below error occurs.

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 9:0-51
Module not found: Error: Can't resolve '../components/header/index.js' in 'MyProject/src'
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-157 1:173-176 1:178-332 1:178-332
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 3:0-28 29:13-16

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 10:0-50
Module not found: Error: Can't resolve '@/components/footer/index.js' in 'MyProject/src'
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-157 1:173-176 1:178-332 1:178-332
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 3:0-28 29:13-16

ERROR in ./src/main.js 6:0-33
Module not found: Error: Can't resolve '@/assets/scss/main.scss' in 'MyProject/src'

package.json

  "scripts": {
    "build": "webpack --config build/webpack.config.dev.js"
  },

build/webpack.config.dev.js

'use strict'

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: [
    './src/main.js'
  ],
  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]
}

src/App.vue

<template>
  <div id="app">
     <Header />
    <router-view />
    <Footer/>
  </div>
</template>

<script type="text/javascript">
import Header from "@/components/header/index.js";
import Footer from "@/components/footer/index.js";

export default {
  components: {
    Header,
    Footer
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/main.scss";
</style>

How to solve it?

@Capt 171 I am already under development stage. Is there any way to add webpack afterward? — CCCC, Oct 27 '21 at 07:55
I thought you were already using Webpack? You could also try building with Vue CLI — Capt 171, Oct 27 '21 at 07:55
@Emīls Gulbis my project is ongoing. Is there any way to add webpack in it? — CCCC, Oct 27 '21 at 08:41
You are using @/ which frees you from using paths relative to the file you import other files. But you have to configure that alias in your webpack config. That’s why your paths can‘t be resolved I guess — Luckyfella, Oct 27 '21 at 18:11
Look here how to config: https://stackoverflow.com/a/42753045/4584472 — Luckyfella, Oct 27 '21 at 18:14

webpack - cannot resolve the file

0 Answers0