I'm learning React. I'm trying to add a react FORM component from https://github.com/rjsf-team/react-jsonschema-form?fbclid=IwAR0HdGosg659-F0hdFp-milh29G_6UX5_qbti6lZBmo7OYKIxgThD5f1Ff8 to my dummy application. I used react json schema form documentation https://react-jsonschema-form.readthedocs.io/en/latest/#installation .
I have red Using React component from js source maps and react-jsonschema-form How to use it via cdn? which might be addressing similar problem. However, I am still struggling a lot.
I did:
npx create-react-app my-appcd my-app,npm install
My react version is
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"npm install @rjsf/core --save
My dummy App.js component:
import React from 'react';
import Form from "@rjsf/core";
function App() {
const Form = JSONSchemaForm.default;
const schema = {
type: "string"
};
return (
<div className="App">
<Form schema={schema} />
</div>
);
}
export default App;
I hit npm start and get error:
./src/App.js
Line 6:16: 'JSONSchemaForm' is not defined no-undef
From what I understand, webpack can't find JSONSchemaForm module (?) I tried adding cdn file from the documentation to index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<script src="https://unpkg.com/@rjsf/core/dist/react-jsonschema-form.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
It didn't help. Documentation says I should add a source map. However, I am not familiar with source maps. I red definition on mozilla MDN, but I don't know how to implement it. I am also not familiar with manually setting webpack configurations, nor require.js mentioned in this solution react-jsonschema-form How to use it via cdn? .
Question is - how likely is it that adding source map would solve the problem? Do in need to learn webpack? Do you see other reasons why I can't display Form component?
If adding source map would likely solve the problem, what webpack properties are essential to know in this case?
I'm a bit new to React as well, but here are my two cents on this -- when you already have imported
Formusingimport Form from "@rjsf/core";, I don't think you needconst Form = JSONSchemaForm.default;again. Just remove theconst Form = JSONSchemaForm.default;line and try again.