Problem with importing in node.js backend [closed] - redux

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm learning a new language (Redux) but I have this problem
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
Here I added the contents of package.json
...
import express from 'express';
^^^^^^
SyntaxError: Cannot use import statement outside a module
As he asked me I added "type": "module", and I have this problem:
(node:6392) ExperimentalWarning: The ESM module loader is experimental.
internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module
...\sa\backend\data' imported from
...\sa\backend\server.js
at finalizeResolution (internal/modules/esm/resolve.js:259:11)
at moduleResolve (internal/modules/esm/resolve.js:636:10)
at Loader.defaultResolve [as _resolve]
(internal/modules/esm/resolve.js:726:11)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
at link (internal/modules/esm/module_job.js:46:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
It will be useful to specify that in the frontend React import works normally.
package.json
{
"name": "tryredux",
"version": "1.0.0",
"type": "module",
"description": "\"# tryredux\"",
"main": "index.js",
"dependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.11.0",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"express": "^4.17.1",
"nodemon": "^2.0.4",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/node": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react-hooks": "^2.5.1",
"nodemon": "^2.0.2"
},
"scripts": {
"start": "nodemon --watch backend --exec babelnode backend/server.js"
},
"author": "",
"license": "ISC"
}

The answer here explains it quite concise:
https://stackoverflow.com/a/45854500/2361500
In node the default is the commonjs syntax for module handling. You might consider switching to require()

Append .js to the end of data - it should be data.js.

Related

Vercel, Next.js, Sanity.io production deployment fails

I have a Next.js + Sanity.io project and when I deploy from local build using vercel CLI with
vercel build and then vercel deploy --prebuilt, it works great.
However, when I do vercel --prod to create production deployment, it keeps failing.
The log goes:
[16:48:49.455] Previous build cache not available
[16:48:49.684] Downloading 69 deployment files...
[16:48:50.586] Running "vercel build"
[16:48:51.246] Vercel CLI 28.10.0
[16:48:51.661] Installing dependencies...
[16:48:52.107] yarn install v1.22.17
[16:48:52.183] [1/4] Resolving packages...
[16:48:52.393] [2/4] Fetching packages...
[16:49:16.863] [3/4] Linking dependencies...
[16:49:31.972] [4/4] Building fresh packages...
[16:49:32.468] Done in 40.37s.
[16:49:32.503] Detected Next.js version: 13.1.1-canary.1
[16:49:32.505] Running "yarn run build"
[16:49:32.842] yarn run v1.22.17
[16:49:32.888] $ next build
[16:49:33.425] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[16:49:33.425] This information is used to shape Next.js' roadmap and prioritize features.
[16:49:33.425] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[16:49:33.425] https://nextjs.org/telemetry
[16:49:33.426]
[16:49:33.588] info - Linting and checking validity of types...
[16:49:38.211] Failed to compile.
[16:49:38.212]
[16:49:38.212] ./sanity/sanity.cli.ts:1:31
[16:49:38.212] Type error: Cannot find module 'sanity/cli' or its corresponding type declarations.
[16:49:38.212]
[16:49:38.213] [0m[31m[1m>[22m[39m[90m 1 | [39m[36mimport[39m {defineCliConfig} [36mfrom[39m [32m'sanity/cli'[39m[0m
[16:49:38.213] [0m [90m | [39m [31m[1m^[22m[39m[0m
[16:49:38.213] [0m [90m 2 | [39m[0m
[16:49:38.213] [0m [90m 3 | [39m[36mexport[39m [36mdefault[39m defineCliConfig({[0m
[16:49:38.213] [0m [90m 4 | [39m api[33m:[39m {[0m
[16:49:38.253] error Command failed with exit code 1.
[16:49:38.254] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[16:49:38.283] Error: Command "yarn run build" exited with 1
my package.json:
{
"name": "portfolio-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#portabletext/react": "^2.0.0",
"#sanity/image-url": "^1.0.1",
"#types/node": "18.11.12",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.9",
"#vercel/analytics": "^0.1.6",
"eslint": "8.29.0",
"eslint-config-next": "13.0.6",
"framer-motion": "^7.6.19",
"next": "13.0.6",
"next-sanity": "^3.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-simple-typewriter": "^5.0.1",
"react-social-icons": "^5.15.0",
"typescript": "4.9.4"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"tailwind-scrollbar": "^2.0.1",
"tailwindcss": "^3.2.4"
}
}
sanity package.json in the sanity folder:
{
"name": "portfolio-project",
"private": true,
"version": "1.0.0",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
},
"keywords": [
"sanity"
],
"dependencies": {
"#sanity/vision": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/eslint-config-studio": "^2.0.1",
"eslint": "^8.6.0",
"prettier": "^2.8.1",
"typescript": "^4.0.0"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}
Anyone having the same problem?
It keeps saying it cannot find module 'sanity/cli' or its corresponding type declarations.
I've tried upgrading Next.js version to the latest (next#canary) as somebody suggested, installing #sanity/cli to the local and etc, but found no luck.
If anyone has a clue, please help!!!
What solved my case was to add this to next.config.js
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true
},
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true
}
Be mindful that this does not break anything in your code. I think it maybe is because of having a NextJS project with typescript and the Sanity project aswell. Or maybe because it is not installing still the dependencies of Sanity package.json when doing a next build.
Having almost similar problem, except that for me, it does not even work for vercel build
I posted the same question didn't find an answer yet. Even editing Next.config.js not works for me
Problem Deploying a Next JS + Sanity Project to Vercel

HookWebpackError: EMFILE: too many open files, When execute npm run export

According to this link
I have configured my package.json project file using these code snipped:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "npm run build && next export -o _static",
"lint": "next lint"
},
But when I run the command: npm run export in the terminal, It causes errors:
Failed to compile.
HookWebpackError: EMFILE: too many open files, open 'E:\Projects\React\dastshafa-final\node_modules\#mui\icons-material\SixKOutlined.js'
at makeWebpackError (E:\Projects\React\dastshafa-final\node_modules\next\dist\compiled\webpack\bundle5.js:41664:9)
at E:\Projects\React\dastshafa-final\node_modules\next\dist\compiled\webpack\bundle5.js:25354:12
at eval (eval at create (E:\Projects\React\dastshafa-final\node_modules\next\dist\compiled\webpack\bundle5.js:140346:10), <anonymous>:27:1)
at E:\Projects\React\dastshafa-final\node_modules\next\dist\compiled\webpack\bundle5.js:22805:26
at E:\Projects\React\dastshafa-final\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:327:36
-- inner error --
Error: EMFILE: too many open files, open 'E:\Projects\React\dastshafa-final\node_modules\#mui\icons-material\SixKOutlined.js'
caused by plugins in Compilation.hooks.processAssets
Error: EMFILE: too many open files, open 'E:\Projects\React\dastshafa-final\node_modules\#mui\icons-material\SixKOutlined.js'
> Build failed because of webpack errors
I can not find a good solution for it please help. tnx
OS:Windows 8.1
Node.js:18
Edit
package.json:
{
"name": "dastshafa-final",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "npm run build && next export -o _static",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/icons": "^4.11.3",
"#mui/icons-material": "^5.6.2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.21",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "^7.2.6",
"react-simple-star-rating": "^4.0.5",
"react-toastify": "^8.2.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"eslint": "8.11.0",
"eslint-config-next": "12.1.0"
}
}
I was getting the same error while building NextJS project (12.0.10), I've fixed these by importing mui icons directly without destructing,
Getting Error while build
import { ShoppingCart } from "#mui/icons-material";
Able to build
import ShoppingCartIcon from "#mui/icons-material/ShoppingCart";
Finally, I got an answer.
It is nothing but a memory leak, Every time Ram is occupied with programs, we encounter this error. The solution is to close additional programs or upgrade the system RAM.
tnx and congratulations
I also got this error while running npm run build on a next.js project styled with Material UI
The issue was that by importing MUI components like this:
import {Paper} from "#mui/materials"
import {Cancel} from "#mui/icons-materials"
I am not just importing the <Paper /> and <Cancle /> mui components, but the entire #mui libraries. Hence, HookWebpackError: EMFILE: too many open files, increasing the bundle size
See https://mui.com/material-ui/guides/minimizing-bundle-size/ for more info.
I also did not like the look of this:
import * as React from react
So this is what is changed things to to work:
import React from "react"
import Paper from "#mui/materials/Paper"
import Cancel from "#mui/icons-materials/Cancel"

Deploy Storybook on Netlify with Nextjs

I am trying to deploy my Storybook on Netlify, I'm using Next.js framework but it fails every time and I don't know what is wrong
Netlify configuration :
Build command: npm run build-storybook
Publish directory: storybook-static
My package.json:
{
"homepage": "https://github.com/alexCoding42/tailwind-storybook",
"name": "tailwind-storybook",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"next": "10.0.9",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#netlify/plugin-nextjs": "^3.0.3",
"#storybook/addon-actions": "^6.2.0-alpha.22",
"#storybook/addon-essentials": "^6.2.0-alpha.22",
"#storybook/addon-links": "^6.2.0-alpha.22",
"#storybook/react": "^6.2.0-alpha.22",
"#types/node": "^14.14.35",
"#types/react": "^17.0.3",
"babel-loader": "^8.2.2",
"gh-pages": "^3.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.1",
"tailwindcss": "^2.0.4",
"typescript": "^4.2.3"
}
}
The error I get on Netlify:
Plugin "#netlify/plugin-nextjs" internal error
Error: No static assets found in .next dist (aka no /.next/static). Please check your project configuration. Your next.config.js must be one of serverless or experimental-serverless-trace. Your build command should include next build.
I have also tried to add a netlify.toml at the root of my project with this config:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
[[plugins]]
package = "#netlify/plugin-nextjs"
And added #netlify/plugin-nextjsas dev dependency of package.json but I get the same error...
Can someone help me on this please ?
I had a similar problem but not with the storybook but with nx + nextjs.
If I tried to deploy the app to the netlify I got the same error.
So I changed next.config.js in the root directory and add to distDir path to generated .static folder and it's working now.
and this is my netlify.toml ss
The Netlify Next.js plugin isn't required for a Storybook build. In fact, no plugins are required; the only configuration needed is, as OP says:
Build command: npm run build-storybook
Publish directory: storybook-static
Or, in netlify.toml:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
No [[plugins]] fields are needed.
If Netlify is configured through the UI, go to https://app.netlify.com/sites/my-awesome-site/plugins and remove the Next.JS plugin.

(TS) In 'const' enum declartions member initializer must be constant expression

I've got problem with building application at Visual Studio 2017. I'm using ASP.NET CORE 2 and Angular 6. After running application i'm getting errors at file output_ast.d.ts from node_modules:
(TS) In 'const' enum declartions member initializer must be constant
expression.
and
Build:In 'const' enum declarations member initializer must be constant expression.
Code with error:
export declare const enum JSDocTagName {
Desc = "desc",
Id = "id",
Meaning = "meaning",
}
My package.json
"name": "client-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/compiler-cli": "^6.0.0",
"#angular-devkit/build-angular": "~0.6.1",
"typescript": "~2.7.2",
"#angular/cli": "~6.0.1",
"#angular/language-service": "^6.0.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
Application is made similar to this article https://www.codeproject.com/Articles/1245243/How-to-Create-an-App-with-Angular-and-ASP-NET-C
but angular app is in separated folder called ClientApp.
I've tryed different versions of ts and angular cli and nothing helps. What can I do with that error ?
In Visual Studio, check the settings in your project Properties->TypeScript Build section and make sure TypeScript Version is set to "Use latest available" or at least something fairly recent. I suspect it's currently set to something prior to when TypeScript supported string enums.
I experienced the exact same behavior and in appeared to be a TS version incompatibility issues. Instead of changing TypeScript version to "Use latest available" as suggested above, I was able to resolve by changing TypeScript version to 2.2.
To have a string enum, you only have to do the following
export enum JSDocTagName {
Desc = "desc",
Id = "id",
Meaning = "meaning",
}
as per documentation
tldr; Upgrade the TypeScript compiler that Visual Studio is using.
Visual Studio 2017 is probably attempting to build the project using an older version of TypeScript than 2.4, when string initializers for enums was introduced: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html.
There are 3 different TypeScript compilers to be aware of here:
Angular CLI: uses local project node_modules/typescript folder
NPM: uses globally installed TS compiler (%AppData%/npm/Roaming on Windows)
Visual Studio: uses TS compiler in C:\Program Files (x86)\Microsoft SDKs\TypeScript
To upgrade the TypeScript compiler that VS is using, go to the https://marketplace.visualstudio.com and search for the latest TypeScript extension. Install it, restart Visual Studio, then in the Project settings make sure the TypeScript build version is set to that new version. Now if you rebuild, the error should disappear.
Answer suggested by #ben-barreth seems to be the case for me too. VS Code's tsc seems to be version < 2. But instead of upgrading vscode plugin, a more convenient way is to use the npm package with explicit path to tsc ./node_modules/.bin/tsc.
$ ./node_modules/.bin/tsc --version
Version 4.3.2
$ tsc --version
message TS6029: Version 1.5.3

npm install not installing any packages

Im trying to test an old project, and when i run npm install, all i get is:
npm WARN package.json xx# No repository field.
npm WARN package.json xx# No license field.
My package.json file looks like this:
{
"name": "xx",
"version": "",
"dependencies": {},
"devDependencies": {
"connect-livereload": "~0.3.2",
"grunt": "~0.4.1",
"grunt-bg-shell": "~2.3.1",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-newer": "^0.8.0",
"grunt-ngrok": "^0.2.2",
"load-grunt-tasks": "~0.2.1",
"time-grunt": "~0.2.7"
},
"engines": {
"node": ">=0.8.0"
}
}
I havent run this kind of install in a while and im afraid im forgetting something, any ideas as to what ?
EDIT: it turns out the folder copy i had of the project had already a node_modules folder with everything installed, reason why running npm install wasnt doing anything. Although i thought there would be some kind of warning or message saying all modules are installed already.
Getting the warning is not a concern. If you can see a structure of npm packages being installed after the warning, then it works fine. In case you want to avoid these warning, you can add respository and license fields to your package.json.
"repository": {
"type": "git",
"url": "git://github.com/user/repo.git"
},
"license": "ISC"
You are missing a bracket from the end
{
"name": "xx",
"version": "",
"dependencies": {},
"devDependencies": {
"connect-livereload": "~0.3.2",
"grunt": "~0.4.1",
"grunt-bg-shell": "~2.3.1",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-newer": "^0.8.0",
"grunt-ngrok": "^0.2.2",
"load-grunt-tasks": "~0.2.1",
"time-grunt": "~0.2.7"
},
"engines": {
"node": ">=0.8.0"
}
}
I sugges you to use npm init then install the packages by the cli-tool
for eg:
save to devDepencies
npm install connect-livereload grunt grunt-bg-shell ... --save-dev
save to depencies
npm install express ... --save
read more at: https://docs.npmjs.com/cli/install
It turns out the folder copy i had of the project had already a node_modules folder with everything installed, reason why running npm install wasnt doing anything. Although i thought there would be some kind of warning or message saying all modules are installed already.

Resources