I tried to deploy my project developed using React and Node.js to Heroku, but after issuing git push heroku master, I got an error:
2020-06-05T02:12:18.092681+00:00 app[web.1]: import express from "express";
2020-06-05T02:12:18.092682+00:00 app[web.1]: ^^^^^^^
2020-06-05T02:12:18.092682+00:00 app[web.1]:
2020-06-05T02:12:18.092683+00:00 app[web.1]: SyntaxError: Unexpected identifier
2020-06-05T02:12:18.092683+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:718:23)
I googled and it is said that Node.js doesn't support ES6 syntax, and I can solve it by using babel.
But I don't know how to configure it.
Below are my files:
.babelrc.json:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
package.json:
{
"name": "react_e-commerce",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js",
"build": "rimraf dist && babel backend -d dist",
"heroku-postbuild": "npm run build && cd e-commerce && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.16"
},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.1",
"#babel/node": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"babel-cli": "^6.26.0",
"mkdirp": "^1.0.4",
"nodemon": "^2.0.4",
"rimraf": "^3.0.2"
},
"engines": {
"node": "12.4.0",
"npm": "6.9.0"
}
}
And my whole project is on https://github.com/powerseed/e-commerce-React
The e-commerce folder is for frontend.
Thanks in advance!
You can just use require if you want. Here are the details on why there are two ways to bring in files. The difference between "require(x)" and "import x"
per the Nodejs docs I was able to use the following to run node node-module.js and similar may work in your situation--I'm unfamiliar with the specific node version you're working with currently, but the "type":"module" option would likely allow it--I'm using Nodejs v15 at the moment.
package.json
{
"type": "module"
}
node-module.js
import * as os from 'os';
import defaultstuff, { stuff } from './node-import-stuff.js';
console.log(123 === stuff, defaultstuff, Object.keys(os));
node-import-stuff.js
export const stuff = 123;
export default stuff;
Related
I am working on a register user setup in React JS, installed crypto library from to secure passwords but when I run the program , it gives me an error :
ERROR in ./node_modules/jwa/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in 'E:\Node
Tutorial\registerSetup\client\node_modules\jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"crypto": false }
Here is my package.json file :
{
"name": "registerSetup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV= production node server",
"dev": "nodemon server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"dotenv": "^15.0.0",
"express": "^4.17.2",
"express-jwt": "^6.1.0",
"express-validator": "^6.14.0",
"google-auth-library": "^7.11.0",
"jsonwebtoken": "^8.5.1",
"loadash": "^1.0.0",
"lodash": "^4.17.21",
"mongoose": "^6.1.8",
"morgan": "^1.10.0",
"node-fetch": "^3.2.0",
"nodemailer": "^6.7.2",
"nodemon": "^2.0.15"
}
}
The package.json for my react folder in registerSetup --> https://pastebin.com/hqBs7J4s
I think you should go to your node_modules/react-scripts/config/webpack.config.json and there write the following code in resolve block
fallback: {
"crypto": require.resolve("crypto-browserify")
}
Note: crypto-browserify should be installed
Crypto is a built-in Node module you don't have to install it. Uninstall "crypto": "^1.0.1" and then try:
const crypto = require("crypto")
You can try to downgrade the react-scripts in package.json version to : 4.0.3
So, I'm pretty new to VueJS. Integrating axios has never really been a problem on any of my other apps, but for some reasons this one just won't show up.
It doesn't like npm only, or CDN only, or the current implementation of CDN+npm install.
Hope y'all can help me out! Not really sure what the issue is, and googling hasn't been too helpful.
~Desired Outcome:
post via axios within vue application
~Current Status Error:
ERROR Failed to compile with 1 error
"This dependency was not found:
* https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js& in ./src/App.vue
To install it, you can run: npm install --save https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js&"
~What Happened when Running Above Command in zShell:
zsh: parse error near `&'
~package.json file:
"name": "ag-grid",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "App.vue"
},
"dependencies": {
"ag-grid-community": "^25.2.1",
"ag-grid-vue": "^25.2.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-property-decorator": "^8.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
~Relevant script code:
import { AgGridVue } from "ag-grid-vue";
import { axios } from "axios";
import { VueAxios } from "vue-axios";
I'm trying to put my application into production. But, the teacher who was teaching put it for me, the lib 'sucrase' to use syntax of "import from" instead of "require". Only now Heroku is complaining that he doesn't understand the syntax "import". Is there anything I can do about line of code and configuration? Or do I have to change all "import from" to "require"? ... Lower the logs ...
logs in Heroku
2020-06-27T20:21:41.876688+00:00 app[web.1]: /app/src/server.js:1
2020-06-27T20:21:41.876689+00:00 app[web.1]: import app from './app';
2020-06-27T20:21:41.876690+00:00 app[web.1]: ^^^^^^
2020-06-27T20:21:41.876690+00:00 app[web.1]:
2020-06-27T20:21:41.876691+00:00 app[web.1]: SyntaxError: Cannot use import statement outside a module
2020-06-27T20:21:41.876691+00:00 app[web.1]: at wrapSafe (internal/modules/cjs/loader.js:1054:16)
2020-06-27T20:21:41.876692+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1102:27)
My package.json
{
"name": "futs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "nodemon src/server.js",
/ ^ ^ ^ Below at the code is a configuration about the 'nodemon' that the teacher gave me
"dev:debug": "nodemon --inspect src/server.js"
},
"dependencies": {
"aws-sdk": "^2.704.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"date-fns": "^2.14.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.2",
"multer-s3": "^2.9.0",
"nodemailer": "^6.4.10",
"pg": "^8.2.1",
"sequelize": "^5.21.13",
"sequelize-cli": "^5.5.1",
"uuid": "^8.1.0",
"yup": "^0.29.1"
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"nodemon": "^2.0.4",
"prettier": "^2.0.5",
"sucrase": "^3.15.0"
}
}
nodemon.json
{
"execMap":{
"js": "node -r sucrase/register"
}
}
I don't know how to run to deploy, if anyone can help me
As you see in the error log : Cannot use import statement outside a module.
import statements are permitted only in ES modules not CommonJS see more about that here :
However you can make Node treat your file as a ES module you need to :
add "type": "module" to package.json .
Add --experimental-modules flag upon running your app(not necessary with Node 13.2.0+ so check your node version with node --version)
as follow :
// package.json
{
"type": "module"
}
take a look here for more information .
OR :
Alternatively you can use the .mjs instead of .jsextension .
SOURCES :
SyntaxError: Cannot use import statement outside a module
https://nodejs.org/api/esm.html .
https://nodejs.org/api/esm.html#esm_enabling .
https://nodejs.org/api/esm.html#esm_code_import_code_statements
To build my app using sucrase I use:
sucrase ./src -d ./dist --transforms imports
This is my package.json file:
"scripts": {
"dev": "nodemon src/server.js",
"build": "sucrase ./src -d ./dist --transforms imports",
"start": "node dist/server.js"
},
I have been following this tutorial to play around with strapi
https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi
But when I installed, I installed alpha instead of beta
I am trying to upgrade to beta so I followed the instructions here
https://strapi.io/documentation/3.0.0-beta.x/migration-guide/migration-guide-alpha.26-to-beta.html
I followed the instructions to change modify package.json then I ran npm i which gave me an error of notarget No matching version found for strapi-hook-knex#3.0.0-beta.x.
then instead of what the documentation mentioned changing all alpha related to beta.x
"strapi": "3.0.0-alpha.26.2" -> "strapi": "3.0.0-beta.x"
I did "strapi": "^3.0.0-beta.17.5"
which makes the command npm i ran successfully so I continued with the instructions. After I am done, I tried running strapi develop I get an error of error Error: Missing extensions folder. Please create one in your app root directory so I added in the folder named extensions manually then try to start up strapi develop but then I get an error of error Error: Cannot find module 'strapi-hook-bookshelf/lib/utils/'
I tried removing node_modules clean npm cache and also the .cache folder within the project but none of those worked though.
Here is a complete modified package.json
{
"name": "cms",
"private": true,
"version": "0.1.0",
"description": "A Strapi application.",
"main": "./server.js",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi",
"lint": "node_modules/.bin/eslint api/**/*.js config/**/*.js plugins/**/*.js"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-react": "^7.7.0"
},
"dependencies": {
"axios": "^0.19.0",
"knex": "latest",
"lodash": "^4.17.5",
"pg": "^7.13.0",
"sqlite3": "latest",
"strapi": "^3.0.0-beta.17.5",
"strapi-admin": "^3.0.0-beta.17.5",
"strapi-email-nodemailer": "^0.2.1",
"strapi-hook-bookshelf": "^3.0.0-beta.17.5",
"strapi-hook-knex": "^3.0.0-beta.17.5",
"strapi-plugin-content-manager": "^3.0.0-beta.17.5",
"strapi-plugin-content-type-builder": "^3.0.0-beta.17.5",
"strapi-plugin-email": "^3.0.0-beta.17.5",
"strapi-plugin-upload": "^3.0.0-beta.17.5",
"strapi-plugin-users-permissions": "^3.0.0-beta.17.5",
"strapi-provider-upload-cloudinary": "^3.0.0-beta.17.5",
"strapi-utils": "^3.0.0-beta.17.5"
},
"author": {
"name": "abc",
"email": "",
"url": ""
},
"maintainers": [
{
"name": "abc",
"email": "",
"url": ""
}
],
"strapi": {
"uuid": "abcf5f65-060b-43f6-b98d-a4687fd81def"
},
"engines": {
"node": "10.x",
"npm": ">= 6.0.0"
},
"license": "MIT"
}
Anyone has idea what I have done wrong?
Thanks in advance for any suggestions + help.
Current versions before upgrading strapi
Strapi - 3.0.0-alpha.26.2 (global)
Node - v10.17.0
npm - 6.11.3
I was experiencing the same issue. I was able to resolve this by emptying my /api folder and the server started working again.
I am developing a WebGL library that I would like to import into an EmberJS project as a dependency. Unless I'm mistaken, I believe that I can do this via the repository directly without having to make an npm package but I am having trouble getting it to work.
I have made a watered down library and ember project in a couple repos here and here respectively to demonstrate my problem.
If you clone the library and run npm run build it'll make a test bundle which can be called by the test html file packageTest.html. It should print out 'Hello World Test Member is: 5'.
In the Ember project I have a component in which I would like to import the 'HelloWorld' class from the library and call one of its member methods.
import Ember from 'ember';
//import HelloWorld from 'npm-package-test';
export default Ember.Component.extend({
isWide: false,
actions: {
toggleImageSize() {
// var h = new HelloWorld();
// console.log(h.print());
this.toggleProperty('isWide');
}
}
});
When I uncomment the import statement I get the console error
Error: Could not find module 'npm-package-test'
I'm still pretty new to npm packaging and how dependencies work (and know next to nothing about Ember) but from my limited understanding I feel like this method should work the way I currently have it.
For the library, I have the source files being babeled into ES5 in its lib folder. As you can see in the package.json for the library below I have the main set to the index file in the lib folder so that the Ember project can pull the babeled modules.
Library: package.json
{
"name": "npm-package-test",
"version": "1.0.0",
"description": "JibJab Render Library for eCards",
"main": "lib/index.js",
"scripts": {
"prepublishOnly": "npm run build",
"build-test": "browserify test.js > demo/testbundle.js",
"build": "babel ./src -d ./lib && npm run build-test",
"lint": "eslint ./src",
"test": "nyc mocha --require babel-core/register"
},
"repository": {
"type": "git",
"url": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
},
"author": "JibJab",
"license": "ISC",
"bugs": {
"url": "https://github.com/nhoughto5/NPM_PackageTest/issues"
},
"homepage": "https://github.com/nhoughto5/NPM_PackageTeste#readme",
"devDependencies": {
"babel-cli": "6.26.0",
"babel-preset-env": "1.6.1",
"eslint": "4.19.0",
"mocha": "5.0.4",
"nyc": "11.6.0"
},
"nyc": {
"reporter": [
"lcov",
"text"
]
},
"dependencies": {
"domready": "^1.0.8"
}
}
For reference, here is the lib/index.js which should be the entry point of my library:
Library: lib/index.js
'use strict';
module.exports = {
TestClass: require('./TestClass'),
HelloWorld: require('./HelloWorld')
};
In the ember project I have the library repository listed as a dependency:
Ember: package.json
{
"name": "test-ember-app",
"version": "0.0.0",
"description": "Small description for test-ember-app goes here",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"repository": "",
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"devDependencies": {
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-browserify": "1.2.1",
"ember-cli": "2.13.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.0.0",
"ember-cli-dependency-checker": "^1.3.0",
"ember-cli-eslint": "^3.0.0",
"ember-cli-htmlbars": "^1.1.1",
"ember-cli-htmlbars-inline-precompile": "^0.4.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-mirage": "0.4.3",
"ember-cli-qunit": "^4.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-tutorial-style": "2.0.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.13.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.0.0",
"ember-resolver": "^4.0.0",
"ember-source": "~2.13.0",
"ember-welcome-page": "^3.0.0",
"loader.js": "^4.2.3"
},
"engines": {
"node": ">= 4"
},
"private": true,
"dependencies": {
"npm-package-test": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
}
}
When I run npm install in the ember project I can see that the folder structure from the library appears in the node_modules folder. To my limited experience, everything seems correct but for some reason I am still getting this undefined module error.
Is there a step I've missed or some crucial detail I'm missing?
Yes, there’s one step you are still missing. For Ember-CLI to understand that you want to include your npm package in your app’s vendor files, you’ll need to use app.import as outlined here: https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/
That approach with app.import has existed since Ember-CLI 2.15, but if you are on an older version you’ll need to upgrade first.