I'm having some issues on Windows env. with npm & a package.json, mainly with one of the devDependencies, concat-cli.
Here's a little sample of the package.json file:
...
scripts{
...
"js-vendor-concat": "concat-cli -f src/js/vendor/**/*.js -o dist/js/vendors.js",
...
}
....
"devDependencies": {
...
"concat-cli": "^4.0.0"
...
}
So what happens is that every time I run that script in Windows env, I get Error: Error: EISDIR: illegal operation on a directory, read at errorHandler (index.js:11:15). Thing is that on linux, this error doesn't come up.
Things tried so far:
used git-bash and cygwin but same outcome
changed the input path to: src/js/vendor/*.js, again same outcome
However if I specify the name of the file, it works, so I'm guessing its something related to that wildcard *.js selector?
Any tips or pointers are much appreciated, thanks!
Related
I have a project that's been running perfectly for a few months now, able to run npm run serve with no problem. I have to terminate and run the command again whenever I switch networks, but that has never been a problem and the server could always start again.
Until now - no matter what I do I can't get the server to start. I get this error:
npm run serve
> xbs#0.6.2 serve D:\workspace\[PROJECT]
> vue-cli-service serve
INFO Starting development server...
10% building 1/1 modules 0 active ERROR TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
at Server.<anonymous> (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:667:47)
at Array.forEach (<anonymous>)
at new Server (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:666:22)
at serve (D:\workspace\[PROJECT]\node_modules\#vue\cli-service\lib\commands\serve.js:137:20)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
The last time I got this message was when I forgot to set the .env files, but this is a previously working copy with all necessary files set, and no changes since the last working run.
I've even tried pulling a fresh copy of the repo, running npm i and setting all env files but it still fails.
npm run lint and npm run build can still work, only npm run serve.
Am I missing anything?
The problem was again with the .env files. My vue.config.js was trying to access a previously set environment variable that had since been removed.
Only strange thing was that there weren't any problems up til now?
I guess your devServer.proxy.target is empty!
You could set this configuration
For me it was that I forgot to create (or copy from another PC) the .env file after clone and try to run my project on another PC.
I also had this problem.
I used in the project process to get the backend address(for example):
devServer: {
proxy: {
'/api/back/*': {
target: process.env.VUE_APP_BACKEND_URL,
pathRewrite: {
'/api/back': '/api/back',
},
},
},
},
But there was no .evn file.
Just create .env file:
VUE_APP_BACKEND_URL= 0.0.0.0:2222 #example
Didn't notice the answer #Sergey.
I declared this environment variable in .env.dev, but the local build failed, and the same project ran without problems, so I created a new .env file and declared it in it
proxy: {
'/api': {
target: process.env.VUE_APP_PROXY,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
Basically I want CI to fail if the dependencies section of the package.json contains any range operator. devDependencies could contain anything thought. Some CLI command would be perfect. Any suggestions?
Short answer: Unfortunately, there is no existing built-in npm command/feature to achieve this. However, you can utilize your own custom nodejs script. The nodejs script can then be invoked via a command if you define it in the scripts section of your package.json.
The following describes how to achieve this.
Solution
check-deps.js
Create a nodejs script as follows. Let's name the script check-deps.js and save it somewhere in your project directory.
const isSemverRange = require('is-semver-range');
const pkgPath = './path/to/your/package.json';
const pkgData = require(pkgPath);
function hasSemverRange({ dependencies = {}}) {
return Object.values(dependencies).some(semver => isSemverRange(semver));
}
if (hasSemverRange(pkgData)) {
console.log(`Semver range(s) found in dependencies section of ${pkgPath}`);
process.exit(1);
}
Explanation of check-deps.js:
Firstly we require the is-semver-range package, which we'll use to help check for any semver ranges. To install this package; cd to your project directory and run the following command:
npm i -D is-semver-range
We then define a path to the package.json file (i.e. the file we want to check), and subsequently we require its contents.
const pkgPath = './path/to/your/package.json'; // <-- Redefine path.
const pkgData = require(pkgPath);
Note: you'll need to redefine your path to package.json as necessary.
The hasSemverRange function parameter definition utilizes object destructuring to unpack the dependencies object, and assigns an empty object as a default value to avoid errors occurring if the dependencies section is missing from package.json.
In the function body we pass in the dependencies object to the Object.values method, and utilize the Array.some() method to test whether at least one of the values is a semver range.
This function returns true if the value of any property/key of the dependencies object is as a semver range, otherwise it returns false.
Finally, in the if statement condition we invoke the hasSemverRange function, passing to it the parsed contents on package.json. If the condition is truthy we log an error message to the console, and exit the script with a non-zero exit code, i.e. process.exit(1).
package.json
In the scripts section of your package.json define a script as follows. Let's name the script check-deps:
"scripts": {
"check-deps": "node path/to/check-deps.js",
...
}
Note: you'll need to redefine your path to check-deps.js as necessary.
Running the npm script
Run the following command via your CLI to invoke the check-deps script:
npm run check-deps
If the value of any property defined in the dependencies section of your package.json is a semver range you'll see something like the following error logged to your console:
Semver range(s) found in dependencies section of ./path/to/package.json
Integrating the check with your CI tool.
It's unclear from your question which CI tool you're using. However, typically CI tools provide a feature which allows you to invoke an npm script.
For example, if your utilizing Travis CI you can define the script to run in your .travis.yml file as follows:
.travis.yml
script:
- npm check-deps
Additional Note:
You could also invoke the npm check-deps script via an existing test script which you may have already defined in your package.json by utilizing the && operator. For instance:
"scripts": {
"check-deps": "node path/to/check-deps.js",
"test": "yourCurrentTestcommands && npm run check-deps"
...
}
Note: In the test script above the yourCurrentTestcommands part should be replaced with any commands that you may currently be running.
I've installed npm (v4.4.4) and babel (v6.24.0) and babel preset 2015.
All running OK when converting ES6 JS to ES5...except a couple of oddities. Maybe someone can see what this newbie is doing wrong.
1) I run babel from npm (see below) which runs OK. I added some script entries into package.JSON to make it work.
But, UNWANTED oddity...npm inserts the commands into the output JS file. (See below) Is there an npm option to say, don't put the command in the output file.
Yet....if I copy input.JS to the folder with babel.cmd and run it there, I get a clean output.JS. So it looks like npm is inserting the command lines into the output.js file.
How do I prevent the npm commands being written to output.js. (Obviously I don't want to have my JS files having to share a folder with the .bin files)
2) When I type > babel on the command line in my project folder, I get:
babel: not a command.
I EXPECT THIS. After all, I have not added node_modules/.bin to my PATH env var. Yet every YouTube video I watch about npm and babel, it works. How? No one seems to edit the PATH env var. Am I missing something?
Thanks
Milton.
INPUT JS FILE (input.js)
class House {
constructor(v) {
this.name = v;
}
}
OUTPUT JS (TRANSPILED) FILE (output.js) Note 1st 2 lines below...
> milton#1.0.0 babel C:\Projects1\01InstallReact4Dev
> babel.cmd "--presets" "es2015" "input.js"
"use strict";
function _classCallCheck(instance, Constructor)
{ if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var House = function House(v) {
_classCallCheck(this, House);
this.name = v;
};
PACKAGE.JSON
"scripts": {
"babel": "babel.cmd",
"babelv": "babel.cmd -V",
"babelh": "babel.cmd -help"
}
COMMAND
> npm run babel -- --presets es2015 input.js > output.js
Thanks Again.
Milton.
You're redirecting the output of stdout to the file output.js, this includes everything that is displayed. Instead of using the stdout output of babel you can use the --out-file or -o option. This will write the output to the specified file instead of printing it to stdout (see Compile Files).
Your command would be:
npm run babel -- --presets es2015 input.js --out-file output.js
When I type > babel on the command line in my project folder, I get: babel: not a command.
You don't have node_modules/.bin/ in your shells PATH. You could add it or run it directly with ./node_modules/.bin/babel. But this is not necessary if you do it in an npm script, because npm will automatically look into node_modules/.bin/ without it being in your PATH. In this case you could define the following script:
"scripts": {
"build": "babel --presets es2015 input.js --out-file output.js"
}
And then you can simply run:
npm run build
If you'd like to transpile more than one file you should use --out-dir instead of --out-file otherwise they will be concatenated into one file. See also Compile Directories
I copied the js files from project https://github.com/videojs/video.js into a subfolder of my project.
I set up plenty dependencies and called browserify on the command line:
node ./node_modules/browserify/bin/cmd.js dev\videojs\js\video.js -t [ babelify ]
The output looks like:
Error: D:/Webs/videojs/dev/videojs/js/video.js: Cannot find module '../../package.json' from 'D:\Webs\videojs\dev\videojs\js'
at Function.module.exports [as sync] (D:\Webs\videojs\node_modules\resolve\lib\sync.js:33:11)
at PluginPass.MemberExpression (D:\Webs\videojs\node_modules\babel-plugin-inline-json\lib\index.js:27:45)
at newFn (D:\Webs\videojs\node_modules\babel-traverse\lib\visitors.js:276:21)
at NodePath._call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (D:\Webs\videojs\node_modules\babel-traverse\lib\index.js:114:17)
When I move the files one folder up, the command runs and and transpiles all the files.
I now wonder where this error comes from. babel-traverse seemingly loops through the plugins and eventually finds out it's being run not exactly 3 levels below the project root. Is this intended behaviour? It this a matter of babel, browserify, a plugin or videojs?
Use this command instead:
./node_modules/.bin/browserify dev\videojs\js\video.js -t [ babelify ]
When Browserify is installed, the command line scripts are added to node_modules/.bin, as that's the standard practice. It's those commands that you should be running; not the scripts in Browserify's own bin directory.
Note that the scripts are either shell scripts or Windows CMD scripts and that they are not run using node.
Or, if you add the following to your package.json, you can run Browserify using NPM (also standard practice):
{
...
"scripts": {
"browserify": "browserify"
}
}
and the command would then be:
npm run browserify dev\videojs\js\video.js -t [ babelify ]
Or, if you want to keep the parameters in the "scripts" configuration:
{
...
"scripts": {
"bundle": "browserify dev/videojs/js/video.js -t [ babelify ]"
}
}
and:
npm run bundle
I have using browserify for new project. It works really well so far.
I have one big issue though. How can I debug each js file separately. It bundles all the files together and points to bundle if error occurs.
I am using chrome and source maps but it doesn't really help in debugging.
Any ideas?
Update: More info:
I'm using this command in package.json
"start": "watchify scripts/main.js -o scripts/bundle.js --debug",
and getting errors as shown above which is not ideal.
I believe my source maps are on?
I'm not exactly sure how you are using the command line tool for browserify without any code, but you you should be able to utilize debug.
--debug -d Enable source maps that allow you to debug your files
separately.
browserify main.js -o bundle.js --debug
For more info on the CLI tool you can look here - https://github.com/substack/node-browserify#usage
Edit After a bit more digging on this - the issue specifically being hit here is a ParseError - which means that Browserify is never actually getting to the proper debug stage. Hadn't really thought it through, but this made perfect sense.
In order to test this - I create two simple files:
a.js
module.exports = function(a) {
return a;
}
main.js
var a = require('./a.js');
console.log(a("something"));
I then ran browserify using watchify with an npm script:
"start": "watchify main.js -o bundle.js --debug"
Using the script in a browser, and everything worked great - it logged to console as expected. I then edited a.js with a typo:
a.js
module.exports = function(a) {
return a---
}
The browser and watchify threw the error shown above: path/to/file/a.js:3 ParseError: Unexpected Token.
Browserify is not able to compile the file properly, so it's throwing an error. You should be seeing this in the console during the build.
To test that the --debug flag works as expected, I modified the code again:
a.js
module.exports = function(a) {
return a('something');
}
The expectation here would be a TypeError since the function now expects a to be a function.
The console in the browser now displays:
Uncaught TypeError: a is not a function __________ a.js:2
Fix your parse issues, and browserify --debug will once again start behaving as expected.