I am working on a Front End project in Javascript (NPM, Webpack and Babel). I work on Mac all the time but I am having some issues when cloning the project in my PC Windows 10 machine.
It is building properly if I put the project in any directory but when I put the project in the directory where it should be located, Babel doesn't compile the project as expected.
The reason the project should be located there is because I am integrating it with some other tools (Bamboo - Continuous Integration).
npm run build
My builds script is:
"build": npm run clean && cross-env NODE_ENV=production webpack --env.prod=true
ERROR in ./index.js
Module parse failed: C:\opt\bamboo-home\xml-data\build-dir\STA-DEV-
JOB1\node_modules\babel-loader\lib\index.js!C:\opt\bamboo-home\xml-
data\build-dir\STA-DEV-JOB1\src\index.js Unexpected token (24:8)
You may need an appropriate loader to handle this file type.
| const render = (Component, target) => {
| ReactDOM.render(
| <Provider store={store}>
| <AppContainer>
| <Component/>
Does nodeJS or NPM or Webpack or Babel need specific permission over the directories they work on ?
Any help would be appreciated. I am lossing hair here.
Am glad you are using window 10. Use the bash shell on windows 10 to run the command npm run build.
follow this link to learn how you can cd to the directory from the bash shell
I had the same problem, then i found that i need shell bash, so follow the bellow steps:
install Git
go to project folder and right click to access context menu
from there run Git bash here
run the command: npm run build / yarn build
mine working perfectly with this solution.
Related
When I run npm run cypress:run in my GitLab CI env I get the error:
Your configFile is invalid: //WebApp/cypress.config.ts
It threw an error when required, check the stack trace below:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for //WebApp/cypress.config.ts
test:cypress:
image:
name: cypress/included:10.3.1-typescript
entrypoint: ['']
stage: test
script:
- yarn install --frozen-lockfile
- cd WebApp
- npm run cypress:run
rules:
- *branch
If I run npm run cypress:run from the WebApp folder (where cypress.config.ts is in the root) locally I have no issue. Also no issues when I do an npx cypress:run
However, if I run npx cypress run --config-file WebApp/cypress.config.ts from the parent folder locally I do get the error:
Unknown file extension ".ts"
Any ideas why locally Cypress is working but on the CI the config file is incorrect?
This still seems to be an issues today for LTS 10.10.0
Changing the fresh install cypress.config.ts -> cypress.config.js
and use require like so proved successful.
module.exports = require('cypress').defineConfig({ component: {
devServer: {
framework: "create-react-app",
bundler: "webpack",
},
},
});
I updated this github issue with some more information.
This will be because you have typescript installed globally on your machine so it will work ok locally but not in CI.
Essentially typescript has to be in the folder from where the cypress command is run for it to detect typescript properly.
I went with:
script:
- npm install --global serve
- serve ./build --listen 3000 &
- rm package*
- npm install #percy/cypress typescript
- npm install --global #percy/cli
- percy exec --verbose -- cypress run
Just installing the bare minimum to run the e2e tests ./build is an artifact from another run and percy is really great if you have not used it before.
I am late here, i had similar issue. The del package to delete passed videos was the culprit for me. In the CI environment, it requested to install the del package separately, but in my cypress.config.ts, i was directly able to import del package which was served from third party.
I wanted to install the exact del package in my case and that solved the problem. Del package has its limitations, rimraf solved my issue.
https://www.npmjs.com/package/rimraf
It looks like it's about the version. This might be hepful GitHub
I have tried all different ways suggested in the GitHub issue that
user18025789 linked, but nothing helped. Then I tried switching the config file from .ts to cypress.config.js and it started to work (syntax needed to be updated to JavaScript as well). I have no idea why.
I came across this issue because Typescript was not installed in my Cypress container. When ts-node doesn't have access to typescript, it's require behaves like the native "require", which is why you're seeing the error.
I don't know enough about your specific setup to recommend a solution, but for me I was able to run npm i and mount the volume in the cypress container before running the tests. Another option could be to create a new Dockerfile to extend the base Cypress image with typescript included in the build.
If working on a monorepo and mounting only the app/package folder to test into the cypress docker image, not all dependencies are available within this directory.
To fix this mounting, the whole workspace does the job:
cypress:
image: cypress/included:10.11.0
# …
working_dir: /workspace/app
volumes:
- ..:/workspace
I started facing this issue, suddenly, My solution wasrm -rf node_modules package-lock.jsonnpm i I already had the cypress.config.ts file, so cypress test runner picked it up, when I rannpx cypress open
I have an app initiated using Create React App, so npm run build runs react-scripts build. I recently installed prettier and so added a .eslintrc.json file to the project root to load the prettier plugin. npm run build works as expected locally, but, when deploying the app to Heroku, npm run build tries to run ESLint and fails because the plugins are devDependencies rather than dependencies.
Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
From prior wrangling with a similar issue, I know that I can set NPM_CONFIG_PRODUCTION=false in Heroku so that it will install devDependencies, which actually does resolve the deployment issue. Nevertheless, I'm curious to learn if there's another solution that doesn't require setting NPM_CONFIG_PRODUCTION=false.
Is it possible to prevent npm run build in this scenario from running ESLint altogether or to prevent it from trying to access the plugins specified in .eslintrc.json? I acknowledge that adding .eslintrc.json to .gitignore is one solution, but I want the ESLint configuration in my repo.
you can run "npm run eject" to generate webpack configuration files, and then modify "webpack.config.js"，delete the eslint configuration
script object in the package.json files is the modern replacement for Gulp or a similar build tool. Assume that Vuepress is installed with yarn add -D vuepress (meaning that the vuepress is installed locally in the node_modules folder.
Further, assume that the package.json file contains the following script object:
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
How does the command yarn docs:dev executed in the terminal resolve the vuepress object? More often than not a similar invocation results with the error vuepress not recognized ...
P.S. Since I do not have vuepress in the path environment variable the only place where it can be resolved is in the root level node_modules folder.
I guessed correctly - both npm and yarn (invoked from the terminal) have the ability to inspect all environment variables, as well as search the folder node_modules. In my concrete example, running the command
npm run env | grep scripts
results with
npm_config_ignore_scripts=
npm_config_scripts_prepend_node_path=warn-only
npm_package_scripts_docs_build=vuepress build docs
npm_package_scripts_docs_dev=vuepress dev docs
npm_package_scripts_env=env
There is a lot more information in the article https://techsparx.com/nodejs/tools/npm-build-scripts.html
Could you please give me some advise on how to deal with this issue.
Build Pipeline
npm install
package.json
"dependencies": {
"cypress": "^3.4.1"
}
Release
Powershell command
npm ./node_modules/.bin/Cypress run
The cypress npm package is installed, but the Cypress binary is missing.
2019-10-07T18:04:59.5720120Z We expected the binary to be installed here:
There are some examples on how to cache ~/.npm but nothing seems to work so far. Examples on how to include cypress.io in your vsts are at the building stage and not after release.
According to the error log, it has provided a solution about this. You should run the cypress install command first and then the error will be fixed.
As my test, since I don't have a cypress.json file, so I need run the open command to
automatic generated get the json file and project sample.
Then the open command run as expected.
But because I run the open command in interactive mode and I don't have the cypress.json file in my artifacts, the taks finally failed.
So if you have cypress.json in your repo or artifacts, you just need to add
.\cypress install
in your powershell command.
And if not, you can add the related json file and folder to your repo or artifacts and then the run command will work as your expected.
I have downloaded Windows Binary (.exe) of nodejs from the main page.
How can I install and use npm (Node package manager)?
The current windows installer from nodejs.org as of v0.6.11 (2012-02-20) will install NPM along with NodeJS.
NOTES:
At this point, the 64-bit version is your best bet
The install path for 32-bit node is "Program Files (x86)" in 64-bit windows.
You may also need to add quotes to the path statement in environment variables, this only seems to be in some cases that I've seen.
In Windows, the global install path is actually in your user's profile directory
%USERPROFILE%\AppData\Roaming\npm
%USERPROFILE%\AppData\Roaming\npm-cache
WARNING: If you're doing timed events or other automation as a different user, make sure you run npm install as that user. Some modules/utilities should be installed globally.
INSTALLER BUGS: You may have to create these directories or add the ...\npm directory to your users path yourself.
To change the "global" location for all users to a more appropriate shared global location %ALLUSERSPROFILE%\(npm|npm-cache) (do this as an administrator):
create an [NODE_INSTALL_PATH]\etc\ directory
this is needed before you try npm config --global ... actions
create the global (admin) location(s) for npm modules
C:\ProgramData\npm-cache - npm modules will go here
C:\ProgramData\npm - binary scripts for globally installed modules will go here
C:\ProgramData\npm\node_modules - globally installed modules will go here
set the permissions appropriately
administrators: modify
authenticated users: read/execute
Set global configuration settings (Administrator Command Prompt)
npm config --global set prefix "C:\ProgramData\npm"
npm config --global set cache "C:\ProgramData\npm-cache"
Add C:\ProgramData\npm to your System's Path environment variable
If you want to change your user's "global" location to %LOCALAPPDATA%\(npm|npm-cache) path instead:
Create the necessary directories
C:\Users\YOURNAME\AppData\Local\npm-cache - npm modules will go here
C:\Users\YOURNAME\AppData\Local\npm - binary scripts for installed modules will go here
C:\Users\YOURNAME\AppData\Local\npm\node_modules - globally installed modules will go here
Configure npm
npm config set prefix "C:\Users\YOURNAME\AppData\Local\npm"
npm config set cache "C:\Users\YOURNAME\AppData\Local\npm-cache"
Add the new npm path to your environment's PATH.
setx PATH "%PATH%;C:\Users\YOURNAME\AppData\Local\npm"
For beginners, some of the npm modules I've made the most use of are as follows.
axios - for more complex http posts/gets
isomorphic-fetch - for http(s) post/get requests
node-mailer - smtp client
mssql - interface and driver library for querying MS SQL Server (wraps tedious)
More advanced JS options...
async/await - async functions, supported via babel
For testing, I reach for the following tools...
mocha - testing framework
chai - assertion library, I like chai.expect
sinon - spies and stubs and shims
sinon-chai - extend chai with sinon's assertion tools
babel-istanbul - coverage reports
jest - parallel testing, assertions, mocking, coverage reports in one tool
babel-plugin-rewire - slightly easier for some mocking conditions vs. jest
Web tooling.
webpack - module bundler, package node-style modules for browser usage
babel - convert modern JS (ES2015+) syntax for your deployment environment.
If you build it...
shelljs - shell utilities for node scripts,. I used to use gulp/grunt, but these days will have a scripts directory that's referenced in package.json scripts via npm. You can use gulp tools inside plain scripts.
When Node.js is not installed using the msi installer, npm needs to be setup manually.
setting up npm
First, let's say we have the node.exe file located in the folder c:\nodejs. Now to setup npm-
Download the latest npm release from GitHub (https://github.com/npm/npm/releases)
Create folders c:\nodejs\node_modules and c:\nodejs\node_modules\npm
Unzip the downloaded zip file in c:\nodejs\node_modules\npm folder
Copy npm and npm.cmd files from c:\nodejs\node_modules\npm\bin to c:\nodejs folder
In order to test npm, open cmd.exe change working directory to c:\nodejs and type npm --version. You will see the version of npm if it is setup correctly.
Once setup is done, it can be used to install/uninstall packages locally or globally. For more information on using npm visit https://docs.npmjs.com/.
As the final step you can add node's folder path c:\nodejs to the path environment variable so that you don't have to specify full path when running node.exe and npm at command prompt.
npm can be downloaded (without installation) from here:
http://nodejs.org/dist/npm/
https://github.com/npm/npm/releases
I just installed latest version of node (0.6.12) in Windows 7 using msi (node-v0.6.12.msi).
npm is already shipped with it, no need to include it separately.
I was facing permission issue while running npm (npm install mysql), from the path where my nodejs resided, i.e.
C:\Program Files (x86)\nodejs
Then I followed below steps:
1) Added C:\Program Files (x86)\nodejs\npm in environment variables - Path system variable.
2) went back to only C:\ in command prompt and gave the command - npm install mysql - and voila! it worked..
Hope this helps.
I am running node.js on Windows with npm.
The trick is simply use cygwin. I followed the howto under https://github.com/joyent/node/wiki/Building-node.js-on-Cygwin-(Windows) . But make sure that you use version 0.4.11 of nodejs or npm will fail!
I've just installed 64 bit Node.js v0.12.0 for Windows 8.1 from here.
It's about 8MB and since it's an MSI you just double click to launch. It will automatically set up your environment paths etc.
Then to get the command line it's just [Win-Key]+[S] for search and then enter "node.js" as your search phrase.
Choose the Node.js Command Prompt entry NOT the Node.js entry.
Both will given you a command prompt but only the former will actually work. npm is built into that download so then just npm -whatever at prompt.
Use a Windows Package manager like chocolatey. First install chocolatey as indicated on it's homepage. That should be a breeze
Then, to install Node JS (Install), run the following command from the command line or from PowerShell:
C:> cinst nodejs.install
Here is a guide by #CTS_AE on how to use NPM with standalone node.exe:
https://stackoverflow.com/a/31148216/228508
Download the node.exe stand-alone from nodejs.org
Grab an NPM release zip off of github https://github.com/npm/npm/releases
Create a folder named: node_modules in the same folder as node.exe
Extract the NPM zip into the node_modules folder
Rename the extracted npm folder to npm and remove any versioning ie: npm-3.3.4 –> npm.
Copy npm.cmd out of the /npm/bin/ folder into the root folder with node.exe
I just installed Node.js for the first time and it includes NPM, which can be ran from the Windows cmd. However, make sure that you run it as an administrator. Right click on cmd and choose "run as administrator". This allowed me to call npm commands.
Search all .npmrc file in your system.
Please verify that the path you have given is correct. If not please remove the incorrect path.