I am new to MERN development. I tried a "Hello World" tutorial to get a basic understanding on MERN.
The tutorial involves Webpack 4, Babel, expressJS and ReactJS.
All works fine but the ES6 piled bundle.js which was created with Webpack is not getting triggered in the final output.
I get the following error while loading the template.js:
GET http://localhost:8080/dist/bundle.js net::ERR_ABORTED 404 (Not Found)" error
I tried all bination of relative paths but still it is not working.
Please see my template.js code below:
export default () => {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MERN Tutorial</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="dist/bundle.js"/>
</html>`;
};
Please help me to rectify the issue.
Regards, Pradeep Selva.
I am new to MERN development. I tried a "Hello World" tutorial to get a basic understanding on MERN.
The tutorial involves Webpack 4, Babel, expressJS and ReactJS.
All works fine but the ES6 piled bundle.js which was created with Webpack is not getting triggered in the final output.
I get the following error while loading the template.js:
GET http://localhost:8080/dist/bundle.js net::ERR_ABORTED 404 (Not Found)" error
I tried all bination of relative paths but still it is not working.
Please see my template.js code below:
export default () => {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MERN Tutorial</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="dist/bundle.js"/>
</html>`;
};
Please help me to rectify the issue.
Regards, Pradeep Selva.
Share Improve this question edited Dec 6, 2018 at 10:35 ssc-hrep3 16.1k8 gold badges51 silver badges96 bronze badges asked Dec 6, 2018 at 10:30 Pradeep SelvaPradeep Selva 311 silver badge2 bronze badges 5- This is HTML code, which can not be exported using JavaScript files. So, you need to dive little deeper to understand the file structure to start with React.js – Ashwamegh Commented Dec 6, 2018 at 10:34
- Hi Ashwanmegh, This works when bundled in Webpack. The title "MERN Tutorial" is displayed in the browser and the only thing is bundle.js is not getting called. It throws 404 whereas the file is present in the "dist" folder. – Pradeep Selva Commented Dec 6, 2018 at 10:51
-
I think this file is getting created in the
distfolder if I am not wrong. @Pradeep can you try changing the src to./bundle.js– Ashwamegh Commented Dec 6, 2018 at 10:57 - Yes the file is in dist folder. I tried but is not working. – Pradeep Selva Commented Dec 6, 2018 at 11:33
-
when you add the script tag in html: use this syntax:
<script type="module" src="/bundle.js"></script>– Ehsan Sarshar Commented Apr 25, 2019 at 6:24
2 Answers
Reset to default 4Had the same error as well when using React-Router properties. The problem was caused in my index.html where I load my main reference to my piled javascript file bundle.js.
I switched:
<script src="./bundle.js"></script>
to
<script src="/bundle.js"></script>
And it immediately solved the problem.
Thanks to this post for helping me figure it out!
This error could also be the result of using class names with letters that are not part of basic latin, for instance Ø.