[Vuejs]-Getting the error "Error: Couldn't find preset "env" relative to directory"

by

0👍

✅

First of all, you shouldn’t checkin node_modules/ directory into git respository. Make sure you use .gitignore properly.

All of your errors are occuring during build time

Try below steps to fix the error occuring during build time

  • Download your project from your gitrepo and place it into a newfolder

  • Delete node_modules directory

  • Install all the modules using npm install

  • In your package.json you’ve included cross-env script to start your project.
    Do not install it globally. You have to install this library local to the project.
    When you deploy your project to any server you need this cross-env to start your project. Install cross-env package as a prod dependency.
    npm install --save cross-env

  • You have included vue-style-loader in your webpack.config.js. But you haven’t installed this loader. Install vue-style-loader to allow webpack to parse the styles coded inside your .vue files
    npm install --save-dev vue-style-loader

  • The vue-loader which you use currently "vue-loader": "^15.7.0" requires plugin to be configured in webpack.config.js. Include VueLoaderPlugin after devtool configuration as shown below.

./webpack.config.js

...
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
   ...
  devtool: '#eval-source-map',
  plugins : [
    new VueLoaderPlugin()
  ]
}
  • Run your project in development mode npm run dev to view the output in browser.Chrome browser is preferred. i’ve ignored the warning messages produced by your code in the node console, you have to takecare of it.

Uglify plugin causes few problems while building the project for production

npm run build

i suggest you to remove uglifyjs related configuration from your webpack.config.js and test your code in production mode. You can proceed with researching more on how to fix the problem with uglifyjs plugin or post a new question.

Webpack configuration without uglifyjs plugin

var path = require('path')
var webpack = require('webpack')

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins : [
    new VueLoaderPlugin()
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Leave a comment