I'm having some issues deploying to netlify. These are the errors I receive:
Error: ./src/pages/index.js
12:55:30 PM: Module not found: Error: Can't resolve '../components/Featured' in '/opt/build /repo/src/pages'
12:55:30 PM: resolve '../components/Featured' in '/opt/build/repo/src/pages'
12:55:30 PM: using description file: /opt/build/repo/package.json (relative path: ./src/p ages)
12:55:30 PM: Field 'browser' doesn't contain a valid alias configuration
For some reason it can't find the components. Building locally works fine.
I used gatsby-starter w styled-components.
things I tried:
I had some local building errors regarding the window undefined. I fixed these by conditionally including them as the manual proposes.
After applying this, I started receiving console logs from ‘workbox’.
(btw this is my first time trying to deploy to netlify)
also the error Field 'browser' doesn't contain a valid alias configuration keeps repeating in the logs
here's a link to the full log I get from netlify
The errors are due to webpack not being able to resolve your relative paths. Make sure to use the correct case.
import Hero from '../components/hero'
import Introduce from '../components/introduce'
import HelpMeHelpYou from '../components/helpmehelpyou'
import Featured from '../components/featured'
import Testimonials from '../components/testimonials'
import Projects from '../components/projects'
import Gallery from '../components/gallery'
import Outroduce from '../components/outroduce'
Run below command and then push the code to Github repository.
git config core.ignorecase false
Related
This module seems to be having some problems lately. I had been using react icons 3.2.1 but that was having problems importing icons that weren't being used in the project, causing poor lighthouse scores, and in general bad practice to bloat your bundle.js with lots of unnecessary files.
So
"#react-icons/all-files": "^4.1.0"
and
import { BsPlus } from '#react-icons/all-files/bs/bsArrowRightShort'
was succesfully importing only those icons -- and it worked fine locally -- but when I push to heroku, I get the following error
2022-04-19T22:16:58.682656+00:00 app[web.1]: ERROR in ./src/client/components/common/Layout.js 9:0-80
2022-04-19T22:16:58.682657+00:00 app[web.1]: Module not found: Error: Can't resolve '#react-icons/all-files/bs/bsArrowRightShort' in '/app/src/client/components/common'
2022-04-19T22:16:58.682657+00:00 app[web.1]: # ./src/client/components/App.js 7:0-37 11:42-48
2022-04-19T22:16:58.682657+00:00 app[web.1]: # ./src/client/index.js 9:0-38 15:85-88
I'm not sure what else I would have to do to also have this work in production... but this completely breaks the site, its not that it doesn't load or shows a broken image link icon, this completely crashes my server, which seems like...not ideal for a package that's supposed to just be serving icons.
I've also opened an issue on the github here: https://github.com/react-icons/react-icons/issues/554
I am getting the following error when publishing my create react app but the error doesn't appear locally. I recently updated my React version and a load of packages too. I'm guessing it's possibly something to do with that as I've never had this issue before?
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://**subdomain**.azurewebsites.net/') with script ('https://**subdomain**.azurewebsites.net/service-worker.js'): The script has an unsupported MIME type ('text/html').
Any input on this will be greatly appreciated. The error doesn't appear to be breaking anything from what I can see but I'd rather not push this to production with any kind of errors
So turns out the issue was because I updated the react version. CRA doesn't have service workers out of the box anymore. The project was returning 'unsupported MIME type ('text/html')' because it was hitting 404 looking for a file that doesn't exist.
The fix was relativly simple.
I replaced the registerServiceWorker() in my index.js file with reportWebVitals(). I then added reportWebVitals.js to my src folder. (I just created a temp react project and pulled the file from that). After I did that it started to work for me. I think I also had to npm install web-vitals.
I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet in my index.js:
import 'rsuite/lib/styles/index.less';
I get the following message when running gatsby develop:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
If you're trying to use a package make sure that 'rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct.
File: src/pages/index.js:14:0
failed Building development bundle - 7.237s
ERROR in ./src/pages/index.js 14:0-38
Module not found: Error: Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
# ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 31:11-33:5
# ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 1 error
I tried so many things already: installing and reinstalling rsuite, installing and reinstalling gatsby-plugin-less and less, clearing the cache, trying all kinds of configurations in gatsby-config.js, but I'm out of options really.
Meanwhile, installing react-bootstrap and importing the stylesheet similarly through
import "bootstrap/dist/css/bootstrap.min.css";
does not produce the error and the stylesheet gets applied.
Would greatly appreciate your help!
I think you should be using:
import '~rsuite/lib/styles/index.less';
Notice the ~, as it is inferred from the docs.
You can try this:
import "rsuite/src/styles/themes/default/index.less"
https://github.com/rsuite/rsuite/blob/next/examples/with-gatsby/src/pages/index.js#L4
I am trying to add Login functionality to a React app I'm building using Amplify and AWS Cognito, but when I add the following line in my Login.js file:
Import {Auth} from "aws-amplify-react";
and try to compile, I get the following error:
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in 'my_react_path/node_modules/aws-amplify-react/lib-esm/Analytics'
I tried installing Amplify with homebrew and npm, but I can't get around this, any tips?
EDIT:
Initially I had:
Import {Auth} from "aws-amplify";
But The compiler couldn't resolve aws-amplify, and I could only find aws-amplify-react in the node_modules folder so I changed it.
However, in "node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js" in line 39:
import Analytics from '#aws-amplify/analytics';
The problem is that it can't find aws-amplify... Did I make a mess while installing maybe?
Assuming that you are not worried about bundle size at this stage, probably your easiest course of action is to remove your node_modules entirely, then:
npm i aws-amplify
import like this:
import Amplify, { Auth } from 'aws-amplify'
You only need to install/import aws-amplify-react if you plan on using the OOTB UI components. If you are making your own UI components for login you don't need that package at this stage.
I get a similar error
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in '/Users/myuser/myproject/node_modules/aws-amplify-react/lib-esm/Analytics'
when following the Amplify tutorial.
The workaround I found is to execute:
npm i -S #aws-amplify/analytics #aws-amplify/interactions #aws-amplify/storage #aws-amplify/ui #aws-amplify/xr aws-amplify
Obviously, I would love to know how to avoid all these extra libraries.
I would revert to your previous version before attempting to add amplify (old package.json & node_modules)
Follow this walkthrough: https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native
When you get to the "Add Authentication" step, skip it and go straight to "Next Steps" -> "Authentication" and follow until you get to:
import Amplify, {Auth} from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
I am new to Gatsby. I was able to get a site working on Netlify and need help with with swapping out the logo. I did find this response from another question/post helpful in understanding how Gatsby works but the code I submitted based on the other response didn't work in my case.
gatsbyjs, reactjs -images do not appear?
** summary of response to link above ***
For your image not showing up, this is why: Everything in your src folder is meant to be dynamic, meaning it won't be served directly. If you want to include image statically, you can create a public folder in your root directory (at the same level with src folder), and put images in there. Anything in this public folder will be served directly. So for example, you can have this structure:
|-- src
`-- public
`-- images
`-- logo.png
Then in your code, you can include the path like
<img src="/images/logo.png" alt="logo" />
1) Github repository:
egatsby-starter-netlify-cms
2) Site URL
3) Code Changes: SRC/Navbar.js (this is where I believe the header/logo code is located)
-- the last line is what I added and the line above it is the original (commented out)
import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
{/* import logo from '../img/logo.svg' */}
import logo from '../image/logo.png'
4) Error message when I deployed to Netlify
1:02:18 PM: success Generating image thumbnails - 0.780s - 17/17 21.80/s
1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'
1:03:29 PM: error UNHANDLED REJECTION Converting circular structure to JSON
1:03:29 PM:
1:03:29 PM: TypeError: Converting circular structure to JSON
1:03:29 PM:
1:03:29 PM: - JSON.stringify
Any suggestions would be greatly appreciated.
This is the wrong path i.e. "/" means project root directory:
<img src="/images/logo.png" alt="logo" />
compared to this which means "go up one directory from current directory of this source file":
import logo from '../image/logo.png'
Do this:
// Use an IDE to check if this path is valid and points to the right file
import logo from '../image/logo.png'
// ...
// refer to the imported logo in the source
<img src={logo} alt="logo" />
The build error on Netlify seem to be unrelated to your image chainging issue.
1:03:29 PM: error "gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:
1:03:29 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '../image/logo.png' in '/opt/build/repo/src/components'
The "gatsby-plugin-netlify-cms" plugin is throwing an error because it expects a file to be somewhere in the netlify cms. But you have that file directly in your git project. You don't need to have the image BOTH in your git project and the CMS. Pick one location.
The Gatsby starters can be quite overwhelming for someone who is just starting out with gatsby. At least I felt this way. My suggestion: Start from the basics, then add complexity step by step.
Use the basic gatsby starter from the tutorial
Change the image there, test if publish to netlify is successful
add the netlify cms plugin manually to this basic starter
Learn about how to integrate plugins correctly
Change the image to netlify cms, test if publish to netlify is successful
Now you understand each step towards your problem. Now use the complicated gatsby-starter-netlify-cms and change the code there.
I was able to get the image (logo) changed. I used Illustrator to create a .svg file and then just uploaded it to Github (renamed it logo2.svg) and changed the name in the Navbar.js file
import React from 'react'
import { Link } from 'gatsby'
import github from '../img/github-icon.svg'
import logo from '../img/logo2.svg'
However, the new image (logo) is too small and I don't know enough about .svg or other settings to get it to show properly.
Here is the image I uploaded into Git and how it shows using Chrome inspect
enter image description here
Here is how the original image looks in Chrome inspect
enter image description here
Just thought it might help others. Unfortunately I am not well versed with .svg files. It would be great if there was a simpler, more elegant option - i.e. using a static .png file.
There is another snippet of code that defines the logo width but when I changed it to "200" (same width as new logo) it caused the header to widen too far (created a large vertical whitespace).
div className="navbar-brand">
<Link to="/" className="navbar-item" title="Logo">
<img src={logo} alt="MetaMedia" style={{ width: '88px' }} />