when I create react app using npx create-react-app app-name the app gets created but when I start the app using npm start i get the following error, please can someone guide me
Failed to compile.
./src/index.js 1:39
Module parse failed: Unexpected token (1:39)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('D:/Project's/React/CRUD-Operations/client/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
Related
I am receiving an error when i try to deploy using vercel, i created the app with vite
this is what i get:
vite v3.0.2 building for production...
transforming...
✓ 42 modules transformed.
[vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43558:19)
at onwarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43349:13)
at Object.onwarn (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:23177:13)
at ModuleLoader.handleResolveId (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22334:26)
at file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22295:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Command "npm run build" exited with 1```
Any suggestion on how to solve it?
when I'm removing the babel-loader from webpack these errors are found.
I don't want babel-loader in webpack.
I need to configure webpack without babel-loader
I want to remove babel-loader from my React application.
I'm trying to do is completely remove Babel from my project but I'm facing these issues:
ERROR in ./index.js Module parse failed: Unexpected token (18:4) You may need an appropriate loader to handle this file type
I have a monorepository with 3 packages: gatsby app, CRA app and a components library.
Everything worked fine but at some point CRA started throwing errors:
Module parse failed: Unexpected token (3675:49)
File was processed with these loaders:
* ../../node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ../../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
I was using rollup to bundle components lib, but removed it at some point because gatsby app was able to import from the workspace as is, without build (there is a link in node_modules). I thought it was the case, maybe CRA webpack is handling files in a different way, so I added back rollup, but it didn't help. I also tried using older versions of react-scripts (4.0.3 -> 4.0.1), it didn't help either.
I'm using create-react-app and I'm trying to integrate font-awesome so I can use it in my SPA.
I've done npm install font-awesome and it's installed, but when I try to call import 'font-awesome/css/font-awesome.css' I get the following error:
Compiling...
Failed to compile.
Error in ./~/font-awesome/css/font-awesome.css
Module parse failed: C:\Projects\myproject\ui\node_modules\font-awesome\css\font-awesome.css Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (7:0)
# ./src/index.js 11:0-44
This is webpack related...
Webpack needs to use loader to read and parse different import statements...
CSS loader https://github.com/webpack-contrib/css-loader