All the examples I've seen online of using the two together rely on Bower being installed globally, but that can't work on Heroku - Bower needs to be a dependency of the app, so listed in package.json.
My package.json looks like this:
{
"repository": {
},
"dependencies": {
"babel-brunch": "^6.0.0",
"brunch": "^2.0.0",
"clean-css-brunch": ">= 1.0 < 1.8",
"css-brunch": ">= 1.0 < 1.8",
"javascript-brunch": ">= 1.0 < 1.8",
"uglify-js-brunch": ">= 1.0 < 1.8",
"sass-brunch": "^1.9.2",
"bower": "1.7.0"
},
"scripts": {
"postinstall": "./node_modules/bower/bin/bower install"
}
}
And my bower.json like this:
{
"name": "Kaderi",
"dependencies": {
"bootstrap-sass": "~ 3.3.6"
}
}
However, with bower loaded in package.json, I always get the following JS error when building assets:
./node_modules/detective/node_modules/acorn/dist/acorn.js:1747
throw err;
^
SyntaxError: Unexpected token (2:10)
at Parser.pp.raise (./node_modules/detective/node_modules/acorn/dist/acorn.js:1745:13)
at Parser.pp.unexpected (./node_modules/detective/node_modules/acorn/dist/acorn.js:2264:8)
at Parser.pp.semicolon (./node_modules/detective/node_modules/acorn/dist/acorn.js:2243:59)
at Parser.pp.parseExpressionStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2677:8)
at Parser.pp.parseStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2462:160)
at Parser.pp.parseBlock (./node_modules/detective/node_modules/acorn/dist/acorn.js:2692:21)
at Parser.pp.parseStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2443:19)
at Parser.pp.parseTopLevel (./node_modules/detective/node_modules/acorn/dist/acorn.js:2379:21)
at Object.parse (./node_modules/detective/node_modules/acorn/dist/acorn.js:101:12)
at parse (./node_modules/detective/index.js:9:18)
at Function.exports.find (./node_modules/detective/index.js:44:15)
at module.exports (./node_modules/detective/index.js:23:20)
at ./node_modules/deppack/index.js:83:12
at tryToString (fs.js:414:3)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)
I don't know if this is being caused by Bower itself, or bootstrap-sass/jquery (installed via Bower).
If I use a global install of Bower, the problem does not appear, but my assets cannot be compiled by Brunch on Heroku (due to missing Bower dependencies).
In fact the problem is identical to this Brunch installed with phoenix app doesn't work with bower assets and I am also using Phoenix, but for me the problem is not resolved just by upgrading Phoenix (and I don't know how that would affect Bower/Brunch anyway).
What am I missing in this tangled web of JavaScript frameworks?
edit: Using nodejs v5.1.1 and npm v3.3.12, both locally and on Heroku.
Related
part of my package.json:
"optionalDependencies": {
"cypress": "^8.2.0",
"cypress-commands": "^1.1.0",
"cypress-expect": "^2.4.1",
"cypress-file-upload": "^4.1.1"
},
I know that npm install --no-optional prevents optinal dependencies to be installed locally. But no idea how to pass that flag on Heroku
heroku config:set NPM_CONFIG_OMIT=optional
And this is exactly what it's needed for. We don't want heroku spending time and resource loading and building test packages.
When i deploy my app from github.com to heroku. I get the following message error: fsevents not accessible from jest-haste-map.
Could you help me solve this issue.
This is my package.json
{
"name": "app-clean",
"version": "0.1.0",
"private": true,
"main": "index.js",
"dependencies": {
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"json-server": "^0.16.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server db.json -p 5000 -w -d 0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks
So it seems that there are some internal dependencies that depend on the fsevents module. The general consensus seems to be to make this dependency optional, which should fix your problem (on Windows at least).
Try:
npm i fsevents#latest -f --save-optional
That fixed the dependency issue for me.
I have the same issue with the GitHub Actions (is being used for style-checking and testing).
The error message appears while executing command npm ci:
fsevents not accessible from jest-haste-map
If I replace the npm ci by npm install, I receive the error about the lockfile version:
This version of npm is compatible with lockfileVersion#1, but package-lock.json was generated for lockfileVersion#2
Therefore, the reason of the issue is upgraded lockfile version to 2.
If you have the same issue, check the npm version (command) and package-lock.json (file). If the "lockfileVersion" is 2, npm must be at least 7.x.
To fix that in GitHub action I added npm-upgrading step. So, my steps looks like:
# ...
steps:
# ...
- name: Upgrade NPM
run: npm install -g npm
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
Thus, if you have issue like "it works on my PC, but does not work in CI/CD runner", try to use described solution.
Try:
Deleting package-lock.json and node_modules
Running npm install locally, which should generate a new package-lock.json
Committing and pushing the new package-lock.json
I usually try this whenever I get strange npm errors like this relating to the dependencies.
I had this problem in bitbucket.org pipelines.
We was using Docker image with Node in version 14.17.0 (npm was included in version 6.14.13).
Updating only npm to version 8.1.3 did not help.
But updating Docker image of Node to new LTS version (16.13.0, with npm 8.1.0) fixed this problem and npm ci started working properly.
I saw this error this week. I changed package versions, then the error has gone. Here are my versions that seem related to this error. I'm not sure this is the correct way to fix it.
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9"
The same issue happen to me when build the package using ./github/worflows
Run npm ci
npm ERR! fsevents not accessible from jest-haste-map
1 - To resolve, I install in my local:
npm i fsevents#latest -f --save-optional
2 - Push the package.json into github again.
The workflows(view from github repository-> tab Actions) is triggered, the result shows the build is success.
I am new to react native.
I have setup project properly and able to run it in emulator.
Now I want to use react-redux for my project. When I am running npm install --save react-redux I am getting following error.
+-- react-redux#5.0.1
`-- UNMET PEER DEPENDENCY redux#^2.0.0 || ^3.0.0
npm WARN react-redux#5.0.1 requires a peer of redux#^2.0.0 || ^3.0.0 but none was installed.
I am using Windows + Android Emulator, got so many solution but all IOS based.
I have also tried to put manually.
My package.json file:
"dependencies": {
"react": "15.4.1",
"react-native": "0.40.0",
"react-redux": "^5.0.1",
"redux": "^3.5.2"
},
Realized it's not error, it is just missing dependent module.
Working fine after running npm install --save redux
It is also required two more dependency modules:
npm install --save redux-logger
npm install --save redux-thunk
I just found out that VS2015 has support for npm even in normal ASP.NET 4 projects - that's great.
The first thing I tried after jquery was to get types:
{
"version": "1.0.0",
"name": "aspnet",
"private": true,
"devDependencies": {
"jquery": "3.1.1",
"#types/jquery": "^2.0.34"
}
}
This says
npm ERR! 404 'types/jquery' is not in the npm registry.
I know it is, because executing
npm install
in the directory of the package.json file then installs it correctly.
That's a bug in VS2015's npm support, right? Is there a fix?
trying to include d3 library into an angular2 typescript project. I added d3 via npm install d3 and the typings via typing install d3 --save, the project local server doesn't start (tsc && concurrently "npm
run tsc:w" "npm run lite"), with the following error:
typings/browser/definitions/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.
these are my config files:
typings.json:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b",
"gapi": "github:DefinitelyTyped/DefinitelyTyped/gapi.auth2/gapi.auth2.d.ts"
},
"dependencies": {
"d3": "registry:npm/d3#3.0.0+20160211003958"
}
}
package.json:
{
"name": "session-explorer",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"d3": "^3.0.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.7.12"
}
}
You can now install typings as follows:
npm install d3 --save
npm install #types/d3 --save-dev
Then you can import d3 as follows
import * as d3 from 'd3';
The 2017 Update
Installation
Installing types for d3 v3:
npm install d3#3.x --save
npm install #types/d3#3.x --save-dev
Installing types for the latest d3 version (at the moment of writing v4):
npm install d3 --save
npm install #types/d3 --save-dev
Usage
import * as d3 from 'd3';
As there is no typings available for D3 V4, we have to manually declare the d.ts for d3 some thing like
declare function d3(string: any): any;
After installing the D3 node module, we can import in file as
var d3: any = require('d3');
From the error message it looks like you need to exclude your typings main.d.ts and main directories.
I would suggest adding a tsconfig.json in the same directory where your typings.json file is located.
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "commonjs",
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main.d.ts",
"typings/main"
]
}
The angular documentation has a good introduction on how the tsconfig.json file works.
You should be able to import d3 directly with :
import * as d3 from 'd3';
as long as the typings have been properly installed (which seems to be your case) and the actual d3.js file is loaded, either with a manual import or through some preprocessing task using node_modules/d3 folder.
Also make sure that d3.js is not accidentally imported in 4.x version, as this version brings many changes that have not been integrated in the dt typings as of today.
There are too many different answers here. Because the maintain status of Typed d3.
For now, 2017/12/09, there is already d3 type, with latest version 4.12.0. So no need to downgrade to version 3.x, or declare something.