I'm trying to start Express.js server with react application that I downloaded, but when I do npm start on my server there is error
ERROR in ./src/app.jsx
Module build failed: SyntaxError: Unexpected token (6:7)
4 | import 'react-select/dist/react-select.css';
5 |
> 6 | render(<div>Place your application here</div>, document.getElementById('app-root'));
Why would it be?
Try using this
import React from 'react';
import ReactDOM from 'react-dom';
import 'react-select/dist/react-select.css';
ReactDOM.render(
< div > Place your application here < /div>,
document.getElementById('root'));
Finally got it working by settings presets in webpack.config:
presets:['es2015','react'] - for error Uncaught SyntaxError: Unexpected token import
and npm install babel-preset-react + babel-preset-es2015
Related
I've installed some module on my react application
these are the error I got. Please if you guys have some solution.
`./node_modules/hafas-client/p/db/index.js 4:36
Module parse failed: Unexpected token (4:36)
File was processed with these loaders:
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| // https://github.com/tc39/proposal-import-assertions
| import { createRequire } from 'module';
const require = createRequire(import.meta.url);
| import trim from 'lodash/trim.js';
| import uniqBy from 'lodash/uniqBy.js';
`
I've try to upgrade react-script or find some loaders which can be solve this issue but no success
While starting a development server with npm rund dev, it returns me following error:
wait - compiling /_error (client and server)...
error - ./src/lib/markdown/posts.ts:5:0
Module not found: Package path ./render-to-string is not exported from package C:\Users\Sarah\Code\revoic-marketing\node_modules\next-mdx-remote (see exports field in C:\Users\Sarah\Code\revoic-marketing\node_modules\next-mdx-remote\package.json)
3 | import matter from "gray-matter";
4 | import config from "#/config/config.json";
> 5 | import renderToString from "next-mdx-remote/render-to-string";
6 | import { withTableOfContents } from "#/remark/withTableOfContents";
7 | import { withNextImages } from "#/remark/withNextImages";
8 | import mdxPrism from "mdx-prism";
Import trace for requested module:
./src/lib/markdown/index.ts
./src/pages/index.tsx
https://nextjs.org/docs/messages/module-not-found
I created an HTML CSS JS application and then created an empty React project and moved everything there. At the beginning, there were errors that were solved by adding the following line to .eslintrc :
"parser": "react-scripts/node_modules/babel-eslint"
After that, no errors are shown in the terminal, the program is launched in the browser, but it gives errors(console) and does not show images, although everything else works. I couldn't find anything on the Internet about these errors, because of what could this be? Console error code:
bootstrap:27 Uncaught Error: createRoot(...): Target container is not a DOM element.
at createRoot (react-dom.development.js:29345:1)
at Object.createRoot$1 [as createRoot] (react-dom.development.js:29800:1)
at exports.createRoot (client.js:12:1)
at ./src/index.js (index.js:7:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1
and another little mistake
Uncaught SyntaxError: Unexpected token '<'
Eslint sometimes glows yellow too
Help me please . The third day I can not understand what the problem is.
index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); //console shows error on this line
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
By the way, I placed the files in the already existing folders index.html app.js app.css , maybe it was not necessary to place them there?
In the terminal it started to give an error now too :
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc
ERROR in [eslint] Cannot read config file: C:\Users\user\my-app\node_modules\eslint-config-prettier\react.js
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc
I can not see the problem in webvital.js. I intalled react-router-dom twice and then this error ocurred and I broke my code. I found that a solution can be to start the project from cero, but that didn't work. I also installed webvitals but it is still appears the same bug. Can anyone have a clue what will be the solution? I can see properly the proyect in github but no in my pc. It is not deploying well and is not actualizing the webpage. Thank you so much for the help! :)
This is reportWebVirials.js
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import(`web-vitals`).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
This is the error:
Failed to compile.
Error in ./src/reportWebVitals.js
Syntax error: D:/ELEARNING PATH/CURSADA/PROYECT/PROYECT REWARDS STORE/store-lopez-andrea/src/reportWebVitals.js: 'import' and 'export' may only appear at the top level (3:4)
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 3 | import(`web-vitals`).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
# ./src/index.js 19:23-51
This is the index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import AppProvider from "./context/AppContext";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<AppProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</AppProvider>
</React.StrictMode>,
document.getElementById("root")
);
I had the same problem, I went ahead with an
npm install
then
npm audit fix --force
command. After this, I relaunched my React application and it worked!
Had the same problem and running this command fixed it, thanks to an answer in this thread.
npm install react-router-dom --save
I'm trying to import multiple icons from the same pack at once, in this case, font-awesome like this:
import {FaPencilSquare,FaHome} from 'react-icons/fa'
but I'm getting this error:
ERROR in ./node_modules/react-icons/fa/index.js
Module build failed: SyntaxError: Unexpected token, expected { (1:7)
> 1 | export Fa500px from './500px';
| ^
2 | export FaAdjust from './adjust';
3 | export FaAdn from './adn';
4 | export FaAlignCenter from './align-center';
If I import icons separately I don't get any errors,
any ideas what it could be?
Thanks to #bennygenel it seems like there is an open issue with that a workaround is to add the lib folder to your import like this:
import {FaHome,FaPencilSquare} from 'react-icons/lib/fa'