Receiving this error message Error: Couldn't find preset "env" relative to directory when i run my project npm run dev or npm run build
Would really appreciate some help, been trying to solve this for two days.
Error Log
ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "env" relative to directory "/Users/marvinbenno/Documents/Code projects/the-ultimate-website"
at /Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/marvinbenno/Documents/Code projects/the-ultimate-website/the-ultimate-website-sneaekpeak/node_modules/babel-loader/lib/index.js:50:20)
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js main[2]"
./webpack.config.js
var path = require('path')
var webpack = require('webpack')
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'
}
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.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
./package.json
{
"name": "the-ultimate-website",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Marvin <marvinkristusbenno@gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"bootstrap-vue": "^2.0.0-rc.14",
"joi": "^14.3.1",
"jshint-loader": "^0.8.4",
"vee-validate": "^2.2.0",
"vue": "^2.5.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"cross-env": "^5.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
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
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()
]
}
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.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.
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
})
])
}