I found on web this tutorial. I set react application according to tutorial and all is OK. But now i would like add css file and divide application on components how is in this tutorial . I would like show default page after run command npm start . But when I added css file and App.jsx and wrote: npm start I got error:
ERROR in ./src/App.js
Module not found: Error: Can't resolve './App.css' in '/Users/username/Documents/Projects/myApp/frontend/src'
# ./src/App.js 21:0-19
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/index.js
Thank you for your advice on how to set up your app to work properly.
Did you change the default folder structure you get when you use create-react-app. It looks like you have the location of the css file wrong.
The solution is:
npm install style-loader
npm install css-loader
and edit webpack.config.js how is in the link.
Related
I am following the fontawesome documentation on how to add icons with react.
https://fontawesome.com/v6/docs/web/use-with/react/add-icons
I have added babel.config.js and babel-plugin-macros.config.js files in my root directory. Code for both of those file could be viewed in the documentation link attached.
I am getting the error as:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:
i added api.cache(true) in my babel.config.js file but still the error persists.
Can anyone identify why this error is showing up?
I had the same issue, if you used create-react-app you could try ejecting the project and following the steps (I failed), but the way I got it to work is to follow https://fontawesome.com/v6/docs/web/use-with/react/
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/free-regular-svg-icons
npm i --save #fortawesome/react-fontawesome#latest
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faGear } from '#fortawesome/free-solid-svg-icons';
const gearIcon = <FontAwesomeIcon icon={faGear} />
...
render(<> {gearIcon} </>);
Hello everyone i am trying to use this npm package i found in my gatsby js project https://www.npmjs.com/package/boxrec-client.
I have tried to import the library in my index.js file but seem to be getting this weird FS module error that cant be found. I have already added the package to yarn. below is my code
my imports look like this
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import boxrecClient from '../../node_modules/boxrec-client';
i am currently getting this error in my console and blank page in my localhost window.
ℹ ｢wdm｣: Compiling...
ERROR Failed to compile with 1 errors 7:18:28 PM
⠀
This dependency was not found:
⠀
* fs in ./node_modules/request/lib/har.js
⠀
To install it, you can run: npm install --save fs
✖ ｢wdm｣:
ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/Users/kevinlopez/Desktop/sample-site/node_modules/request/lib'
# ./node_modules/request/lib/har.js 3:9-22
# ./node_modules/request/request.js
# ./node_modules/request/index.js
# ./node_modules/boxrec-client/index.js
# ./src/pages/index.js
# ./.cache/sync-requires.js
# ./.cache/app.js
# multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.
i have also tried to install this fs package but the error consists would someone be able to guide me in the right direction ? Thanks
A BoxRec client which fetches data from the BoxRec boxing website via web scraping in Node.js. Fetches return promise objects which will resolve with the fetched data if successful.
'fs' is a backend Nodejs library (file-system), you cannot use that in the browser.
We are migrating CSS-loader from v0.28.11 to v3.1.0
We have 2 projects:
Project A- No component dependency on any other project - (containing some components)
Project B - We are importing Project A as node modules
We are able to run and build project A successfully.
But when we try to run Project B we getting a dependancy error for css files from Project A.
ERROR in ./src/help/css/about.qcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './Project/A/src/typography/css/qx-typography.css' in 'D:\Projects\B\src\help\css'
at factory.create (D:\Projects\B\node_modules\webpack\lib\Compilation.js:823:10)
at factory (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
at resolver (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
at D:\Projects\B\node_modules\neo-async\async.js:2830:7
at D:\Projects\B\node_modules\neo-async\async.js:6877:13
at normalResolver.resolve (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\Projects\B\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\Projects\rx\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\Projects\B\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
Same works fine with if we do css-loader of Project A to v3.1.0 and Project B to v1.0.0
But we get a compile-time error if we change both project css-loader version to 3.1.0
We should be able to run and create a build using CSS-loader with version 3.1.0
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cj s.js):
Error: Missing binding /home/user/frontloja/node_modul es/node-sass/vendor/ linux-x64-64/binding.node
Node Sass could not find a binding for your current environment : Linux 64-bit with Node.js 10.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 12.x
In my case, it happened after I updated ubuntu 18 to 20, so I did it like this
remove or rename node_modules
then reinstall use npm or yarn install
This issue happens because of webpack resolve.alias not works
To solve this issue we can use the relative path.
In my case
Currently, I am in Projects\B\src\help\css
and requiring file from node_Modules
/Project/A/src/typography/css/qx-typography.css
so my path be like (**Relative Path**)
../../../../node_modules/Project/A/src/typography/css/qx-typography.css";
Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'bootstrap/dist/css/bootstrap.min.css'
Solution:
Run the following command for installing additional packages
npm install bootstrap jquery popper.js
I had this issue in my Angular project. It looks like a bootstrap issue. I just downgraded bootstrap from 5.1.3 to 4.6.0. That's all
I'm new to React and new to npm module publishing, there is a beginning for all things!
I have created a react module.
I have created a react app (using create-react-app) and i have imported the module directly (not via a npm install).
On this case, i got no errors. The app is compiling without problems.
However, when i'm trying to use my module by importing it from npm (after it's get published), it fails.
To get this issue, i have created another react app (always by using create-react-app) then i have installed my package using npm i --save my-module-name.
I'm importing it commonly by using import { SomeComponent } from 'my-module-name' instead of importing it directly.
And i got the following error
Module parse failed: Unexpected token (59:37)
You may need an appropriate loader to handle this file type.
| }
|
| generateRecoverActionsContainers = () => {
|
After some searchs, it seems to come from the Webpack configuration. But, during my searchs, i saw that people recommand to not touch the react Webpack default configuration.
From there, i'm a bit lost on how to fix that and also, why it was compiling when the module was imported directly and not compiling when it was importing from node_modules... Should i had a webpack configuration in my npm module?
Thanks in advance for your precious help!
When you publish a module on npm, you should publish compiled code. Webpack doesn't compile node_modules
I am new in this. I am trying to create a react app with bootsrap 4. I am using reactstrap following the next steps:
create-react-app my-app
npm install bootstrap --save
npm install --save reactstrap#next react react-dom
Import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
But when I start my app, I am getting this error:
Failed to compile.
./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap.css' in 'D:\React\my-app2\src'
I used to use bootstrap with CDN, you know, in my html page, link rel="stylesheet" ... etc and script src=""... etc. But using reactstrap, where are the js files? (jquery, popper, bootstrap) (are all together when I run npm install bootstrap --save ?)
Thanks
As you see from the error, it tries to look for bootstrap/dist/css/bootstrap.css inside your src folder. But if you look at your project files, you will notice that the bootstrap folder is located 1 level up (in the root) inside node_modules folder.
So either search and correct your path to:
../node_modules/bootstrap/dist/css/bootstrap.css.
Or add (if you still haven't done this) a reference to your index.js:
import '../node_modules/bootstrap/dist/css/bootstrap.css'.
This is the files tree:
+-node_modules
|-bootstrap
|-dist
|-css
|-bootstrap.css
+-src
|-index.js