Thanks for reading my question.
I successfully made a React JS App from scratch on my other PC using snowpack. And I tried it on my other one. But when I set everything up in powershell(where Im running the npm start from), it keeps telling me snowpack cant find index.js.
[snowpack] [404] Not Found (/.src/index.js)
So now my browser is just blank at the localhost.
Here is the code:
package.json
{
"name": "02",
"version": "1.0.0",
"description": "Practice 3",
"main": "index.js",
"scripts": {
"start": "snowpack dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "V",
"license": "MIT",
"devDependencies": {
"snowpack": "^3.8.8"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02</title>
</head>
<body>
<div id="root"></div>
<script type="module" src=".src/index.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Whats good React?</div>, document.getElementById('root'));
path structure
Apparently a jsx. compies down to a .js like it did on my other machine.
I tried to rename the index file to a normal .js. No difference. I encountered this issue before. But oddly, last time on my other machine I just closed powershell and ran 'npm start' again and it worked. Tried that thrice this time, no change. I also previously had a issue calling 'react' from both 'React' and 'ReactDOM' but fixed that setting 'react-dom' instead of 'react'.
Don't know why its saying this.
Im using webstorm IDE.
Thanks in advance.
Related
my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}
Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server
I am developing a shareable widget with client as react 18 and server side as Asp.net mvc core 6 which can be called by using following approach:
When I try to run the npm run build command then I can see the following index.html page in build directory and there are some js, css plugins and images in the build directory.
<!doctype html><html lang="en">
<head><meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>React App</title>
<script defer="defer" src="/static/js/main.6134db66.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
</body>
</html>
Now my main focus is on calling js, css and image resources if I develop the widget. My widget can be accessed through a js and css plugin including a div element.
Now see following URLs will be dynamically generated each time.
src="/static/js/main.6134db66.js"
href="/static/css/main.073c9b0a.css"
How would I give it to my customers/clients if name 'll be changed after each npm run build.
You can see my client application source below which is calling my widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="http://localhost:3000/static/css/main.073c9b0a.css" rel="stylesheet"></head>
<script defer="defer" src="http://localhost:3000/static/js/main.6134db66.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
I can place it on one of my server domain but how to keep the plug name same ? I am also curios about my widget images. Will my widget image work correctly or 'll I have do something more for it ?
Any help will be appreciated.
See my package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I faced the same issue and solved it using react-app-rewired on a CRA, so I could modify the webpack config without ejecting the CRA.
You should install react-app-rewired and then configure your config-overrides.js and webpack.config.js like I show below:
// config-overrides.js
module.exports = function override(config, env) {
//do stuff with the webpack config...
config = {
...config,
output: {
...config.output,
library: "AwesomeWidget", // Important, the name of the lib to be exported
libraryTarget: "umd",
umdNamedDefine: true,
},
};
return config;
};
// webpack.config.js
module.exports = {
entry: {
"bundle.js": glob
.sync("build/static/?(js|css)/main.*.?(js|css)")
.map((f) => path.resolve(__dirname, f)),
},
output: {
library: "AwesomeWidget",
libraryTarget: "umd",
umdNamedDefine: true,
clean: true,
path: path.resolve(__dirname, "public/example/static"),
filename: "bundle.min.js", // Important, the name of the exported bundle, always the same name.
},
};
After that, you need to set scripts in your package.json, adding build scripts like so:
"scripts": {
"start": "react-app-rewired start",
"build": "yarn build:react && yarn build:bundle",
"build:react": "react-app-rewired build",
"build:bundle": "webpack --config webpack.config.js",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
As you can see, when running npm run build it will create a normal build (build:react) and then it will build using our custom webpack config (build:bundle).
This way, you will have exported a JS file always with the same name in public/example/static/bundle.min.js.
Then, I use this bundle in any HTML like this:
<script
src="url/to/bundle.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
if (!!AwesomeWidget) {
// use your code here
AwesomeWidget.customMethod();
}
</script>
It may be a better way to solve it, hope it works for you.
I am trying to load React build files in a Django template (serving the React build files via Django static files). I’ve had success using this approach in the past with other Django templates, but with this particular case, the React app is not attaching to my div in the Django template. The React app is created using create_react_app with minimal changes.
My src/index.js file: (only changed the root element)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('chat-root')
);
reportWebVitals();
My public/index.html file: (only changed the root element)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chat-root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I built my files via npm run build and placed the build files in my Django static folder. These are then included in my Django template as follows. Note that this Django app has several other React “apps” that use this same approach without issue.
<div id="chat-root"></div>
{% compress js %}
<script src="{% static 'react/build_files/chat.chunk.js' %}"></script>
<script src="{% static 'react/build_files/main.chat.chunk.js' %}"></script>
{% endcompress %}
The Django url setup works with a simple html template so I am sure that is correct.
I have also tried not setting homepage in package.json and setting "homepage": "/"
but that didn't help.
There are no error during build or on browser console. The network tab in dev tools shows that the scripts get loaded but no react components get created.
I am new to react so any help will be appreciated. Thanks!
For anyone facing a similar issue, I was able to resolve it by placing all JS files created in the build.
I noticed there was another file runtime~main.[number].js being created when a build was created. I had skipped this file earlier based on the how the other React "apps" were added to static folder in Django app.
Placing this build file along with the other JS files allowed the app to attach to Django and load properly.
My react application is built using create react app https://reactjs.org/docs/create-a-new-react-app.html fails to start.
When i exec npm run start my application hangs with the following message.
Starting the development server...
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^25.1.1",
"#types/node": "^13.7.0",
"#types/react": "^16.9.19",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"lodash": "^4.17.15",
"node-sass": "^4.13.1",
"npm-check-updates": "^4.0.1",
"qs": "^6.9.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#semantic-release/gitlab": "^6.0.2",
"semantic-release": "^17.0.2"
},
"release": {
"branch": "master",
"plugins": [
"#semantic-release/commit-analyzer",
"#semantic-release/release-notes-generator",
[
"#semantic-release/gitlab",
{
"gitlabUrl": "https://git.companyname.com"
}
]
]
}
}
Node Version: v12.14.1
Npm Version: 6.13.4
I have tried this a few times and each time it fails it is creating a new node process i know this because it asks me to select a different port.
So far i have attempted the following process without any luck
rm -rf node_modules
npm install
npm start
If you have installed some packages yourself after creating react application using creat-react-app, it may be because, one of the installed packages is not working.
In the past, I had a problem like your case.
At that time, I have installed react-pdf package to show pdfs.
As a consequence, development server didn't start and whenever I run again it asked to choose another port.
After removing that package, it worked well.
So I think there may be not working module in the package.json.
In my opinion, it may be 'qs' packagae.
I copied your package.json file and ran it locally on my machine.
First I ran npm install
I then created /src/index.js and chucked in the following default code from create-react-app:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>We're in!</div>, document.getElementById("root"));
And I also created /public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Lastly, I ran npm start
The application ran fine, with the only concern being an out of date sub-dependency (Old version of corejs)
This leads me to think that the problem might be in your local setup.
I would recommend clearing your npm cache and trying again.
To clear your cache, run npm cache clear --f with elevated permissions.
My suggestion would then be to start a new app directory, just in case there's something corrupt in the existing directory.
For me it turned out restarting my computer fixed it.
I still don't know the cause of this as the environment has remained the same and apart from removing node_modules and npm install i did nothing else.
I fixed it by installing a previous version of npm-scripts
Try using this:
npm install react-scripts#2.1.8
I have a basic HTML/ JS project and have been trying to get react to run. For various reasons, I need to run install React from existing project and not from create-react-app.
Project directory:
|-node_modules
|
|- public
| |- js
| | |- index.js
| |
| |- index.html
|
|- package.json
|
| - ...
Inside index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Inside index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
inside package.json:
{
"name": "developer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node_modules/http-server/bin/http-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"http-server": "^0.10.0"
},
"dependencies": {
"react": "15.6.1",
"react-dom": "15.6.1"
}
}
Super basic. I am following instruction from FB React Installation. However, when I ran npm start and went to 8080, it shows a completely blank page.
What am I missing?
This is simplest implementation of react without bundle setup.
From documentation itself: single-file-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
You can use babel with webpack or gulp to set up your react development environment. This has great explanation to things and getting started.
Also you can use create-react-app to get started with your project and all the settings will be done before hand.
You should use a webpack or browserify to render into a browser.
If you are using react tag is not HTML tag but it is react html tag:
h1 : React.HTMLProps
So, it will not render as HTML. This react html is called as JSX.
Browser don't understand JSX you need a parser for it. To parse this JSX you may use babel.
** All html tags in react are bot actual html tags but react's tags
Probably you forgot to nest the content in a return function in your component.