After deploying to gcloud server, I would received an error of "unexpected token u in JSON at position 0".
Which happens in
N=JSON.parse(window.__NEXT_DATA__.dataManager)
in /build/static/runtime/main.js.
And here is my next.config.js
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: "url-loader",
}
Which I am not sure if that caused the issue.
I ended up deleting this part, and the website does run properly, however, other issues came out after failing to parse the __NEXT__DATA.dataManager.
I am hoping to know a proper and permanent way of solving this issue.
Related
I'm trying to test visual aspects of a react component, when rendering my component in a test my tests fail due to an "unexpected token export" that I believe is coming from firebase.
I don't wish to test firebase, though it is preventing my tests from running.
I'm getting the below error:
/Users/me/Desktop/Projects/Personal/myapp/node_modules/firebase/database/dist/index.esm.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from '#firebase/database';
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import { update, ref, get } from 'firebase/database';
If possible - I would simply like to "ignore" firebase, so I can test my component.
Any help would be great - I've scoured the internet for the last few hours and nothing seems to work, so I think I'm looking in the wrong places.
Thanks
Add folder path in the "jest" object in your package.json file
"testPathIgnorePatterns": ["src/firebase" or "dist/src/firebase"]
Read more here
I deployed my website that uses React and Django. It works fine, but only with Django part. When I try to go to any react path, it simply shows the blank page(which is from build folder).
In the console I see three errors
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
Manifest: Line: 1, column: 1, Unexpected token.
Why is that? I have no idea what to do.
My deployed website: https://oridal.herokuapp.com/
If you need more code, feel free to ask for one
Ok, I was not able to understand the cause of my problem.
But I decided to do it another way, so I just took already existing application that works on React and Django, then I cloned it and started to copy and paste my own files to this new application.
Here is the link to the GitHub repository of this application.
I hope, it'll help.
I'm trying server-side rendering for the first time, and I'm stuck simply trying to get Node to run my server file without throwing an error on <App />:
<div id="root">${ReactDOMServer.renderToString(<App />)}</div>
SyntaxError: Unexpected token <
The only help I've been able to glean from google searches brings up outdated or seemingly bad advice (ex: using babel-node, which is too heavy for production). Can anyone take a peak at my code and give me some suggestions?
https://github.com/gigamesh/aud.io/tree/temporary-demo
In file server.js, why is the babel-register plugin commented out?
It is supposed to handle exactly this issue.
Try uncommenting it, and also add the .tsx extension, like so:
require("babel-register")({
extensions: [".tsx", ".es6", ".es", ".jsx", ".js"],
});
That should fix the problem.
BTW, you can try using the newer #babel/register.
I am just starting to dabble in react and one of the first components I want is something to use photoswipe.js. (react photoswipe) It looks like there is a pretty decent one on npm, but I am running into a problem. When I run my storybook to start testing and building my component, I get an error from babel. It says:
in ./~/react-photoswipe/lib/index.js
Module build failed: ReferenceError: [BABEL] C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\react-photoswipe\lib\index.js: Using removed Babel 5 option: C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\react-photoswipe\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
at Logger.error (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20)
at OptionManager.init (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\index.js:46:20)
at C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\fs-cache.js:79:18
at ReadFileContext.callback (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\fs-cache.js:15:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
So I did a bit of poking around and noticed that the babel rc file appears to be set to stage:0 which from my understanding seems like a really bad idea if you are producing a component that is supposed to be durable as the javascript spec updates and evolves.
I am still pretty new to using babel though so I am kind of having a hard time tracking down what I would need to update for this component to get it working in my environment with the newer babel. Has anyone encountered this problem with this component before? Does anyone have any advice or tips on how to troubleshoot the bable transpile and track down what I need to update?
The .babelrc from react-photoswipe does not work with babel 6. But it doesn't need to, because main entry point of the module is lib/index.js, which contains the already transpiled code. You're trying to transpile it again, and it automatically applies the .babelrc closest to it.
You should exclude node_modules in your webpack config, for example:
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
It will not only fix your issue, but also reduce the build time.
Thanks Michael for getting me pointed in the right direction. I am testing and building a component using a react storybook tool that has a whitelist configuration that tells it what node modules not to run through the full build. I had to add react-photoswipe to that whitelist and it is now working... well starting to work, but this problem is taken care of.
Just updated react to 0.13.3 and now I get the following message in Chrome react developer tool: "waiting for roots to load...to reload the inspector" and a button saying "click here".
And if I click the button, same thing again.
FYI: I am using WebPack & webpack-dev-server.
Have you seen this?
This error is generally linked to modules not loading into the project correctly, but the cause of this when the react syntax is incorrect. Generally, it's a missing semicolon after return statements (easy to miss).
I've confirmed this using reacts tutorial, writing it out myself, seeing this error, then commenting mine out and replacing it with the script including example.js
Updating my loader worked:
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
Check your imports and exports of each of your component files. I had this same error because I forgot to export a component to my index.js file.