Does anyone have any clue why a babel config file would be loaded on npm run dev and why it would start flagging perfectly fine parts of my code?
I have a feeling it has something to do with Next.js. My package.json (that Im testing with) for reference:
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#svgr/cli": "^4.2.0",
"babel-jest": "^24.8.0",
"babel-preset-stage-2": "^6.24.1",
"jest": "^24.8.0",
"nodemon": "^1.19.1"
}
My goal is to have an app that runs both npm run dev and npm test and not one or the other. At the moment, if I remove all my babel config files (needed to run jest), my web app will boot up perfectly fine. And vice versa. Honestly I don't think I need or want any babel config files to be active when I start running the server, but I need them to run jest.
So... either there is a way to disable babel from certain package.json scripts or otherwise get jest tests to work without breaking the core functionality of the app?
edit-i fixed it
//.babelrc
{
"presets": [
[
"next/babel"
]
]
}
Related
I am having some trouble getting the Keytar package working in an Electron Forge v6 project (beta.54).
In a freshly generated project, I receive an error about "file too short" when I run the application. Below is an excerpt of the error dialog shown originating from the main process:
> electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 1 / 1
✔ Compiling Main Process Code
✔ Launch Dev Servers
✔ Compiling Preload Scripts
✔ Launching Application
Webpack Output Available: http://localhost:9000
App threw an error during load
Error: node-loader:
Error: dlopen(/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node, 1): no suitable image found. Did find:
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:1015:9)
at Object../node_modules/keytar/build/Release/keytar.node (/Users/abc/Desktop/app2/.webpack/main/index.js:1018:30)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../node_modules/keytar/lib/keytar.js (/Users/abc/Desktop/app2/.webpack/main/index.js:1029:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../src/index.ts (/Users/abc/Desktop/app2/.webpack/main/index.js:1440:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at /Users/abc/Desktop/app2/.webpack/main/index.js:85:18
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:88:10)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
It seems that node-loader is having trouble with this package. I cannot decipher what is happening as I can see the package .node files are copied into ./webpack/main/native_modules , but there is a hashed filename at the root which seems to import the native file.
One strange thing I did notice is that the hashed file at .webpack/main/9e6f9bf6669542cb15efba32c033f3de.node contains the following and not the native binary data:
module.exports = __non_webpack_require__("./native_modules/build/Release/keytar.node")
Subsequently... these .node files /native_modules/build/Release/keytar.node are what I expect.
How should one proceed? I didn't rush to open issues on GitHub until I figured where the issue was coming from.
I feel at the root, there's an issue with how the .node file is generated in keytar, but then who even knows what black magic is happening with Webpack and the loaders.
Steps to reproduce
Create a new Electron Forge project `npx create-electron-app app2 --template=typescript-webpack
Install Keytar npm install keytar
Add const key tar = require('keytar'); into src/index.ts
Run the app via npm run start
Experience the error
Versions
Node: v14.14.0
NPM: v7.0.13
Package JSON dependencies:
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.54",
"#electron-forge/maker-deb": "^6.0.0-beta.54",
"#electron-forge/maker-rpm": "^6.0.0-beta.54",
"#electron-forge/maker-squirrel": "^6.0.0-beta.54",
"#electron-forge/maker-zip": "^6.0.0-beta.54",
"#electron-forge/plugin-webpack": "6.0.0-beta.54",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"css-loader": "^4.2.1",
"electron": "11.0.3",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.20.0",
"fork-ts-checker-webpack-plugin": "^5.0.14",
"node-loader": "^1.0.1",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.2",
"typescript": "^4.0.2"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"keytar": "^7.2.0"
}
I had pretty much exact replica of this issue with native module loading the only difference being that in my case the module was locally built and installed as a part of the project.
Something in the webpack's support for native modules has issues within this configuration and causes this. What did the trick for me was to remove node-loader in webpack in webpack.rules.js, ie removing this section:
- // Add support for native node modules
- {
- test: /\.node$/,
- use: 'node-loader',
- },
I found this solution and further discussion on the topic from the issue tracker of electron-forge: https://github.com/electron-userland/electron-forge/issues/1688
I am new to node.js, I have created a project using create-react-app with react, react-redux and react-router.
Now, I want to upload my project to a live server so, I was wondering if I am required to upload the node_modules folder to the server or is it all incorporated in the build folder somehow?
I have searched for answers but only got results related to "Pros and cons of including node modules in your git repository"
No you don't need to upload node_modules into the server.
If you are using a web service like HEROKU to deploy or AWS I recommend you use it so.
so the bottom line is that you don't need to upload the node_modules file. just commit the repo to a git hub and you can link it to your Heroku account so that the site will be live.
so what happens here is that when you not include the node_module file, you have seen that package.json file right ?
You can see all the dependencies that you have used to work on your project like this
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.4",
"generate-password": "^1.4.1",
"js-base64": "^2.4.9",
"jsonwebtoken": "^8.4.0",
"mongojs": "^2.6.0",
"mongoose": "^5.3.12",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0"
}
so that means using that package.json file the server will add and install all the dependencies that need to run the application. And of course this will run on a node environment only. So you will need to select it in the web service you are using. In Heroku you can deploy your app to a node environment. You it's easy you just need to go there and read their documentation on how to do it.you can try digital ocen too they also provide such facilities
heroku here amazon node app deploy here digital ocean docs
here
Early days in the development of my first npm script, and struggling somewhat. I'm on Ubuntu LTS with the latest nvm, node, npm and pnpm releases.
Node + npm have been installed using nvm, pnpm installed using npm, and several modules installed locally (i.e. without the -g flag) using pnpm. No sudo was necessary. The resulting package.json:
{
"name": "javascript-development-environment",
"version": "1.0.0",
"description": "JavaScript development environment cobbled together using various online sources",
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js",
"start": "./node_modules/.bin/babel buildScripts/srcServer.js"
},
"author": "Laird o' the Windy Waas",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.0.0"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"chalk": "^2.4.1",
"express": "^4.16.4",
"open": "^0.0.5",
"path": "^0.12.7"
}
}
With only Firefox 60.0.1 installed, on doing a 'pnpm start' using node, a browser window is opened "Hello World!" displayed, and terminal control has to be regained using a CTRL-C. -> All ok.
If I substitute in babel using the path as shown above (which results from the same issues described in this post), the buildScripts code is echoed to the terminal, but no browser window opens, and terminal control is released immediately on completion. The npm debugger provides no useful feedback. -> Something not working..
As the "Hello World!" code is traversed correctly using node (and remains unchanged for the babel traversal), it is not the source of the problem.
Here my babel config files:
.babelrc
{
"presets": [
"#babel/preset-env"
]
}
babel.config.js
const presets = [
[
"#babel/env",
{
targets: {
edge: "17",
firefox: "61",
chrome: "67",
safari: "11.1",
opera: "56"
},
useBuiltIns: "usage"
},
],
];
module.exports = { presets };
The problem looks to be that babel is not passing the transpiled code on to nodejs / express. Bound to be something simple, but I'm just going round in circles..
One thing I found myself asking is whether there might be a conflict between the various env presets across .babelrc, babel.config.js and package.json. Successive parking of the .babelrc and babel.config.js files, however, brought no change/advance.
I have also noticed that both (nvms) node and (ubuntus) nodejs are currently installed:
$ which node
/home/<myusername>/.nvm/versions/node/v10.13.0/bin/node
$ which nodejs
/usr/bin/nodejs
However, as everything to do with node and npm was installed using nvm, this shouldn't be a problem.
I could, I suppose, try installing babel globally, but with this widely frowned apon. I'd prefer a solution reflecting 'best practice'.
Thanks for any suggestions.
In earlier years, tutor material suggested babel-node would start npm / node (and hence express) on the user's behalf.
babel-node now no longer seems to be recognised. Attempts at using the babel-node command failed, and simply using node in it's place resulted in the transpiler output being dumped to the terminal.
babel, (in our case) pnpm, and node now have to be explicitly called, the latter referencing the transpiled code. node appears to handle interfacing with express.
After some experiment, therefore, the following changes (in package.json) appear to work fine:
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js -d dist",
"build": "./node_modules/.bin/babel buildScripts/srcServer.js -d dist",
"start": "pnpm run build && node dist/startMessage.js && node dist/srcServer.js"
},
These result both in a tidy console output and result in "Hallo World!" being displayed in a freshly opened browser window.
Just hope this is of use to someone else.. ;-)
OK, I'm fairly new to all this front end programming and I hope my question is not silly.
I have an existing app made with an express.js framework with a custom gulp config and ejs. Now, I want to integrate the all new shiny Foundation for Apps into it.
On the Zurb website, the manual install is only a one-liner through bower or npm (http://foundation.zurb.com/apps/docs/index.html#!/installation)
bower install foundation-apps --save
npm install foundation-apps --save
So that's what I did, but the Foundation formatting is not happening at all.
I tried to include the CDN reference lines (css and js) too, but the same is happening.
When I proceed to create an app with the "normal" installation, everything is working great. But I want to use the Express framework and this is not the case here!
I am missing something but I don't see what.
package.json
{
"name": "2004app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"apache-server-configs": "^2.7.1",
"body-parser": "~1.12.0",
"browser-sync": "^1.3.0",
"cookie-parser": "~1.3.4",
"debug": "~2.1.1",
"del": "^1.1.0",
"ejs": "~2.3.1",
"express": "~4.12.2",
"foundation-apps": "^1.1.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "0.2.2",
"gulp-changed": "^1.0.0",
"gulp-concat": "2.5.2",
"gulp-csso": "^1.0.0",
"gulp-flatten": "0.0.4",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "0.1.5",
"gulp-nodemon": "^2.0.2",
"gulp-rename": "1.2.2",
"gulp-replace": "^0.5.0",
"gulp-sass": "^1.2.0",
"gulp-size": "^1.0.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.0.1",
"gulp-uncss": "^1.0.0",
"gulp-useref": "^1.0.1",
"jshint-stylish": "^1.0.0",
"morgan": "~1.5.1",
"opn": "^1.0.0",
"psi": "^1.0.4",
"require-dir": "^0.1.0",
"run-sequence": "^1.0.1",
"serve-favicon": "~2.2.0"
}
}
For example, the following code is not rendering like it should. It only shows a line with 3 times "Content goes here", instead of this : http://foundation.zurb.com/apps/docs/#!/accordion
<zf-accordion>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
</zf-accordion>
Is what I am trying to do possible ?
How can I use the CDN references ? (I successfully put CDN references for bootstrap in another app)
Thanks!
It is possible!
Though it has quite a few moving pieces that you should understand.
I recently did the same thing, but depending on the size of your app's frontend it may take some time to understand everything that is going on. It's not as simple as just including a library.
You mention express app, is it an Angular app? First thing if your not familiar with Angular I would read about it and specifically 'Modules' as in the end that is all Foundation Apps is.
https://docs.angularjs.org/guide/module
You will need to create your angular module and have Foundation as dependency.
Also it is good to realize that the way that foundation for apps is packaged its meant to be compiled in its own weird sort of way. So basically whenever you make changes your re-compiling your front end html/logic/css.
Make sure your express app is serving up the Single Page Application which is Foundation Apps. Be sure to watch your web development console to see if your getting any strange Angular errors. If you are you can typically click on them and get help from the angular site.
Also the Foundation Apps gulp task is unique in it has its own little plugin to create the routing based off the templates. See the following link:
http://foundation.zurb.com/apps/docs/#!/angular
If your just getting into Front End Frameworks I would suggest going through a few basic Angular tutorials before tackling a angular app such as Foundation Apps.
Once familiar with Angular look at exactly what the Gulp build is doing (gulpfile.js). It takes care of the following:
Copies static resources
Its running SASS and compiling styling
Copies Foundation for Apps Javascript
Copies the templates and builds the routes (the route building is a little hidden
Once you understand what the Gulpfile.js is doing you should start to piece together how the front end is built.
I reworked it using Grunt, but ended up switching back to gulp because of their template job (ngHtml2js)
Don't giveup, be persistent and it will slowly make sense!
I'm working on the same task you mentioned up there, an existing MEAN application, that I developed with ejs front end template, and a front-end that I developed with the foundation-apps tools, the front-end has everything I need for my MEAN back-end, now for merging all of this together into a single node app.
UI is developed independently using foundation for app build tools such as gulp, considering my UI is developed with all the zurb foundation html parts are included to represent all the required functions served by my MEAN app. So after the build with foundation-apps the resulting build folder contains basic assets without any SASS or the need for foundation-apps to be in the package.json dependencies, since the foundation.js file is in the assets folder for the front-end, and sass is already built into app.css
I dont see how it's possible to have two single page web apps running on the same node server, in case I try separating the two different app configurations, angular dependency injection, routes, index files separated etc..
The challenge is wrapping up a single page web app with all dependencies, while maintaining how the foundation UI manages it's routing, as it is quite different from how express manages routing, it happens using different libraries.
I've begun using Node.js to make web applications. It's really awesome. I've come across a few modules that I want to incorporate into my build. I can work with the modules in Terminal after a global npm install. When it comes time to add them to my application, I have no idea how to go about placing them in my directory structure and I haven't found any good documentation on this. My typical node.js directory is:
ROOT
Server
server.js
node-modules
Client
index.html
css
-main.css
javascript
-main.js
-jquery.js
My process for installing the modules has been:
I cd into my Server file and run npm install
Then I go to my package.json file and include the module in the dependencies
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"jade": "*",
"stylus": "*",
"<node-module-here>": "1.0.x",
},
"engines": {
"node": "0.10.0",
"npm": "1.2.14"
},
}
After that, I head over to the server.js file I add:
module.exports = require('<path_to_node-module_lib>');
When I run functions that are dependent on the modules on the Client side (functions that work in Terminal), I don't receive an error but the function won't run. Because I'm not receiving errors I have no idea about how to debug. If anyone can recognize some fatal flaw in my structure or implementation and can offer some recommendations, I offer my first born.