Can't use local file images in Next 12 - node.js

Created a new project in Next js with Next version 12.
Whenever I try to import and use an image file in the /public directory I get a build failure.
../public/images/header-logo.jpg
TypeError: fetch failed
at Object.processResponse (node:internal/deps/undici/undici:5575:34)
at node:internal/deps/undici/undici:5901:42
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
The image is in the public directory, I have no next.config.js file.
This error is only thrown during a build. If I import the image file no error is thrown.
If I use it as the src property in a next/image component, then the build error is thrown.

After losing 4 hours of my life, it turns out the issue was the experimental version of Node I installed.
Downgrading to version 16 fixed this issue.

Images should not be requested nor imported. To use images you should just use the path /images/header-logo.jpg
or
<Image src="/images/header-logo.jpg" width=xxx height=xxx />

Related

require errors show private instead of actual file path

Today I got surprised by the following (you can try at node repl):
require("/tmp/bad.json")
SyntaxError: /private/tmp/bad.json: Unexpected token n in JSON at position 3
As you can see, I required (intentionally) a JSON file that contains a syntax error. However, on the error message, instead of the actual file path, which starts at '/tmp/' you can see that it has been replaced by the string /private/.
Why is this?
I'm using node v8.15.0
This has nothing to do with Node or the node version but with the operating system. In this case, I was using OSX, where /tmp is just a symbolic link to /private/tmp. Then when the error was triggered the actual path is showing.

azure-devops-node-api - getPersonalAccessTokenHandler(tokenHandler) not working

having node v8.15 and Typescript of 3.4.3. Installed the latest version on azure-devops-node-api . imported the module to ts file .
let authHandler = azdev.getPersonalAccessTokenHandler(token);
giving me error as
[SPLoaderError.loadComponentError]:
***Failed to load component "50c18491-a471-4da6-8936-11a40cef9265" (HelloWorldWebPart).
Original error: ***Failed to load entry point from component "50c18491-a471-4da6-8936-11a40cef9265" (HelloWorldWebPart).
Original error: Error loading https://component-id.invalid/50c18491-a471-4da6-8936-11a40cef9265_0.0.1
Cannot find module "net"
***INNERERROR:
***Failed to load entry point from component "50c18491-a471-4da6-8936-11a40cef9265" (HelloWorldWebPart).
Original error: Error loading https://component-id.invalid/50c18491-a471-4da6-8936-11a40cef9265_0.0.1
Cannot find module "net"
***CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:8390:24)
at new SPLoaderError (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:4036:28)
at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:3789:21)
at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:3697:21)
at https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:6275:47
The above issue may raise due to the incorrect reference in the code.
Other contributors provided a workaround to resolve this issue.
In his case,he tried to call the webpartcontext code and use the below references in the code.
1 import IWebPartContext from '#microsoft/sp-webpart-base/lib/core/IWebPartContext';
2 import SPHttpClient from '#microsoft/sp-http/lib/spHttpClient/SPHttpClient';
He added the below references by replacing the above code to resolve the issue.
1 import { IWebPartContext } from '#microsoft/sp-webpart-base';
2 import { SPHttpClient } from '#microsoft/sp-http';
You can also try this way to see if it could resolve your issue. For details,please refer to this link.
Hope this helps.

Error: EMFILE: too many open files on win

I was building an Vscode-like App, and I wrote my own extension to Vscode and put it into source code, it's work fine. But after I use gulp command to package my app, here is sth wrong :(On mac OS it's worked)
[17:07:59] Finished 'optimize-vscode' after 23 s
[17:07:59] Starting 'vscode-win32-x64'...
[17:08:31] Downloading extension: ms-vscode.node-debug2#1.25.6 ...
[17:08:32] Downloading extension: ms-vscode.node-debug#1.25.4 ...
events.js:183
throw er; // Unhandled 'error' event
^
Error: EMFILE: too many open files, open 'C:\Gitlab-Runner\builds\251c7da1\0\Haochen_super\IDE\extensions\hap-transformer\node_modules\qa-transformer\build\core\transformers\style\rules\declaration\dimension.js'
Can some one help me out on windows with this problem????
Not sure is this is the same problem or not, if it's - up vote my answer, if not - just continue to search.
When debugging with visual studio or visual code - visual studio keep logs of debugging session in file %TEMP%\vscode-node-debug2.txt.
It's indeed long log text, which is difficult to read and moreover understand what went wrong. But in my case I've found following log entry (somewhere close to the end of log):
↠From target: {"method":"Runtime.consoleAPICalled","params":{"type":"error","args":[{"type":"string","value":"WebpackO
ptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does
not match the API schema.\n - configuration.context: The provided value \"D:\\\\!deleteme!\\\\VuejsApp1\\\\VuejsApp1\" co
ntains exclamation mark (!) which is not allowed because it's reserved for loader syntax.\n -\u003E The base directory
There were also a lot of EMFILE log entries, but they were not a root cause of failure.
Root cause in my case was that I have used special character in path - D:\!deleteme!\VueJsApp - and I have fixed it by simply creating directory without exclamation mark.
I was still not being able to debug VueJsApp - I suspect due to .vue to .js conversions, but normal javascript was possible to debug still.

TypeScript "Could not find a declaration file" error on some Node.js versions

I'm trying to set the "noImplicitAny": true option for an existing TypeScript project. After making all the necessary code changes I'm getting the following error for one of our dependencies on Node 6 and 7:
Could not find a declaration file for module '#firebase/database'. '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.node.cjs.js' implicitly has an 'any' type.
This works fine on Node 8 (both locally and on Travis CI).
Does anybody know why this is? I can kind of understand the error, but no clue why it happens only on certain versions of Node.
Edit
Added the traceResolution option, and I do see a difference in how the dependency gets resolved between Node 7 and 8.
On Node 8:
'package.json' has 'typings' field 'dist/index.d.ts' that references '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts'.
File '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts' exist - use it as a name resolution result.
Resolving real path for '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts', result '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts'.
======== Module name '#firebase/database' was successfully resolved to '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts'. ========
On Node 7:
'package.json' has 'typings' field 'dist/index.d.ts' that references '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts'.
File '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts' does not exist.
Loading module as file / folder, candidate module location '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts', target file type 'TypeScript'.
File '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.d.ts.ts' does not exist.
...
File '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.node.cjs.js' exist - use it as a name resolution result.
Resolving real path for '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.node.cjs.js', result '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.node.cjs.js'.
======== Module name '#firebase/database' was successfully resolved to '/home/travis/build/firebase/firebase-admin-node/node_modules/#firebase/database/dist/index.node.cjs.js'. ========

Veracode through an error - ASPCONFIG: Could not autodiscover 'components.config'

I have a Veracode plugin in my VS 2013 Professional.
I have ucommerce.dll, Sitecore.Kernel and Sitecore.Analytics.dll
I set copy local true for all above dll files.
When i tried to pre-compile all the web project I'm getting a below error message
1>------ Pre-compile started: Project: XXXXX.Web.PQRPorta\ ------
1>Pre-compiling with command similar to the following:
C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_compiler.exe -p
"C:/XXXXX.Web.PQRPortal" -v "XXXXX.Web.PQRPortal/" -fixednames -f -c
-d "C:/SVN/trunk/Releases/SourceCode/Source/PrecompiledWeb/XXXXX.Web.PQRPortal"
1>error ASPCONFIG: Could not autodiscover 'components.config'. Make
sure it's present in the application folder
'C:\SVN\trunk\Releases\SourceCode\Source\XXXXX.Web.PQRPortal\' or in a
sub folder. Paths ignored
''C:\SVN\trunk\Releases\SourceCode\Source\XXXXX.Web.PQRPortal\bin',
'C:\SVN\trunk\Releases\SourceCode\Source\XXXXX.Web.PQRPortal\App_Data',
'C:\SVN\trunk\Releases\SourceCode\Source\XXXXX.Web.PQRPortal\obj''
1>XXXXX.Web.PQRPortal\ - 1 error, 0 warnings
Is there any configuration missing?
Update
I found the components.config file inside
C:\inetpub\wwwroot\XXXX\Website\sitecore modules\Shell\uCommerce\Configuration
and I added the file inside the web project root directory and tried to precompile web project, now I’m getting different error error
ASPRUNTIME: Type is not resolved for member 'Castle.Windsor.Configuration.Interpreters.ConfigurationProcessingException,Cast‌​le.Windsor, Version=3.2.0.0, Culture=neutral, PublicKeyToken=407dd0808d44fbdc'.
any solution for it?
The components.config is a file uCommerce need.
The configuration file should be placed somewhere below the uCommerce folder. (not sure where depend on the version) It will automatically be picked up when the application starts up.

Resources