question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v 3.0.0 Unexpected token u in JSON (json parse undefined) when ../create/?someparams

See original GitHub issue

Steps to reproduce: #/resource/create?anyParams Unexpected token u in JSON at position 0 seems json is trying to parse undefined variable

Environment

  • React-admin version: 3.0.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mutewintercommented, Nov 26, 2019

I also just discovered another, seemingly more intended, way to do this:

https://github.com/marmelab/react-admin/blob/master/docs/CreateEdit.md#prefilling-a-create-record

Using state it’s possible to pass pre-filled data to create without using query params at all.

const AddNewCommentButton = ({ record }) => (
  <Button
    component={Link}
    to={{
      pathname: "/comments/create",
      state: { post_id: record.id },
    }}
    label="Add a comment"
  >
    <ChatBubbleIcon />
  </Button>
);
1reaction
fzaninottocommented, Nov 26, 2019

In 3.0, the way to pre-fill some fields in the create form is to pass a stringified object as the source URL parameter. That’s what the CloneButton does:

export const CloneButton = ({
    basePath = '',
    label = 'ra.action.clone',
    record = {},
    icon = <Queue />,
    ...rest
}) => (
    <Button
        component={Link}
        to={{
            pathname: `${basePath}/create`,
            search: stringify({ source: JSON.stringify(omitId(record)) }),
        }}
        label={label}
        onClick={stopPropagation}
        {...sanitizeRestProps(rest)}
    >
        {icon}
    </Button>
);

In v2, this feature didn’t use the fields of the source get parameter, but all the get parameters. This lead to hard to fix bugs like #3966.

The advanced tutorials were indeed written for v2. For v3, the right syntax should be:

const AddNewCommentButton = ({ record }) => (
  <Button
    component={Link}
    to={{
      pathname: "/comments/create",
-     search: `?post_id=${record.id}`,
+     search: `?source=${JSON.stringify({ post_id: record.id })}`,
    }}
    label="Add a comment"
  >
    <ChatBubbleIcon />
  </Button>
);

Sorry for not mentioning it in the UPGRADE guide - we figured that, since both the Create page and the CloneButton were changed at the same time, it was a backwards compatible change. We forgot that we had documented the inner workings of CloneButton in an advanced tutorial, which made it a public API.

So this is a breaking change, not a bug. I’ll document it in the Upgrade guide.

Also, there is indeed a small bug: useCreateController should not try to parse the search.source field if it’s not present. I’ll also fix it in a future PR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unexpected token u in JSON at position 0 Error in JS
The "Unexpected token u in JSON at position 0" error occurs when we pass an undefined value to the JSON.parse or $.parseJSON methods....
Read more >
How To Fix Unexpected token u in JSON at position 0 - Isotropic
When parsed, undefined is converted into u, which is then defined as the token in the error message of "Unexpected token u in...
Read more >
uncaught syntaxerror unexpected token U JSON
That error is normally seen when the value given to JSON.parse is actually undefined . So, I would check the code that is...
Read more >
Unexpected token u in JSON at position 0 - ItsJavaScript
The Unexpected token u in JSON at position 0 mainly occurs if we pass an undefined value to JSON.parse() method or $.parseJSON() method....
Read more >
What Is JSON and How to Handle an “Unexpected Token” Error
Learn what JSON is and how you can deal with errors occurring when parsing JSON data, such as "Unexpected Token < in JSON...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found