I have a working yarn react project on a local machine.
yarn start
Works, yields a website that renders on the local host.
I have a server that was running the same project. However, I stopped the running website, and restarted with the following commands:
yarn install
yarn run build
yarn run prod
And I get the following error when accessing the website through chrome (on the production server):
Ucaught SyntaxError: Unexpected token <
What I am trying to do is diagnose where the problems could be arising. To summarize:
1) the project runs on the local machine (mac osx) with yarn start
2) I place the project on the linux box, install, build and run and everything seems to be sending to chrome; however, chrome yields this error
I am not sure where the problem could be. Localizing it to a set of possible problems would, I think, make it easy to solve (or ask better questions).
That error typically happens when you are getting a HTML page for a <script> tag src's address.
Open the URLs of the scripts each on a different tab (or check the network tab of the developer tools), those URLs are probably returning a 404 (or some other error code) and a HTML error page.
So your code tries to parse those HTML error pages as JavaScript code, thus yielding that error.
It gets Uncaught SyntaxError: Unexpected token < because it tries to parse the HTML content (e.g. <html> ...) as JavaScript code.
For a demo, run the snippet below and see the error at the console.
<script type=text/javascript src=https://stackoverflow.com></script>
Check the console: "Uncaught SyntaxError: Unexpected token <"
Related
I have a React app with webpack that is building and running fine in local. I am currently testing with a stripped down version that just renders a header text.
However, when I deploy through Jenkins to an S3 bucket, I am getting Uncaught SyntaxError: Invalid or unexpected token (at bundle.js:2:55245) in the console. No build errors in Jenkins that stand out to me, other than warnings that I also get when I build locally. The error also doesn't specify a spcific token
Any insights or advice on avenues to pursue?
I have used the React-Hot-Toast in my React application bootstrapped by Vite.
The website is running smoothly in the developing mode.
However, I encounter an error when I am building the site by npm run build.
[vite]: Rollup failed to resolve import "react-hot-toast" from "src/App.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`
I followed its suggestion to put the rollupOptions in the vite.config.js.
Though it was successfully built, the website in the preview mode crashed immediately.
And I have received the following error in the browser's console.
Uncaught TypeError: Failed to resolve module specifier "react-hot-toast". Relative references must start with either "/", "./", or "../".
I have no idea what I should be done or if I had made something wrong.
Since the website is widely applying react-hot-toast, I would love to see if the problem can be fixed without replacing the library.
Thanks in advance.
Whenever I deploy my heroku app with the create-react-app buildpack, the first time I try to access my domain, the page loaded is white and there is an error in the developer console saying
Uncaught SyntaxError: Unexpected token <
in the file main.6396d38a.js:1 which is generated by the react build. However, when I refresh the page, the website works perfectly fine. Is there a reason this could be happening? I tried to replicate the error on my localhost using npm run build, and serve -s build but my website works perfectly fine there. Why would this only show up once after every react deploy to heroku?
My package.json has a homepage associated with the domain name of my website (not .herokuapp.com)
"homepage": "https://www.example.com/"
Inside your package.json make sure your homepage URL is correct:
"homepage": "https://app.herokuapp.com/"
Update
Further investigation shows this was a caching issue. Clearing cookies, website content, and DNS fixed the issue.
I'm using Next.js with styledcomponent, It gets no error in Dev mode. but while running in Build production mode. I get an error. without line number or file name.
I have also opened an issue Github
https://github.com/zeit/next.js/issues/5932
ERROR
NODE_ENV=production node server.js
Ready on http://localhost:3000
Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/src/utils/errors.md#1 for more information. Additional arguments: undefined
at new StyledComponentsError (/Users/rahulkishan/Documents/React_Mobile_and_web/ReactWebV1/purchaseweb/node_modules/styled-components/dist/styled-components.cjs.js:161:58)
at constructWithOptions (/Users/rahulkishan/Documents/React_Mobile_and_web/ReactWebV1/purchaseweb/node_modules/styled-components/dist/styled-components.cjs.js:2182:13)
at styled (/Users/rahulkishan/Documents/React_Mobile_and_web/ReactWebV1/purchaseweb/node_modules/styled-components/dist/styled-components.cjs.js:2126:12)
at Object. (/Users/rahulkishan/Documents/React_Mobile_and_web/ReactWebV1/purchaseweb/.next/server/static/i2aIDkRZkhvVhtPxvk4BE/pages/index.js:4504:77)
Why it shows this error in Build mode only. Not in dev mode.
We have built a large app.
It is really difficult to find the problem.
Error has its path
static/../pages/index.js
And line number as well
After giving npm run build
Nexts js creates a build folder as
/.next/server/static
Inside that folder you will be able to see the complete production code.
So I have managed to install Respond CMS v4 on my hosting server, or so I think.
When I go to http://app.bedreweb.com nothing shows up.
Viewing the debugger in Chrome, reveals it is failing with angular
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=respond&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
I have run composer, and have my db and everything else in place.
Any help please.
Fixed, by replacing all the respond files with that of the v4 branch on github, instead of using the Master branch.