ERROR: cannot use import statement outside module - node.js

Have seen posts like this before but none of the fixes have worked for me. I am trying to use the firebase emulator and having issues building firebase functions. When building and running the app all works okay, just having issues with modules in my functions.
Here is the error output I'm getting:
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (C:\Users\abiga\Desktop\communityX\functions\index.js:3:15)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
! We were unable to load your functions code. (see above)
> (node:3540) Warning: require() of ES modules is not supported.
> require() of C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\src\index.js from C:\Users\abiga\Desktop\communityX\functions\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 C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\src\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\package.json.
I have tried the 3 suggestions given (using import, removing type module, and switching to .cjs) but similar errors continue in all cases. Other devs have same code and node version (12.15.0) so not sure why only I am getting errors. Any help is much appreciated!!
Here is my package.json file for functions:
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "index.js",
"dependencies": {
"firebase-admin": "^9.8.0",
"firebase-functions": "^3.14.1"
},
"devDependencies": {
"firebase-functions-test": "^0.2.0"
},
"private": true
}
And here is the package.json file for the module giving the issues (node-fetch).
"_from": "node-fetch#^3.0.0",
"_id": "node-fetch#3.0.0",
"_inBundle": false,
"_integrity": "sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==",
"_location": "/node-fetch",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "node-fetch#^3.0.0",
"name": "node-fetch",
"escapedName": "node-fetch",
"rawSpec": "^3.0.0",
"saveSpec": null,
"fetchSpec": "^3.0.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz",
"_shasum": "79da7146a520036f2c5f644e4a26095f17e411ea",
"_spec": "node-fetch#^3.0.0",
"_where": "C:\\Users\\abiga\\Desktop\\communityX",
"author": {
"name": "David Frank"
},
"bugs": {
"url": "https://github.com/node-fetch/node-fetch/issues"
},
"bundleDependencies": false,
"dependencies": {
"data-uri-to-buffer": "^3.0.1",
"fetch-blob": "^3.1.2"
},
"deprecated": false,
"description": "A light-weight module that brings Fetch API to node.js",
"devDependencies": {
"abort-controller": "^3.0.0",
"abortcontroller-polyfill": "^1.7.1",
"busboy": "^0.3.1",
"c8": "^7.7.2",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"chai-iterator": "^3.0.2",
"chai-string": "^1.5.0",
"coveralls": "^3.1.0",
"delay": "^5.0.0",
"form-data": "^4.0.0",
"formdata-node": "^3.5.4",
"mocha": "^8.3.2",
"p-timeout": "^5.0.0",
"tsd": "^0.14.0",
"xo": "^0.39.1"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"files": [
"src",
"#types/index.d.ts"
],
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/node-fetch"
},
"homepage": "https://github.com/node-fetch/node-fetch",
"keywords": [
"fetch",
"http",
"promise",
"request",
"curl",
"wget",
"xhr",
"whatwg"
],
"license": "MIT",
"main": "./src/index.js",
"name": "node-fetch",
"repository": {
"type": "git",
"url": "git+https://github.com/node-fetch/node-fetch.git"
},
"runkitExampleFilename": "example.js",
"scripts": {
"coverage": "c8 report --reporter=text-lcov | coveralls",
"lint": "xo",
"test": "mocha",
"test-types": "tsd"
},
"sideEffects": false,
"tsd": {
"cwd": "#types",
"compilerOptions": {
"esModuleInterop": true
}
},
"type": "module",
"types": "./#types/index.d.ts",
"version": "3.0.0",
"xo": {
"envs": [
"node",
"browser"
],
"ignores": [
"example.js"
],
"rules": {
"complexity": 0,
"import/extensions": 0,
"import/no-useless-path-segments": 0,
"import/no-anonymous-default-export": 0,
"import/no-named-as-default": 0,
"unicorn/import-index": 0,
"unicorn/no-array-reduce": 0,
"unicorn/prefer-node-protocol": 0,
"unicorn/numeric-separators-style": 0,
"unicorn/explicit-length-check": 0,
"capitalized-comments": 0,
"#typescript-eslint/member-ordering": 0
},
"overrides": [
{
"files": "test/**/*.js",
"envs": [
"node",
"mocha"
],
"rules": {
"max-nested-callbacks": 0,
"no-unused-expressions": 0,
"no-warning-comments": 0,
"new-cap": 0,
"guard-for-in": 0,
"unicorn/no-array-for-each": 0,
"unicorn/prevent-abbreviations": 0,
"promise/prefer-await-to-then": 0,
"ava/no-import-test-files": 0
}
}
]
}
}

Related

app threw an error during load after installing sqlite3 (electronjs)

after installing sqlite3 in electron app and writing code to create database, app returns error and doesn't start
error returned:
Error: Cannot find module 'C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\binding\napi-v3-win32-unknown-x64\node_sqlite3.node'
at Module._resolveFilename (internal/modules/cjs/loader.js:584:15)
at Function.Module._resolveFilename (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:43:12)
at Function.Module._load (internal/modules/cjs/loader.js:510:25)
at Module.require (internal/modules/cjs/loader.js:640:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\sqlite3-binding.js:4:17)
at Object.<anonymous> (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\sqlite3-binding.js:7:3)
at Module._compile (internal/modules/cjs/loader.js:693:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
see image below
code to create local DB
const createLocalDB = () => {
let db = new sqlite3.Database("../../data/cranesoft.sqlite3", (err) => {
if (err) {
console.log('Error when creating the database', err)
} else {
console.log('Database created!')
/* Put code to create table(s) here */
// createTable()
}
})
}
createLocalDB()
module.exports = createLocalDB
I have sqlite installed locally and it works without problem, all commands work as expected. I can create dbs from the shell and the rest
Below is an image of sqlite working from the shell
Several SO answers say to run "rebuild": "electron-rebuild -f -w sqlite3" after sqlite3 installation, doing this returns the following error
I have also tried "postinstall": "electron-builder install-app-deps" which didn't work
I have also tried the intructions on https://github.com/nodejs/node-gyp to build node-gyp,
I installed visual studio 2022 (desktop development with c++ selected), all relevant development SDKs and libraries were installed yet sqlite error persists
this is my package.json
"name": "appname",
"version": "1.0.0",
"description": "play",
"main": "main.js",
"scripts": {
"start": "electron .",
"postinstall": "electron-builder install-app-deps",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"repository": "",
"keywords": [
"palymaker"
],
"author": "Playmaker Systems",
"license": "CC0-1.0",
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^3.3.5",
"ejs": "^3.0.1",
"ejs-electron": "^2.1.1",
"electron-print-dialog": "0.1.0-alpha.1",
"electron-router": "^0.5.1",
"electron-squirrel-startup": "^1.0.0",
"express": "^4.17.1",
"jquery": "^3.3.1",
"mysql2": "^2.3.3",
"nodemon": "^2.0.2",
"sequelize": "^6.9.0",
"twbs-pagination": "^1.4.2"
},
"devDependencies": {
"browser-sync": "2.26.3",
"electron": "^4.2.12",
"electron-builder": "^22.14.13",
"electron-rebuild": "^3.2.7",
"gulp": "4.0.0",
"sqlite3": "^5.0.8"
},
"build": {
"appId": "com.palymaker.appname",
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"linux": {
"target": [
"AppImage",
"deb"
]
},
"win": {
"target": [
"nsis",
"msi"
],
"icon": "build/appname-icon.ico"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/appname-icon.ico",
"uninstallerIcon": "build/appname-icon.ico",
"deleteAppDataOnUninstall": true,
"runAfterFinish": true,
"createDesktopShortcut": "always",
"createStartMenuShortcut": true,
"shortcutName": "appnameDesktop",
"allowElevation": true
}
}
}
Operating system: Windows 10
node version: 14.17.5
All help is appreciated

App built using electron-builder in electron-forge + webpack application shows blank screen

I wanted to use electron-builder in my electron-forge (webpack-template and React) app, because of the more packaging options
electron-forge app was created with
create electron-app test --template=webpack
This is my package.json
"name": "vocascan",
"productName": "vocascan",
"version": "1.0.0",
"description": "My Electron application description",
"main": ".webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\"",
"build": "electron-forge start && electron-builder --linux"
},
"keywords": [],
"build": {
"productName": "Vocascan",
"files": [
],
"linux": {
"target": [
"AppImage"
],
"category": "Development"
}
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.jsx",
"name": "main_window"
}
]
}
}
]
]
},
"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",
"css-loader": "^4.2.1",
"electron": "10.1.5",
"node-loader": "^1.0.1",
"style-loader": "^1.2.1",
"electron-builder": "^22.9.1"
},
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"babel-loader": "^8.1.0",
"electron-squirrel-startup": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
As you can see I added
"build": "electron-forge start && electron-builder --linux"
and
"build": {
"productName": "Vocascan",
"files": [
],
"linux": {
"target": [
"AppImage"
],
"category": "Development"
}
},
in order to make electron-builder available
the build runs just fine, but when I start the app none of my components gets shown
If someone needs the browser window code
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
and this is my folder structure
This template is NOT working with electron-builder.
Because this template was designed to work with the electron-forge make command. electron-builder can't work with it because it's using webpack dev server and not building a static build.
The template I linked is working with electron-builder because it's making a static build of react, the react components and the node modules you using and electron-builder can work with it.
I recommend this template: https://github.com/Levminer/create-electron-react-app

Not able to browse loopback api after deploying to now.sh

I have created a loopback API and deployed it on now.sh.
After deploying I'm able to browse the directory but not able to call API URLs. My project structure is as follow:
Package.json file:
{
"name": "****",
"version": "1.0.0",
"main": "server/server.js",
"engines": {
"node": ">=6"
},
"now":{
"name":"****",
"alias":["****"],
"env":{
"MONGODB_URL":"#lbmongonew",
"NODE_ENV":"production"
}
},
"scripts": {
"lint": "eslint .",
"now:deploy":"now",
"now:alias":"now alias",
"now":"npm run now:deploy && npm run now:alias",
"posttest": "npm run lint && nsp check",
"start": "node ."
},
"dependencies": {
"compression": "^1.0.3",
"cors": "^2.5.2",
"helmet": "^3.10.0",
"loopback": "^3.22.0",
"loopback-boot": "^2.6.5",
"loopback-component-explorer": "^6.2.0",
"loopback-connector-mongodb": "^4.0.0",
"now": "^13.1.2",
"serve-favicon": "^2.0.1",
"strong-error-handler": "^3.0.0",
"todo": "^1.1.0"
},
"devDependencies": {
"eslint": "^3.17.1",
"eslint-config-loopback": "^8.0.0"
},
"repository": {
"type": "",
"url": ""
},
"license": "UNLICENSED",
"description": "****"}
My config.production.json file is as follow:
{
"restApiRoot": "/api",
"host": "0.0.0.0",
"port": 3000,
"remoting": {
"context": false,
"rest": {
"handleErrors": false,
"normalizeHttpPath": false,
"xml": false
},
"json": {
"strict": false,
"limit": "100kb"
},
"urlencoded": {
"extended": true,
"limit": "100kb"
},
"cors": false
}}
Note: I have not changed host and port because the host is a dynamic host for deployment that keeps on changing on every deployment on now.sh
here it is the directory which I'm able to browse after deployment
When I browse "https://URL/explorer" than Page not found error is occuring.
What I'm missing here while browsing APIs?
Are you using a now v2? If so, you need to use a Node Builder in your now.json or package.json before deploying.
https://zeit.co/docs/v2/deployments/official-builders/node-js-now-node/

npm run dev won't start server

I'm trying to do a "npm run dev", but it's not starting a server. I thought that it was supposed to and open up http://127.0.0.1:8000. How do I get it to do that? "npm start" works and goes to my localhost. I looked for an answer, but couldn't find anything. If anyone can help me out or give me a link to an answer, I'd appreciate it. I'm new here. Thanks. If it helps:
npm -v
6.4.1
node -v
v10.13.0
webpack -v
4.20.2
package.json:
{
"name": "cocos-skeleton",
"description": "",
"version": "1.0.0",
"main": "main.js",
"author": "",
"license": "UNLICENSED",
"private": true,
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"lint": "cross-env eslint src",
"test": "cross-env jest --passWithNoTests",
"test:watch": "cross-env jest --passWithNoTests --watch --notify",
"test:coverage": "cross-env jest --coverage",
"config": "cross-env webpack --config tools/webpack/webpack.config.js",
"bundle": "cross-env npm run config -- --mode production",
"bundle:watch": "cross-env npm run config -- --mode development --watch --progress --display-error-details",
"compile": "cross-env cocos compile",
"start": "cross-env cocos run",
"dev": "cross-env npm run bundle:watch & npm run start",
"refresh": "cross-env npm run compile && npm run start",
"release": "cross-env cocos run -m release"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"linters": {
"*.js": [
"eslint --fix",
"jest --bail --findRelatedTests",
"git add"
]
},
"ignore": [
"**/frameworks/**/*.js"
]
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"howler": "^2.0.15",
"lodash": "^4.17.11",
"prando": "^3.0.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.0.0",
"babel-plugin-lodash": "^3.3.4",
"cross-env": "^5.2.0",
"eslint": "^5.6.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"husky": "^1.1.0",
"jest": "^23.6.0",
"lint-staged": "^7.3.0",
"lodash-webpack-plugin": "^0.11.5",
"prettier-eslint": "^8.8.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb-base",
"globals": {
"cc": true,
"ccui": true
},
"env": {
"browser": true,
"jest": true
},
"rules": {
"func-names": [
"error",
"as-needed"
],
"no-console": [
"error",
{
"allow": [
"warn",
"error",
"assert"
]
}
],
"complexity": [
"error",
5
],
"max-params": [
"error",
5
],
"max-depth": [
"error",
4
],
"max-statements": [
"error",
20
],
"max-lines-per-function": [
"error",
50
],
"max-classes-per-file": [
"error",
1
],
"max-nested-callbacks": [
"error",
3
],
"max-statements-per-line": [
"error",
{
"max": 1
}
]
}
},
"jest": {
"bail": true,
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"collectCoverageFrom": [
"src/**/*.js"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|cur)$": "<rootDir>/src/lib/mocks/FileMock.js"
}
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"ie": "11"
}
}
]
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"prettier": {
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}
}
webpack.config.js:
const { join } = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const { dependencies } = require('../../package.json');
const sourcePath = join(`${__dirname}/../../src`);
module.exports = {
entry: { main: './src/index.js', vendor: Object.keys(dependencies) },
optimization: { splitChunks: { name: 'vendor', minChunks: 2 } },
module: {
rules: [
{
test: /\.js$/,
include: sourcePath,
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'usage',
targets: {
ie: 11,
},
},
],
],
plugins: ['#babel/plugin-proposal-class-properties', 'lodash'],
},
},
],
},
plugins: [new LodashModuleReplacementPlugin()],
};
I think this one might help you
Difference between npm run dev and npm run production
If you try to build front-end in the server. You could try npm run build or npm run production. Try it

Error importing a user js file using electron-builder

I have an electron application with main process as follows:
const {app, BrowserWindow, Menu, dialog} = require('electron');
const path = require('path')
let logConfig = require('./js/loggConfig.js');
....
This executes perfectly when run directly from terminal.
But when I package this project using electron-builder, and install it on another machine (Windows 10), I get the following error while launching the app:
Error: Cannot find module '.js/loggConfig.js'
How do I resolve this?
Here is how my package.json looks like:
{
"name": "ABCD",
"version": "0.0.1",
"description": "...",
"author": "abcd <abcd#gmail.com>",
"homepage": "http://www.abcd.com",
"main": "main_electron.js",
"scripts": {
"postinstall": "install-app-deps",
"start": "electron .",
"dist": "build"
},
"build": {
"appId": "yourappid",
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"linux": {
"target": [
"AppImage",
"deb"
],
"category": "Video"
},
"win": {
"target": "NSIS",
"icon": "build/icon.ico",
"extraResources": [
]
}
},
"dependencies": {
"electron-context-menu": "^0.9.1",
"electron-log": "^2.2.13",
"fs": "0.0.1-security",
"mkdirp": "^0.5.1",
"path": "^0.12.7",
"uuid": "^3.1.0",
"xmlbuilder": "^9.0.4",
"zip-folder": "^1.0.0"
},
"devDependencies": {
"electron": "^1.7.9",
"electron-builder": "^19.49.0"
}
}
I solved the issue changing the build configuration.
Setting asar to false.
Setting asarUnpack to export all the asar content with "**/*".
"build": {
"appId": "app.node.electron",
"productName": "app electron",
"asar":false,
"asarUnpack":[
"**/*"
],
"directories": {
"output": "release"
},
"win": {
"publisherName": "app electron",
"icon": "icon.png",
"target": [
"nsis"
]
},
},

Resources