When using gem browserify-rails, it does not reflect file changes - javascript

I want to develop javascript with CommonJS module in rails.
also I want to benefit from sprockets.
I found browserify-rails gem to solve that.
After tring, it seems to work well.
I could use module.
But when I change some files and refresh the browser, they are not reflected.
Do you have an idea to solve that ?
using package.json is below.
{
"name": "",
"description": "",
"license": "MIT",
"repository": {},
"dependencies": {
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"browserify-incremental": "^3.0.1"
}
}

Unfortunately, a bug was introduced with browserify-rails v2 and is present in 2.0.0 and 2.0.1. I fixed the bug in 2.0.2 which was just released. Please upgrade to 2.0.2 and clear the asset cache with:
rake tmp:clear
You may need to call it like bundle exec rake tmp:clear. If neither work, then from the project root, rm -rf tmp/cache. Then start Rails again and it should work as expected.

Related

Typescript: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`

I've an npm command line application that i've built not so long ago and it worked fine. Now that i've updated it, and due to changes in the versions of typescript over the period, i'm getting an error when i want to run this package which says:
Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
Here is the package.json file:
{
"name": "initialiseur",
"version": "4.0.4",
"main": "src index.ts",
"author": "#crispengari",
"license": "MIT",
"bin": "src/index.ts",
"description": "THIS IS A BOILER PLATE THAT INITIALIZE A NODE EXPRESS BACKEND FOR TYPESCRIPT AND JAVASCRIPT",
"scripts": {
"watch": "tsc -w",
"start": "ts-node src/index.ts",
"dev": "nodemon dist/index.ts",
"start:fast": "tsnd --respawn src/index.ts"
},
"dependencies": {
"#types/inquirer": "^7.3.3",
"#types/node": "^17.0.42",
"#types/npm": "^7.19.0",
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "^3.1.5",
"dotenv": "^10.0.0",
"inquirer": "^8.1.2",
"node-fetch": "^3.2.6",
"octokit": "^1.7.2",
"ts-node": "^10.8.1",
"typescript": "^4.6.5"
},
"devDependencies": {
"#types/node-fetch": "^2.6.1",
"nodemon": "^2.0.12",
"ts-node-dev": "^2.0.0"
},
"bugs": {
"url": "https://github.com/CrispenGari/initialiseur/issues"
},
"homepage": "https://github.com/CrispenGari/initialiseur#readme",
"keywords": [
"node.ts",
"node.js",
"typescript",
"ts",
"nodejs-backend",
"javascript",
"js",
"express",
"backend"
]
}
When i'm testing it locally by running:
npm start
# or
yarn start
Everything is working fine, but after publishing it to npm to start it i run the following command:
npx initialiseur
Then I'm getting the error from a command line. The whole error is as follows:
C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536
ts.Debug.assert(typeof typeReferenceDirectiveName === "string", "Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.");
^
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
at Object.resolveTypeReferenceDirective (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536:18)
at C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:131:51
at Array.map (<anonymous>)
at Object.resolveTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:130:31)
at actualResolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116673:163)
at resolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116973:26)
at processTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118455:31)
at findSourceFileWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118340:21)
at findSourceFile (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118195:26)
at processImportedModules (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118601:25)
From the above error i can tell that the problem maybe comming from typescript, I'v tried changing version of typescript but still it's not working. In my src/index.ts it looks as follows:
#!/usr/bin/env ts-node
import path from "path";
import inquirer from "inquirer";
import { writeFile, readFile } from "fs/promises";
....
Running npm install -g ts-node#latest fixed it for me. I needed to update my globally installed ts-node version.
To reiterate previous answers for yarn users:
yarn add -D ts-node#latest solved it for me. These are my versions now:
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
The top answer probably shouldn't recommend a downgrade.
Edit
If you continue to face issues, try deleting your node_modules folder and reinstalling by running yarn.
If it still doesn't work, you may need to add these versions to your resolutions field in package.json, and then run yarn install --force.
{
"resolutions": {
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
}
}
However, I consider this a bit of a temporary measure, and I wouldn't recommend leaving the resolutions in forever.
Getting the same as of a couple of days.
Reverting ts-node to v10.6.0 fixes it for me.
It is hapening in typescript 4.7.
I lowered my typescript to 4.6.4, and the error disappeared
Update the Typescript as #alex-totolici has suggested: npm i typescript#latest
And update the ts-node: npm i ts-node#latest
Remeber to distinguish between global ts-node and package ts-node;
You have to use npx to run local ts-node
> npx ts-node ...
Anyway, this is what I finally found after 30 mins of repeatedly rm -rf node_nodules and yarn add ts-node#latest.
These changes in the package.json worked for me.
"ts-node": "~10.7.0"
"typescript": "~4.6.4"
Try updating all you packages including typescript
To update typescript: npm i typescript#latest
Here is a package to check for updates: https://www.npmjs.com/package/npm-check-updates
I had the same issue, and already ran the latest versions of typescript and ts-node.
Updating nodemon npm install -g nodemon#latest solved it for me!
I just figure out that the problem was coming from inquirer import when i commented the import it just worked:
// import inquirer from "inquirer";
I suspect that the inquirer types and my current typescript version are not lining up. So you must as well try to debug by commenting imports if the above answers did not work for you.
I don't know exactly why but the problem comes from a #type package, you can find a line similar to this /// <reference types='node' /> if you delete it won't have this problem anymore
Using ts-node-dev version 2.0.0 fixes this problem.
Note you'll have to manually specify the version as by default this version may not get installed.
Running this solved the issue:
npm install --save-dev ts-node#latest
Try newer version of typescript and ts-node .
i have the same problem but it works fine now with below version:
"ts-node": "~10.7.0",
"typescript": "~4.6.4",
ERROR in Debug Failure. False expression: Non-string value passed to ts.resolveTypeReferenceDirective, likely by a wrapping package working
with an outdated resolveTypeReferenceDirectives signature. This is probably not a problem in TS itself.
I still see the issue even after updating the version of Typescript & ts-node with latest versions.

How to deploy websites that include npm-downloaded packages to surge / gh-pages?

I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)
Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?
Here's a bit of my code:
// package.json
{
"name": "leaf_generator",
"version": "1.0.0",
"description": "testing paperjs",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mark tension",
"license": "ISC",
"dependencies": {
"focus-visible": "^4.1.5",
"mathjs": "^6.0.2",
"p5": "^0.8.0",
"paper": "^0.12.1",
"underscore": "^1.9.1"
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
From index.html I import paper.js and my paper.js script like this:
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/javascript" src="js/leaf_generator.js"></script>
And these are the first lines of the .js paper script from where the error is thrown:
$(document).ready(function() {
paper.setup("myCanvas");
with (paper) {
""""""""" paper.js code """"""""""""
}
Thanks!
The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.
Building on the comments, a couple of options of how you could fix your problem quickly:
Option 1: Use the unpkg service for your npm dependencies for now
One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:
<script type="text/javascript" src="https://unpkg.com/paper#0.12.3/dist/paper-full.js"></script>
I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper
Option 2: Un-ignore the node_modules folder on Surge
Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories
Inside the folder you are deploying, create a fill called .surgeignore, and add:
!node_modules/
Option 3: Set up a build tool
As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.

Issue with permissions in a node.js module

I built an npm module named emeraldfw and published it. My package.json file is
{
"name": "emeraldfw",
"version": "0.6.0",
"bin": "./emeraldfw.js",
"description": "Emerald Framework is a language-agnostig web development framework, designed to make developer's lives easier and fun while coding.",
"main": "emeraldfw.js",
"directories": {
"example": "examples",
"test": "test"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EdDeAlmeidaJr/emeraldfw.git"
},
"keywords": [
"web",
"development",
"framework",
"language",
"agnostic",
"react"
],
"author": "Ed de Almeida",
"license": "MIT",
"bugs": {
"url": "https://github.com/EdDeAlmeidaJr/emeraldfw/issues"
},
"homepage": "https://github.com/EdDeAlmeidaJr/emeraldfw#readme",
"devDependencies": {
"jshint": "^2.9.4",
"mocha": "^3.3.0"
},
"dependencies": {
"jsonfile": "^3.0.0",
"react": "^15.5.4",
"vorpal": "^1.12.0"
}
}
As you may see, I declared a "bin": "./emeraldfw.js" binary, which corresponds to the application itself. The package.json documentations says this is going to create a link to the application executable at node.js bin/ directory. This worked fine, but when I install it globally (npm install emeraldfw -g) and then run it from the command line I receive an error messsage
All other node modules are working fine and my application is passing in all tests and when I run it directly inside the development directory (with node emeraldfw.js) it works really fine.
I'm not a node.js expert and after having fought this error for two days, here I am to ask for help.
Any ideas?
EDIT:
I checked the permissions for my node binary (emeraldfw.js) and it belongs to edvaldo:edvaldo, my user and group. And it is with executable permissions set. I should have no permission issues inside my own area with these settings, don't you think?
Well, shebang issue here.
Before creating npm modules, you need read every single line of it's documentation.
As it stated here you need to use shebang to let your operating system know that it should run with node instead of operating system's own script execution hosts.
Please make sure that your file(s) referenced in bin starts with
#!/usr/bin/env node, otherwise the scripts are started without the node executable!
So, by using shebang on an npm module, you tell the os to create platform specific executables which let it use node to run the script. A .cmd file on Windows for example.
Have you try to install as su?

How to include modified javascript library using Bower in a Rails app?

So I'm using angular in a rails app and using bower to manage my javascript libraries. There have been a few times that have come up where I've had to modify the functionality of certain bower packages. What I've done previously is just copy the source file pulled in by bower, make the changes, then save that in my assets directory and pull that file in directly in my application.js manifest.
Is there a better/cleaner way to do this so that all my javascripts are still pulled in via bower? I know that for gemfiles, I can fork a repo and reference that version in my gemfile, is there something similar for bower?
Are there any best practices here? Thanks a bunch.
EDIT: Also I'm using a bower.json file, something like this:
{
"lib": {
"name": "bower-rails generated lib assets",
"dependencies": {
"angular": "latest",
"angular-ui-router": "latest",
"angular-animate": "latest",
"bootstrap-sass-official": "latest",
"angular-deckgrid":"latest",
...
}
},
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {
// "three.js" : "https://raw.github.com/mrdoob/three.js/master/build/three.js"
}
}
}
You can do the same for bower packages. Fork the repo, make your changes, and then create your own Bower package following this. Once it has been registered, you can just bower install <your-package> directly every time :)

NPM installing modules to application root

I messed something up and I've done my best to fix it, but no luck.
Whenever I run 'npm install' on a new node project, it installs all of my dependencies to the root of the application instead of in /node_modules/ like you'd expect in a default application.
For example-
My package.json
{
"name": "hello-world",
"description": "hello world test app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.x"
}
}
When I use 'npm install' I end up with this:
I've tried setting my PATH like in this solution:
How to use package installed locally in node_modules?
but that didn't seem to do much. Help?
observe that you have the cache variable set in that directory
strict-ssl = false
userconfig = /private/tmp/timothy/timothy_local_job_1367532952281_60137/.npmcfg
cache = /Users/tomhorton/Documents/Repository/helpmestackoverflow
root = ./node_modules
That timothy stuff is from a module that I installed shortly before everything went haywire-
I removed that stuff and the defaults took over. Everything works great!

Categories