How to fix "failed to load module for ssr: ../environment.js" after SvelteKit migration - sveltekit

The Problem
While migrating my SvelteKit project to the latest version, I'm encountering the following error
Error: failed to load module for ssr: ../environment.js
at instantiateModule (file:///Users/userName/projectFolder/projectName/node_modules/vite/dist/node/chunks/dep-557f29e6.js:53336:15)
What I Did
I followed the migration instructions located here.
I ran npx svelte-migrate routes inside my terminal to start the migration
I replaced $app/env with $app/environment throughout my project
I installed the latest version of vite
Made sure I had the latest version of SvelteKit installed.
Similar StackOverflow question for reference
Problems with SSR and Firebase in the latest SvelteKit release
Though the location of this person's problem is different, at the core, they are very similar. Any insight into what I can do to resolve this issue would be greatly appreciated.

Related

Sveltekit adapter-static fails: Cannot read property 'kit' of undefined

I'm trying to build a Sveltekit site using the adapter-static.
npm run preview works fine and npm run build seems to build fine before giving me a cryptic error:
Cannot read property 'kit' of undefined.
Can you point me towards a way to debug this - I cannot find where exactly the issue is.
Svelte is still under active development. Most likely you're trying to use the latest documentation while having the older Svelte dependencies installed locally.
Upgrading your Svelte dependencies should solve the problem.
Try to create a new project with a fresh install of SvelteKit and adapter-static and then copy your code from the old project. That worked for me. Seems like the two were out of sync.

Cannot find module '#next/env' Next-js Vercel

I have developed a Next.js app that works fine on my local machine. I am trying to deploy my app on Vercel but it keeps throwing me the error Cannot find module '#next/env' as shown here.
I think it's because of the next-sitemap package. I have checked my node modules and there is no env file or folder inside the #next folder.
I have also researched around but haven't been able to find any solution.
I have also tried deploying my app on Netlify and it throws the same error. Any help would be appreciated a lot.
UPDATE:
I was finally able to solve this by updating my next.js to 10.2.3
just add "#next/env": "^12.0.7" inside dependencies in your package file or just write npm install #next/env

React App blank page when deploying production build

I'm new to react, so apologies if this is basic - but following a promising learning curve building the site, I've spent c9hrs trying to get it deployed :(
The info is as follows...
1.Runs fine as a development build on my machine.
2.Creating a production build through 'npm run build' results in it being built with the assumption its hosted at the server root - see below;
file sizes after gzip:
278.93 KB build/static/js/2.a3ca1e82.chunk.js
42.16 KB build/static/js/main.1a0b5ce7.chunk.js
33.88 KB build/static/css/main.75362cf6.chunk.css
24.72 KB build/static/css/2.3cd6815b.chunk.css
762 B build/static/js/runtime~main.a8a9905a.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Running 'serve -s build' results in a local deployment of the production build on localhost:5000 - but with the blank screen problem present
...and the issue is consistent on the production deployment on Amazon S3. This can be seen live on www.cotswoldcohost.co.uk right now.
Looking a the source it appears to be finding index.html, and the console highlights a type error with particles.js - which maybe a separate issue from the rendering problem.
Any advice really appreciated - happy to provide any more info that you may require!
I went through the same issue recently whilst using react-particles-js in a React app, getting
TypeError: Super expression must either be null or a function, not object
on console.
It happens I was working on a old project with outdated package versions and therefore there was an incompatibility between react, react-scripts and react-particles-js. Updating packages to the following versions fixed my problem:
react: ^17.0.2,
react-dom: ^17.0.2,
react-particles-js: ^2.7.1,
react-scripts: 3.4.4,
eslint: ^6.6.0
When I go to www.cotswoldcohost.co.uk on Chrome, my console gives me Uncaught TypeError: Super expression must either be null or a function.
If this is the true underlying issue and not the Particle.js issue, then it's possibly an export issue in your app. I would check for these things:
Circular dependencies / imports
Importing a default export incorrectly (usually an import with curly braces that shouldn't be using braces)
A missing import statement
Just been through the entire project and removed all references to particles.js as its not critical...and its working. That was a long day, but I learnt a lot. Thanks for everyones input.

React app deployed to GitHub giving me a minified error #152

I am having a problem with my React application. I am trying to deploy the website to GitHub pages but I am getting this error:
Error: "Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=u for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
The error is telling me to use the non-minified development environment, but I cannot figure out how to do this.
Here is a link to my GitHub repository if you would like to check!
GitHub repository
I am not sure how to solve this since this is the first time I try to deploy a website. I tried installing some dependencies like Webpack, Babel, and Parcel to bundle my files into a readable JavaScript file, but my guess is that something is not being translated properly, meaning that there might be a syntax error somewhere in my code.
When running the Webpack dependency I did get a series of errors, that is why I installed some other libraries and loaders:
Error on Terminal
I ran into the same issue. The issue occurred wherever I deployed a production build to - locally or Firebase. I found that I had some comments in my render/return code and removing them solved this for me, as discussed at https://github.com/facebook/create-react-app/issues/8687.
I removed the comments as suggested, but ended up using gh-pages instead of deploying via a docs directory on github, so it worked in the end. I have deployed other apps after that with comments and they work just fine.
So if you ever run into this, try gh-pages instead

Running any React-Native project for iOS results in 'Unable to resolve module' error

I'm trying out the much hyped React-Native as an alternative to native development. I have installed nvm, react, react-native, and the cli by following this guide.
I have tried downloading and running several projects from github but no project has ever run (navigate to project directory, npm install then react-native run-ios) successfully. I usually get this error: 'Unable to resolve module'.
The error mentions it may be related to https://github.com/facebook/react-native/issues/4968. It also provides some solutions, non of which have ever worked. Reinstalling the node modules never works, neither does resetting the cache. I have also tried reinstalling react, rn, and the cli. The last 'solution' is to recreate the project from scratch, which I haven't tried thus far.
The emperor has no clothes.
P.S Even the example iOS project in the react-native github repo throws errors (albeit different ones: No script URL provided.)

Resources