The original variables are exported in ES6 module like this:
export const url = 'https://example.com/api'
I know I can use this variable using
import {url} from 'src/api'
But the thing is I can't use import in gatsby-config.js file and only can use ES5 syntax.
I tried like this:
const {url} = require('src/api')
but it doesn't work and get errors while gatsby develop
The error is following:
export const url = 'https://example.com/api'
^^^^^^
SyntaxError: Unexpected token 'export'
- v8-compile-cache.js:226 NativeCompileCache._moduleCompile
[project]/[v8-compile-cache]/v8-compile-cache.js:226:18
- v8-compile-cache.js:172 Module._compile
[project]/[v8-compile-cache]/v8-compile-cache.js:172:36
- loader.js:995 Object.Module._extensions..js
internal/modules/cjs/loader.js:995:10
- loader.js:815 Module.load
internal/modules/cjs/loader.js:815:32
- loader.js:727 Function.Module._load
internal/modules/cjs/loader.js:727:14
- loader.js:852 Module.require
internal/modules/cjs/loader.js:852:19
- v8-compile-cache.js:159 require
[project]/[v8-compile-cache]/v8-compile-cache.js:159:20
- gatsby-config.js:4 Object.<anonymous>
C:/project/gatsby-config.js:4:26
- v8-compile-cache.js:178 Module._compile
[project]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:995 Object.Module._extensions..js
internal/modules/cjs/loader.js:995:10
- loader.js:815 Module.load
internal/modules/cjs/loader.js:815:32
- loader.js:727 Function.Module._load
internal/modules/cjs/loader.js:727:14
- loader.js:852 Module.require
internal/modules/cjs/loader.js:852:19
- v8-compile-cache.js:159 require
[project]/[v8-compile-cache]/v8-compile-cache.js:159:20
- get-config-file.js:33 getConfigFile
[project]/[gatsby]/dist/bootstrap/get-config-file.js:33:20
When you exporting your constant if you use module.exports it should not give this error. Do it like this:
const yourUrl = 'https://example.com/api'
module.exports = { url: yourUrl }
Hope you know what you are trying to achieve because the result produces anti pattern against gatsbyjs specification as it already converts code internally from es6 to es5 after reading and validating gatsby-config.js.
So, try this way to require constants in gatsby-config.js which were exported in es6 module
From es6 to es5 conversion, install #babel/cli and #babel/core package i.e npm install #babel/cli #babel/core --save-dev
Add new npm/yarn script in package.json -> scripts -> "prepare_config" : "NODE_ENV=test babel ./gatsby-config.js <LIST_OF_FILES_TO_CONVERT> --out-dir ./"
Make sure babel-preset-gatsby directory is present under node_modules if not then install it i.e. npm install babel-preset-gatsby --save-dev
Either add .babelrc in project root directory having below code for babel preset and conversion.
{
"presets": [
[
"babel-preset-gatsby",
{
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}
OR if you don't want to add .babelrc then specify babel configuration in package.json.
"babel": {
"presets": [
[
"babel-preset-gatsby",
{
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}
Now run npm run prepare_config script first for conversion which will import required constants which were exported in ES6 module.
Then you can run gatsby develop successfully.
Change the type:"module" or set in package.json.
{
"name": "server",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo "Error: notestspecified" && exit 1",
"start": "nodemon server.js"
},
"keywords": [
],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.16.5",
"body-parser": "^1.19.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.2",
"mongoose": "^6.1.3",
"nodemon": "^2.0.15"
}
}
Related
I have encountered a problem while writing an API in Node and Express. I have a main router file inside folder 'shared' that I'm using to import other routers. I created a folder called 'module' inside 'src' folder, and inside it I created a 'products' folder. Inside the products folder, there's a folder called 'routes', with a file called 'productRoutes', which is where I declare all routes related to products. I'm trying to import the products router inside the main router file, which is outside the modules folder, but I keep getting the error:
"Error: Cannot find module 'src/modules/products/routes/productRoutes'",
even though the path to the file is correct.
This is the folder structure of my project:
So basically I'm trying to import file in 'src/modules/products/routes/productRoutes' into 'src/shared/http/routes/index', but I get the following error:
Error: Cannot find module 'src/modules/products/routes/productRoutes'
Require stack:
- C:\Users\joaog\Desktop\Projetos\api-sales\src\shared\http\routes\index.ts
- C:\Users\joaog\Desktop\Projetos\api-sales\src\server.ts
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Function.Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (C:\Users\joaog\Desktop\Projetos\api-sales\src\shared\http\routes\index.ts:2:1)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._compile (C:\Users\joaog\Desktop\Projetos\api-sales\node_modules\source-map-support\source-map-support.js:568:25)
at Module.m._compile (C:\Users\joaog\AppData\Local\Temp\ts-node-dev-hook-7670897674579045.js:69:33)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at require.extensions..jsx.require.extensions..js (C:\Users\joaog\AppData\Local\Temp\ts-node-dev-hook-7670897674579045.js:114:20)
[ERROR] 22:49:49 Error: Cannot find module 'src/modules/products/routes/productRoutes'
Require stack:
- C:\Users\joaog\Desktop\Projetos\api-sales\src\shared\http\routes\index.ts
- C:\Users\joaog\Desktop\Projetos\api-sales\src\server.ts
This is the code in the main routes file in which I'm importing the file from modules folder:
import {Request, Response, Router} from 'express';
import productsRouter from 'src/modules/products/routes/productRoutes';
const routes = Router();
routes.use('/products',productsRouter);
routes.get('/',(req : Request,res : Response)=>{
return res.json({message : "hello world!"});
})
export default routes;
this is the products router file:
import { Router } from "express";
import ProductsController from "src/modules/products/controllers/ProductsController";
const productsRouter = Router();
const productsController = new ProductsController();
productsRouter.get('/',productsController.index);
productsRouter.get('/:id',productsController.show);
productsRouter.post('/',productsController.create);
productsRouter.put('/:id',productsController.update);
productsRouter.delete('/:id',productsController.delete);
export default productsRouter;
and this is the package.json file:
{
"name": "api-sales",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts",
"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",
"typeorm" : "ts-node-dev node_modules\\typeorm\\cli.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/cors": "^2.8.13",
"#types/express": "^4.17.17",
"#types/node": "^18.13.0",
"#typescript-eslint/eslint-plugin": "^5.51.0",
"#typescript-eslint/parser": "^5.51.0",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"ts-node-dev": "^2.0.0",
"typescript": "^4.9.5"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"express-async-errors": "^3.1.1",
"pg": "^8.9.0",
"reflect-metadata": "^0.1.13",
"typeorm": "^0.2.29"
}
}
I created a dummy file inside 'modules' folder and tried to import it in main routes file in 'shared' folder and got the same error, but then I tried to import the dummy file into 'src/server' and every thing worked fine. So it appears that i can't import any files from 'modules' into 'shared'. I also tried using require instead of import but ended up with same error.
I am trying to create a service to convert an SVG to a PNG using the svg2img package. I have it working locally using vercel dev, however when I try to deploy to vercel I always get this error:
2021-09-27T01:11:56.532Z e3a35069-8a51-4e1d-81b9-110e1b17e2be ERROR Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/api/node_modules/canvg/lib/index.js
require() of ES modules is not supported.
require() of /var/task/api/node_modules/canvg/lib/index.js from /var/task/api/node_modules/svg2img/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /var/task/api/node_modules/canvg/lib/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/api/node_modules/canvg/package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/var/task/api/node_modules/svg2img/index.js:1:13)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
code: 'ERR_REQUIRE_ESM'
}
RequestId: e3a35069-8a51-4e1d-81b9-110e1b17e2be Error: Runtime exited with error: exit status 1
Runtime.ExitError
Here is what my code looks like:
import svg2img from 'svg2img';
export default function(req, res) {
const url = req.query.url;
const width = req.query.width;
const height = req.query.height;
const size = Math.min(width, height);
svg2img(url, {width: size, height: size, preserveAspectRatio: true},
function(error, buffer) {
if (buffer) {
res.send(buffer);
}
});
};
Here is the package.json
{
"name": "svg2png",
"version": "1.0.0",
"description": "convert svgs to pngs",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "me",
"license": "ISC",
"dependencies": {
"svg2img": "^0.9.3"
},
"type": "module"
}
You can try lowering the version of svg2img to one that doesn't use 3.0.8 of canvg which uses "type": "module" in their package.json. svg2img uses require('canvg') which causes the error because it is trying to use commonjs in an esm context.
See this issue.
How to properly use import statement?
This is my very basic electron-react starter :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
Using node Chrome and Electron
</body>
</html>
package.json :
{
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
const {app, BrowserWindow} = require('electron')
//import { app, BrowserWindow } from 'electron'
async function createWindow () {
// Create the browser window
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL ('http://localhost:3000/')
win.webContents.openDevTools()
}
app.on('ready', createWindow)
Running yarn electron . I have no problems at all :
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
But when I add "type": "module" to package.json which, based on what I read around, should indicate that every .js files are considered modules, and modify in main.js the way of importing :
package.json :
{
"type": "module",
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
//const {app, BrowserWindow} = require('electron')
import { app, BrowserWindow } from 'electron'
I get this error:
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/marco/webMatters
/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js from /home/marco
/webMatters/electronMatters/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in
that package scope as ES modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, change the requiring code to use import(),
or remove "type": "module" from /home/marco/webMatters/electronMatters
/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
/home/marco/webMatters/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js
from /home/marco/webMatters/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js is an ES module file
as it is a .js file whose nearest parent package.json contains "type":
"module" which defines all .js files in that package scope as ES
modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs,
change the requiring code to use import(), or remove "type":
"module" from /home/marco
/webMatters/electronMatters/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters
/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
node version: v14.5.0
How to solve the problem?
for this you need to add webPreferences for creating window.
app.on('ready', () => {
window = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
});
});
The Problem
There are some problem with maybe my installation of better-sqlite3 because when I try to execute my index.js (click to show it on pastebin) with
node index.js
there is always the same result. I tried on MacOS, it works but in my machine Linux Lite Ubuntu based distro aren't it gave me the following same error:
/home/mp8/webproject/electron-better-sqlite/node_modules/bindings/bindings.js:96
throw err
^
Error: Could not locate the bindings file. Tried:
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/build/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/build/Debug/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/build/Release/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/out/Debug/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/Debug/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/out/Release/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/Release/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/build/default/better_sqlite3.node
→ /home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/compiled/8.11.3/linux/x64/better_sqlite3.node
at bindings (/home/mp8/webproject/electron-better-sqlite/node_modules/bindings/bindings.js:93:9)
at Object.<anonymous> (/home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/lib/database.js:4:40)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/mp8/webproject/electron-better-sqlite/node_modules/better-sqlite3/index.js:2:18)
What is my purpose?
I want to use better-sqlie33 as my database because sqlite3 doesn't gave the node 8.x and later support.
What I tried:
This trouble shooting guide number one and two, but I still had the same error.
make init, first installed better-sqlite3 gave me the error file make/makefile not found. I got the same error when I do npm install better-sqlite3 --save
Make sure better_sqlite3.node are on my node-modules path. yeah it isn't there.
What I want?
I want to run my index.js correctly like I ran it on Mac.
Dependecies
package.json after make init, if not it just a better-sqlite3 dependencies
{
"_from": "better-sqlite3",
"_id": "better-sqlite3#4.1.4",
"_inBundle": false,
"_integrity": "sha512-Y11HN9PQ9YUeKFMrmiHyOLAKElk2ATJzBZJvuzNwTMxoS7vUEEyLnUCtcBFqViLwbomr0RQwp2MBy/ogxF50PA==",
"_location": "/better-sqlite3",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "better-sqlite3",
"name": "better-sqlite3",
"escapedName": "better-sqlite3",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-4.1.4.tgz",
"_shasum": "9fe1dcf7b699087b98b1997cbb00261e265897e2",
"_spec": "better-sqlite3",
"_where": "/home/mp8/webproject/electron-better-sqlite",
"author": {
"name": "Joshua Wise",
"email": "joshuathomaswise#gmail.com"
},
"bugs": {
"url": "https://github.com/JoshuaWise/better-sqlite3/issues"
},
"bundleDependencies": false,
"dependencies": {
"bindings": "^1.3.0",
"integer": "^1.0.5"
},
"deprecated": false,
"description": "The fastest and simplest library for SQLite3 in Node.js.",
"devDependencies": {
"benchmark": "^2.1.4",
"chai": "^4.1.2",
"cli-color": "^1.2.0",
"fs-extra": "^5.0.0",
"mocha": "^4.1.0",
"sqlite": "^2.9.0"
},
"gypfile": true,
"homepage": "http://github.com/JoshuaWise/better-sqlite3",
"keywords": [
"sql",
"sqlite",
"sqlite3",
"custom",
"aggregate",
"database",
"transactions"
],
"license": "MIT",
"name": "better-sqlite3",
"repository": {
"type": "git",
"url": "git://github.com/JoshuaWise/better-sqlite3.git"
},
"scripts": {
"benchmark": "node benchmark",
"install": "node-gyp rebuild",
"install-debug": "node-gyp rebuild --debug",
"lzz": "lzz -hx hpp -sx cpp -k BETTER_SQLITE3 -d -hl -sl -e ./src/better_sqlite3.lzz",
"posttest": "rm -r ./temp/",
"prepublishOnly": "npm run lzz",
"pretest": "rm -r ./temp/ || true && mkdir ./temp/",
"rebuild": "npm run lzz && node-gyp rebuild",
"rebuild-debug": "npm run lzz && node-gyp rebuild --debug",
"test": "$(npm bin)/mocha --bail --timeout 5000 --slow 5000"
},
"version": "4.1.4"
}
my machine
Linux Lite 4.0, Ubuntu Based.
NVM (Node version Manager)
Node 8.11.1
NPM 5.6
I had a problem that looks like your problem
just try that:
projectToto > $ sudo rm -rf node_modules/
projectToto > $ npm install bindings
npm about binding -> https://www.npmjs.com/package/bindings
I ran into a similar situation until I realized I hadn't explicitly installed build-tools on that machine. Here's what resolved it for me (Ubuntu) when run from inside the project directory
$ rm -rf node_modules/
$ rm package-lock.json
$ npm install build-tools -g
$ npm install
For me, the problem turned out to be a circular dependency in my project (angular 10.1.1, node 12.22.6).
Figuring that out was a little tricky. The Angular compiler gave multiple "WARNING in Circular dependency detected: ..." errors, but none of them included the files where the error was actually introduced. I had to walk the project back until a commit where the problem didn't occur, then investigate what changed. That change seemed pretty innocuous - one file exported a constant that was imported by another. Changing the direction of that export solved the problem.
If nothing works....
create a new folder :
install a fresh copy with npm, which will create node_module folder with all the required files.
copy node_module folder and replace with the existing project node_module folder.
close cmd
restart server.
And it worked for me....
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.