sveltekit or esbuild error: Two output files share the same path but have different contents - sveltekit

Just now, for no reason I can figure out, when I run npm run dev on my sveltekit project, I get this error:
✘ [ERROR] Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js.map
✘ [ERROR] Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js
> Build failed with 2 errors:
error: Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js.map
error: Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js
error: Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js.map
error: Two output files share the same path but have different contents: node_modules/.vite/lodash_clonedeep.js
at failureErrorWithLog (/repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:1605:15)
at /repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:1251:28
at runOnEndCallbacks (/repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:1036:63)
at buildResponseToResult (/repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:1249:7)
at /repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:1358:14
at /repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:668:9
at handleIncomingPacket (/repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:765:9)
at Socket.readFromStdout (/repos/personal/docsndata-monorepo/common/temp/node_modules/.pnpm/esbuild#0.14.25/node_modules/esbuild/lib/main.js:635:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12)
I have done this hundreds of times and it worked.
In case it matters, my repo is a rushjs monorepo, and I continually do update my dependencies using it, so maybe some version has bumped some place in my dependency tree, but I don't know how to debug it.
What causes this error?

Ok, the issue is that one of the modules in my app imported lodash cloneDeep like this
import cloneDeep from lodash/cloneDeep
i.e from the full lodash npm module.
Another of my modules imported it using the more targeted npm module using
import cloneDeep from "lodash.clonedeep"
A very confusing error message, but I suppose it makes some sense.
The fix was to import cloneDeep consistently, I chose the latter approach.

Related

Next.js: ./node_modules/next/dist/client/dev/amp-dev.js

I have a very serious issue right now trying to use Next js. No matter what version I use, any time I try to run the npm run dev, I get the following error:
error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'C:\Usersudbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\client\dev'
error - Error: Cannot find module 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\.next\fallback-build-manifest.json'Require stack:
This is literally right after running the create next app command, so I don't install any additional package. One thing realized though is that this error doesn't occur when I use the public folder on my window PC but when I use the user folder called udbasili I get the above error. I have been using next.js for a long time and this is the first I am seeing this error
I had the same issue
the problem was that my project files was in a folder beginning with "ud". My folder name was "udemy".
Renaming that folder or moving the project outside that folder solved the issue
If you compare the paths, there is a missing '\' :
C:\Users**\\**udbasili\Documents\Programming\Acumen Developers\...
C:\Usersudbasili\Documents\Programming\Acumen Developers\...
A quick solution that I gave to this issue was to create the project on a different path. For example:
C:\dev\myportfolio
Please head over to https://nextjs.org/docs/messages/swc-disabled
By disabling swc in next.config.js it will resolve your issue.
You can disable swc by adding:
experimental: {
forceSwcTransforms: true,
}
It's possible your autoimport included '/dist/client/dev' in the 'next/amp' path.
Does it work if you import { useAmp } from 'next/amp'?

CLI upload main.js file size limited when building with react and threejs

Is there a way around the file size limitation when building with react and threejs? I am building a react module with three js using the cms-react-boilerplate. The project builds fine, but it can't upload the main.js file as it is 2.1MiB. It gives me the following error:
[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB
I tried to upload the file directly to the design manager but was given the same error.
I also tried to create a main.js file and paste the code into it, but was given the following error:
Error:Coded file buffer must be smaller than 2.0 MiB
I'd recommend enabling code splitting. If not, you're going to need to use a different host for the JavaScript files. Additionally – make sure you're correctly including only what you need.
Avoid:
import * as x from 'lib';
and instead do:
import { each, func, you, need } from 'lib';
This will allow bundlers such as Webpack to properly Tree Shake your dependencies.
Try compressing your files into .min.js files with this if you are done editing them.

Why can't the Web Browser find these modules, resolve, and compile the page?

In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.

Module not found. Can't resolve 'assets/styles/constants'

I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any

failed to compile React projects

I am busy with a project of React and
When I want run a browser I get this error.
./src/Components/ui/icons.js
Module not found: Can't resolve './src/Resources/images/logos/manchester_city_logo' in 'C:\Users\Daniel\Desktop\mancity\src\Components\ui'
This error occurred during the build time and cannot be dismissed.
I made sure of correct names of folders. Is it a npm webpack?
You are most probably referring to a non-existed media file or using wrong file extension when importing manchester_city_logo (probably in icons.js)
Doublecheck the source path for desired media file in icons.js

Resources