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
Related
I'm getting this error when trying to build a React native App (npm run android)
error: package com.facebook.react.modules.storage does not exist
import com.facebook.react.modules.storage.ReactDatabaseSupplier;
error: package com.facebook.react.modules.storage does not exist
com.facebook.react.modules.storage.ReactDatabaseSupplier.getInstance(getApplicationContext()).setMaximumSize(size);
React Native 63
I've already tried to remove node_modules and install everything again but nothing works at the moment
This was reported in rect-native bulletin, the issue started on Nov-4, 2022 and react-native team released a patch and workarounds.
https://github.com/facebook/react-native/issues/35210
For your use of 63.x, update to the patch, 63.5 and it will fix the build, try clean and build.
as mentioned here adding folowing content to your android/build.gradle and after that sync project with gradle will fix the issue:
def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
allprojects {
configurations.all {
resolutionStrategy {
// Remove this override in 0.65+, as a proper fix is included in react-native itself.
force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
}
}
.
.
.
}
I have an issue I can not seem to resolve, I am new to this and don't know whether there is something wrong in my code or the server is simply not available.
I am trying to import face recognition API from Clarifai into React App, followed the npm guide how to install, but once I do
import {ClarifaiStub, grpc} from "clarifai-nodejs-grpc";
I get an error
./node_modules/#grpc/grpc-js/build/src/server.js
Module not found: Can't resolve 'http2' in 'C:\Users\mkura\Documents\GitHub\find-the-face\node_modules\#grpc\grpc-js\build\src'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Actualy, there is const {ClarifaiStub, grpc} = require("clarifai-nodejs-grpc"); in the guide, which I changed to
import {ClarifaiStub, grpc} from "clarifai-nodejs-grpc";
assuming I have to import it this way. What do I do wrong?
From your question I assert that you're trying to install the Clarifai node API into a react app.
That fails because this package is a node app using standard library features like http2 which are not available in the browser.
Instead of the clarifai-nodejs-grpc you will have to use clarifai in your react app from what I can see in their docs.
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'm following using this codesandbox as a guide with my React project and receiving this error:
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax'
Assuming I copied everything from that sandbox to my local files, why am I getting that error?
I'm using Create-react-app btw.
animation.gsap.js requires TimelineMax module so try importing 'TimelineMax' module
import { TimelineMax} from 'gsap/src/uncompressed/TweenMax.js';
also you can refer to github solution
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