ERROR Error: Using removed Babel 5 option: - vuejs2

I am working on Vue project. So far It was working for me.
After I install some packages, it doesn't work.
error is like :
ERROR Error: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
Error: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
at throwUnknownError (E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:121:11)
at Object.keys.forEach.key (E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:108:5)
at Array.forEach (<anonymous>)
at validateNested
(E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:84:21)
at validate
(E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:75:10)
at file
(E:\booking_room\node_modules\#babel\core\lib\config\config-chain.js:169:34)
at cachedFunction
(E:\booking_room\node_modules\#babel\core\lib\config\caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync
(E:\booking_room\node_modules\gensync\index.js:244:28)
at syn
(E:\booking_room\node_modules\gensync\index.js:84:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! booking_room#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the booking_room#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASSASSIN\AppData\Roaming\npm-cache\_logs\2020-05-20T13_19_18_381Z-debug.log
babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
}
}
I am not sure what is the problem. please any suggestions.

I found the solution.
Because I used modules that removed Babel 5.
So I replaced plugins instead of modules.
it works for me.

Related

adding "type":"module" or "type":"commonjs" breaks the build

When I deleted this "type", everything was building okey but my site got an error
Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
So I added "type":"module" to package.json but then I cannot build anymore, the error:
npm run build
> NewsJS#1.0.0 build C:\Users\ola12\Documents\git\news-JS\news-JS
> webpack --config ./webpack.config.js --env mode=prod
[webpack-cli] Failed to load 'C:\Users\ola12\Documents\git\news-JS\news-JS\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\ola12\Documents\git\news-JS\news-JS\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///C:/Users/ola12/Documents/git/news-JS/news-JS/webpack.config.js:1:14
at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
at async Loader.import (internal/modules/esm/loader.js:177:24)
at async WebpackCLI.tryRequireThenImport (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:254:18)
at async loadConfigByPath (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1710:19)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1763:29)
at async WebpackCLI.createCompiler (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:2185:18)
at async WebpackCLI.runWebpack (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:2321:16)
at async Command.<anonymous> (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1058:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! NewsJS#1.0.0 build: `webpack --config ./webpack.config.js --env mode=prod`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the NewsJS#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ola12\AppData\Roaming\npm-cache\_logs\2023-02-14T10_34_55_775Z-debug.log

Vue: npm run serve crashes when a broken link is added

I have just started using Vue 3.
The npm run serve command works normally. However, once a broken link is added to the folder that npm is tracking, the npm run serve command crashes completely. It used to show any errors in the compiled Vue code and still keep running.
After removing the link, the npm run serve command can be run again to compile a working Vue project.
The crash log is as follows:
node:internal/process/promises:225
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: ENOENT: no such file or directory, stat '/home/brandsma/main/work/projects/vue/portfolio_main/portfolio/src/components/.#navigation.vue'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/home/brandsma/main/work/projects/vue/portfolio_main/portfolio/src/components/.#navigation.vue'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/brandsma/.npm/_logs/2020-12-25T13_56_54_511Z-debug.log
It seems to be a problem with the stat command crashing after automatically trying to follow the broken link: .#navigation.vue.
.#{filename}.vue is a link/file created by spacemacs whenever a file is edited.
npm version:
6.14.10
Vue version:
#vue/cli 4.5.9
Anyone have any ideas how to fix this?
You can configure Webpack's dev server to ignore these files:
// vue.config.js
module.exports = {
devServer: {
watchOptions: {
ignored: ['**/.#*.vue', 'node_modules/**']
}
}
}

Unable to build my Vuejs application using npm run build

When I run npm run build in my Vuejs application I get the following error:
compiler.hooks.compilation.tap(
^
TypeError: Cannot read property 'compilation' of undefined
at OptimizeCssAssetsWebpackPlugin.apply (C:\Users\EFOSA\Desktop\my_project\client\node_modules\last-call-webpack-plugin\src\index.js:170:20)
at Compiler.apply (C:\Users\EFOSA\Desktop\my_project\client\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (C:\Users\EFOSA\Desktop\my_project\client\node_modules\webpack\lib\webpack.js:33:19)
at err (C:\Users\EFOSA\Desktop\my_project\client\build\build.js:19:3)
at next (C:\Users\EFOSA\Desktop\my_project\client\node_modules\rimraf\rimraf.js:75:7)
at CB (C:\Users\EFOSA\Desktop\my_project\client\node_modules\rimraf\rimraf.js:111:9)
at C:\Users\EFOSA\Desktop\my_project\client\node_modules\rimraf\rimraf.js:137:14
at FSReqWrap.oncomplete (fs.js:154:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_project#1.0.0 build: node build/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_project#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\EFOSA\AppData\Roaming\npm-cache_logs\2019-07-02T07_51_40_908Z-debug.log
I'm running webpack 3.12.
Could someone please help me with this?
There is a problem with your configuration and/or plugin version. Check the optimize-css-assets-webpack-plugin documentation:
For webpack v3 or below please use
optimize-css-assets-webpack-plugin#3.2.0. The
optimize-css-assets-webpack-plugin#4.0.0 version and above supports
webpack v4.

Yarn installation, Module build failed: Error: Couldn't find preset "es2015"

I need to use react-select: https://github.com/JedWatson/react-select
For that I needed to first install yarn on Ubuntu 14.04. After the installation, and yarn add react-select I can not build my project anymore with webpack since it is giving me the error:
ERROR in ./views/index.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome"
at /home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map ()
at OptionManager.resolvePresets (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-loader/lib/index.js:50:20)
at /home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/home/nikita/Desktop/kipnis_prototype/client_side_BrainImmuneConnectome/brain-immune-connectome/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:437:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! brainimmuneconnectome#0.0.0 webpack: webpack
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the brainimmuneconnectome#0.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/nikita/.npm/_logs/2018-06-07T04_11_30_458Z-debug.log
I have presents installed in .babelrc file:
{
"presets": ["es2015", "react", "stage-1"]
}
So, the solutions that I found here:
Error: Couldn't find preset "es2015" relative to directory
are not working. What is going wrong here? How could it be fixed?
I found the solution here:
https://github.com/babel/gulp-babel/issues/93
Doing the following:
npm i babel-preset-es2015
npm i babel-preset-stage-2
Solved the issue.

Yeoman generator always get some error

When I'm trying using yeoman web generator, although it's working, but looking through the whole generate progress, it always gives me some errors below, no matter what generator I used, they are always there.
npm ERR! phantomjs#1.9.7-6 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs#1.9.7-6 install script.
npm ERR! This is most likely a problem with the phantomjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Applications/MAMP/htdocs/DECO3800/test
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.10
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Applications/MAMP/htdocs/DECO3800/test/npm-debug.log
npm ERR! not ok code 0
Just wondering why it would be like that, and how to solve it or it totally no affect to my built web project?
There seems to be a problem with the Bitbucket CDN at the moment.
You can use this as a temporary workaround:
PHANTOMJS_CDNURL=http://cnpmjs.org/downloads npm install phantomjs
The workaround mentioned is:
You can download the phantomjs zip manually here: https://bitbucket.org/ariya/phantomjs/downloads and move it to the dir npm wants to download it to.
Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-macosx.zip
Saving to /var/folders/fl/ssqg11_j1hs5mk4fvyqgjcmc0000gn/T/phantomjs/phantomjs-1.9.7-macosx.zip
.
.
Whenever you try to build your project the next time, phantomjs is already present and doesn't have to be downloaded, so the download will be skipped and your project will finish (unless another error is encountered).
I have the same problem and I have come across this thread where someone claims he found a workaround to a similar problem: https://github.com/Medium/phantomjs/issues/161
"Same here, got it working by downloading from https://bitbucket.org/ariya/phantomjs/downloads to the path that it tries to save it to. Has the bitbucket repo been switched between private/public recently?"
It looks like the phantomjs download is no longer valid (or similar); and the fact that many people are having the same issue at the same time suggests this is probably the case.
I don't know enough to advise you how to proceed but maybe this can point you in the right direction.
Got a similar problem using the following setup:
Windows 7 x64
node v0.10.32
npm v2.5.0
yeoman v1.3.2
grunt-cli v0.1.13
grunt-html-snap v0.6.1 (grunt-html-snapshots has the same problem)
grunt-lib-phantomjs v0.3.0 (a dependancy of grunt-html-snap(s) )
phantomjs v1.9.15 (a dependancy of grunt-lib-phantomjs(s) )
Of less importance:
bower v1.3.12
git v1.9.4.msysgit.2
Error:
phantomjs#1.9.15 install d:\TEST\a111\node_modules\grunt-html-s
napshot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs
node install.js
Download already available at C:\Users\USER~1\AppData\Local\Temp\phantomjs\phan
tomjs-1.9.8-windows.zip
Extracting zip contents
Removing d:\TEST\a111\node_modules\grunt-html-snapshot\node_modul
es\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom
Copying extracted folder C:\Users\USER~1\AppData\Local\Temp\phantomjs\phantomjs
-1.9.8-windows.zip-extract-1424937053563\phantomjs-1.9.8-windows -> d:\SVN\DBITS
\Web\B-RAD\a111\node_modules\grunt-html-snapshot\node_modules\grunt-lib-phantomj
s\node_modules\phantomjs\lib\phantom
Writing location.js file
Phantom installation failed { [Error: EPERM, operation not permitted 'd:\SVN\DBI
TS\Web\B-RAD\a111\node_modules\grunt-html-snapshot\node_modules\grunt-lib-phanto
mjs\node_modules\phantomjs\lib\phantom\phantomjs.exe']
errno: 50,
code: 'EPERM',
path: 'd:\\SVN\\DBITS\\Web\\B-RAD\\a111\\node_modules\\grunt-html-snapshot\\no
de_modules\\grunt-lib-phantomjs\\node_modules\\phantomjs\\lib\\phantom\\phantomj
s.exe',
syscall: 'chmod' } Error: EPERM, operation not permitted 'd:\SVN\DBITS\Web\B-R
AD\a111\node_modules\grunt-html-snapshot\node_modules\grunt-lib-phantomjs\node_m
odules\phantomjs\lib\phantom\phantomjs.exe'
at Object.fs.chmodSync (evalmachine.<anonymous>:832:18)
at Object.chmodSync (d:\TEST\a111\node_modules\grunt-html-sna
pshot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\fs-ex
tra\node_modules\graceful-fs\polyfills.js:141:17)
at Promise.validExit [as _successFn] (d:\TEST\a111\node_modul
es\grunt-html-snapshot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\i
nstall.js:145:8)
at Promise._call (d:\TEST\a111\node_modules\grunt-html-snapsh
ot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\kew\kew.
js:373:13)
at Promise._withInput (d:\TEST\a111\node_modules\grunt-html-s
napshot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\kew
\kew.js:333:25)
at Promise.resolve (d:\TEST\a111\node_modules\grunt-html-snap
shot\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\kew\ke
w.js:105:27)
at resolver (d:\TEST\a111\node_modules\grunt-html-snapshot\no
de_modules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\kew\kew.js:40
9:17)
at CB (d:\TEST\a111\node_modules\grunt-html-snapshot\node_mod
ules\grunt-lib-phantomjs\node_modules\phantomjs\node_modules\fs-extra\node_modul
es\rimraf\rimraf.js:68:5)
at Object.oncomplete (fs.js:107:15)
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "install" "grunt-html-snapshot"
npm ERR! node v0.10.32
npm ERR! npm v2.5.0
npm ERR! code ELIFECYCLE
npm ERR! phantomjs#1.9.15 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs#1.9.15 install script 'node install.js'.
npm ERR! This is most likely a problem with the phantomjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! d:\TEST\a111\npm-debug.log
At first I thought I solved it with the fix I posted on github HERE. On this github issue post you can also find other possible solutions.
But when I tried to generate a new project a few weeks later, I ran into the same issue...
My generator executes the following install commands:
install: function () {
var self = this,
done = self.async();
self.log(msgStepStart('------- 7: Installing! -------'));
// ---------- Generate STRUCTURE : Installation of npm packages START ---------- //
self.npmInstall([
'grunt#0.4.5',
'grunt-contrib-clean#0.6.0',
'grunt-contrib-concat#0.5.0',
'grunt-contrib-connect#0.9.0',
'grunt-contrib-copy#0.7.0',
'grunt-contrib-cssmin#0.11.0',
'grunt-contrib-htmlmin#0.3.0',
'grunt-contrib-jshint#0.10.0',
'grunt-contrib-less#1.0.0',
'grunt-contrib-uglify#0.7.0',
'grunt-contrib-watch#0.6.1',
'grunt-html-snapshot#0.6.1',
'grunt-rev#0.1.0',
'grunt-text-replace#0.4.0',
'grunt-usemin#3.0.0',
'jit-grunt#0.9.0',
'jshint-stylish#1.0.0',
'load-grunt-tasks#2.0.0',
'lodash#2.4.1',
'request#2.42.0', // Dependancy: grunt-html-snapshot#0.6.1
'time-grunt#1.0.0'
], { 'save': true, 'saveExact': true }, function() {
done();
self.log(msgStepEnd('------- 7: I am done installing! -------'));
});
// npm save as save, saveDev or saveExact?
// --save: Package will appear in your dependencies.
// --save-dev: Package will appear in your devDependencies.
// --save-optional: Package will appear in your optionalDependencies.
// When using any of the above options to save dependencies to your package.json, there is an additional, optional flag:
// --save-exact: Saved dependencies will be configured with an exact version rather than using npm's default semver range operator.
// --save-dev-exact would be the sam as | { 'saveDev': true } => { 'saveDevExact': true }
// ---------- Generate STRUCTURE : Installation of npm packages END ---------- //
}
I also tried the phantomjs troubleshooting and none of them solved my problem.
Then when I tried to install phantomjs in an empty folder using the npm install command in gitbash and it installed without any error repeatedly.
$ npm install phantomjs
OR
$ npm install phantomjs#v1.9.15
When I did this with grunt-lib-phantomjs, it got the same error 3 times out of 10.
$ npm install grunt-lib-phantomjs
OR
$ npm install grunt-lib-phantomjs#0.3.0
And when I did this with grunt-html-snapshot, it got the same error 10 times out of 10.
$ npm install grunt-html-snapshot
OR
$ npm install grunt-html-snapshot#0.6.1
This got me thinking. I installed phantomjs with npm on a new folder and ran my generator. This resulted in an installation without errors 10 out of 10.
To let the generator handel the complete installation I added the installation of phantomjs under the conflicts method priority of the generator to be shure it got installed before the installation of the other npm installs.
conflicts: function () {
var self = this,
done = self.async();
self.log(msgStepStart('------- 6: Handeling Conflicts! -------'));
self.npmInstall([
'phantomjs#1.9.15',
], {}, function() {
done();
self.log(msgStepEnd('------- 6: I handled the conflicts! -------'));
});
},
This fixed my problem completely, hope it is helpful for someone else to.
P.S.:
If you use any kind of versioning control that leaves out the installed node_modules for the deployed project. You might consider using the following in your end method priority of your generator.
end: function () {
var self = this,
done = self.async();
self.log(msgStepStart('------- 8: End! -------'));
self.spawnCommand('npm dedupe').on('exit', function(){
self.spawnCommand('npm shrinkwrap').on('exit', function(){
self.log();
self.log(clc.green('!') + clc.whiteBright(' Successfully created ') + clc.cyan(self.appTitle));
self.log(clc.green('!') + clc.whiteBright(' To see your site, run:'));
self.log('\t' + clc.yellowBright('grunt serve'));
self.log();
done();
self.log(msgStepEnd('------- 8: The End! -------'));
});
});
}
This combo will result in a deduplicated installation with fixed versions on the main and dependency levels.
This will also keep the jsphantom install on the main level and not as a dependency to avoid the error discussed. And thus will result in a clean install when you downloaded a versioned project without the node_modules folder using:
$ npm install
npm dedupe docs
npm shrinkwrap docs