We Keep Coding

Change 'import' to 'require', sucrase deployment

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"
},

How to use "import" in Node.js?

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;

webpack and babel configuration for normal javascript project is failing

I'm doing this simple setup with webpack and Babel for simple javascript project. I've tried so many examples but nothing is working.
These are my settings :
{
"name": "webpack_babel-prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
CONFIGURATION FILE
const path = require('path');
module.exports={
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
},
mode:'development',
module:{
rules:[{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:['babel-preset-env ']
}
}]
}
}
I'm getting this error while i'm running the npm run build command:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/core'
babel-loader#8 requires Babel 7.x (the package '#babel/core'). If you'd
like
to use Babel 6.x ('babel-core'), you should install 'babel-loader#7'.
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-compile-
cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\ABCD\Music\Webpack_Babel
prac\node_modules\babel-loader\lib\index.js:10:11)
at Module._compile (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-
compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
I've gone through so many tutorials and also tried this medium article but nothing is working. https://medium.com/#jeffrey.allen.lewis/the-ultimate-2018-webpack-4-and-babel-setup-guide-npm-yarn-dependencies-compared-entry-points-866b577da6a

Error: Couldn't find preset "" relative to directory

I am unable to use es-15 with node.js I dont think that there is any problem with script as it was working before.
Package.json is below
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js --exec babel-node --presets es2015, stage-2"
},
"license": "MIT",
"dependencies": {
"express": "^4.16.4",
"express-graphql": "^0.7.1",
"graphql": "^14.0.2",
"mongoose": "^5.3.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"nodemon": "^1.18.5"
}
}
On running npm start, I get the error below,
> server#1.0.0 start /home/ansh/boo/server
> nodemon index.js --exec babel-node --presets es2015, stage-2
[nodemon] 1.18.5
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node index.js --presets es2015, stage-2`
/home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^
Error: Couldn't find preset "" relative to directory "/home/ansh/boo/server"
at /home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/home/ansh/boo/server/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at compile (/home/ansh/boo/server/node_modules/babel-register/lib/node.js:103:45)
at loader (/home/ansh/boo/server/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/home/ansh/boo/server/node_modules/babel-register/lib/node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:605:32)
[nodemon] app crashed - waiting for file changes before starting...

Debugger cannot find module 'StyleSheet'. My app runs fine. Path points fine

Very strange error that I cannot seem to solve.
React-native and node.js and VS Code
To get VS Code to get this far I used the line, yarn add babel-cli
Error I'm Getting:
Debugger listening on ws://127.0.0.1:39061/61f6ad51-d255-463a-a0ad-b686be9b8b0d
Object {dataReducer: Object, reducerSPY: Object, userApp: Object}
home.js:31
Error: Cannot find module 'StyleSheet'
module.js:555
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.get StyleSheet [as StyleSheet] (c:\AndroidEverything\AndroidStudioProjects\Property2\AwesomeProject\node_modules\react-native\Libraries\react-native\react-native-implementation.js:98:29)
at Object.<anonymous> (c:/AndroidEverything/AndroidStudioProjects/Property2/AwesomeProject/app/components/home.js:195:16)
Strange because:
My app runs fine
If I comment out this line all other imports are found, just
StyleSheet.
All files are as I expected in its location. This seems buggy?
home.js(which is called by App.js)
import {
FlatList,
View,
Text,
ActivityIndicator,
StyleSheet
} from 'react-native';
launch.json
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/App.js",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
},
package.json
{
"name": "AwesomeProject",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "25.0.0",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"babel-cli": "^6.26.0",
"expo": "^25.0.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-native": "0.52.0",
"react-navigation": "^1.5.1",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"save": "^2.3.2"
}
}
Any ideas where to keep digging? launch.json file? connectivity? yarn? or a spelling error?
UPDATE:
Removed the line about babel since i'm using yarn for node.js and Expo to run on android. error has changed to:
path\Property2\AwesomeProject\App.js:1
(function (exports, require, module, __filename, __dirname) { import React,
{ Component } from 'react';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:624:28)
at Object.Module._extensions..js (module.js:671:10)
using yarn upgrade jest-expo#25.1.0-beta.0
warning "expo > react-native-maps#0.19.0" has incorrect peer dependency
"react-native#0.51.0".
warning " > react-native#0.52.0" has incorrect peer dependency
"react#16.2.0".
warning "jest-expo > babel-jest#22.4.3" has unmet peer dependency "babel-
core#^6.0.0 || ^7.0.0-0".
[4/4] Rebuilding all packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ jest-expo#25.1.0-beta.0
warning "jest-expo" is already in "devDependencies". Please remove existing
entry first before adding it to "dependencies".

This is the minimal package.json file of my react native sample project just created to test your cases. Basically you are using CRNA (create-react-native-app) to create your project this is a expo client. See my package.json file below:
{
"name": "AwesomeProject",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.13.1",
"jest-expo": "26.0.0",
"react-test-renderer": "16.3.0-alpha.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^26.0.0",
"react": "16.3.0-alpha.1",
"react-native": "0.54.0"
}
}
You don't need to add babel-cli for basic project read its usage here but if you still need then add it to your dev-dependencies. Also react-dom you still not need because its for reactjs projects not for react-native.
My suggestion is try to read before you start your project and go step by step then you'll not stuck in some irrelevant issue.

What node version are you using? I am asking this because in your question you mentioned the error the code is throwing
path\Property2\AwesomeProject\App.js:1
(function (exports, require, module, __filename, __dirname) { import React,
{ Component } from 'react';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:624:28)
at Object.Module._extensions..js (module.js:671:10)
and it seems like code is having trouble resolving import statements.So it may be that yout babel is not able resolve this new syntax.