I tried to develop my first Shopify module but when i use React i have this error in my application page on the shop.
Here my index.js
import {Page} from "#shopify/polaris";
import {RessourcePicker} from "#shopify/app-bridge-react";
class Index extends React.Component{
state = {open: false}
render() {
return (
<Page
title="Product selector"
primaryAction={{
content:'Select products',
onAction: () => this.setState({open:true})
}}
>
<RessourcePicker
ressourceType='Product'
open={this.state.open}
/>
</Page>
)
}
}
export default Index;
Shopify allows its users to determine their own React version, hence Shopify wouldn't deploy React for you and lock you on a version you might not be interested in using. You can see how Shopify defines React as a peer-dependency so the responsibility of deploying and importing React is on the user.
I think that in your case, what you might be missing is deploying React as a dependency on your package.json, and import it as follows:
import React, { Component } from "react";
I ran into the same issue with their tutorial, I went in to the package.json and changed the dependency,
"react": "^16.9.0",
"react-dom": "^16.9.0"
Then I went to my terminal and installed react again:
npm install next react react-dom
now its working fine.
You do not need to add the import.
You should use
import React from "react";
To be safe from this type of errors. If any of your previously defined imports do import React import React will not work.
But I recommend it to just be safe
Related
I want to use reactDOM for injecting content to page. So, I want to
import React from 'react';
...
import App from './src/js/App';
const root=createRoot(document.getElementById('title'));
root.render(
<App/>
);
included into my background.js but I get the following
error: SyntaxError: Cannot use import statement outside a module
Import that is causing the error:
import React from 'react'
I've done some research and tried adding type: "module" but that does not work.
What can I do to solve this?
Facing pretty similar issues atm, digging SO for a while.
Try to play around with
import React from './react.js'; // path and file extension here
or
import * as React from './react.js'; // another import option
Also, ensure you have manifest v3 in order type: "module" to work.
After many research,
I did npm run eject
here is the working react setup
https://github.com/rba1aji/chrome-extension-template-react
I'd like to try out some of the new Concurrent Mode features in React 18. The official documentation, as well as several articles, claim that you just need to install react#experimental react-dom#experimental. I have done so but I am met with the following error:
Property 'unstable_createRoot' does not exist on type 'typeof import("C:/my-app/node_modules/#types/react-dom/index")'. TS2339
> 10 | ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
| ^
This is my trying to add this import to an existing project that is already working, not a new project from scratch
EDIT2: Here is my code:
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
That's a Typescript error/warning. (If you are not using Typescript, it's your editor using it behind the scenes.)
Your #types/react package doesn't have the unreleased experimental function you're trying to use.
See the comments in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/experimental.d.ts#L2 to see how to bring the experimental bits into scope.
It seems like I followed all the necessary in the documentation but it keeps giving a 404 Error: "There isn't a GitHub pages here" when I go into https://juliesong.me.
I got my custom domain through GoDaddy and configured the DNS like so:
Then I changed my package.json file to have
"homepage": "https://www.juliesong.me",
Added a CNAME file in the root directory containing
www.juliesong.me
And lastly went into settings in GitHub pages:
I searched my issue up and a lot of people said it might have to do with the React Router, so I edited to include a basename:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter as Router } from "react-router-dom";
import * as serviceWorker from './serviceWorker';
const routing = (
<Router basename={process.env.PUBLIC_URL}>
<App />
</Router>
);
ReactDOM.render(routing, document.getElementById('root'));
This is my App.js:
import React, { Component } from 'react';
import {Route} from 'react-router-dom';
import { withRouter } from 'react-router'
import { GlobalStyles, } from "./util/GlobalStyles";
import Home from './containers/Home'
class App extends Component {
render() {
const home = () => <Home />
return (
<main>
<GlobalStyles />
<React.Fragment>
<Route exact path="/" component={home} />
</React.Fragment>
</main>
);
}
}
export default withRouter(App);
If anyone could help on this issue, that would be great:)
Try this one
add new file named .htaccess in your build folder
example of file
and add this code into your .htaccess file
the code
Unless you share how you are generating the build and pushing it to GitHub Pages, it is very difficult to identify the cause of this issue.
Still let me share a general way you would deploy a react app in GitHub pages.
You don't need to add basename in your router
Good thing is you are using HashRouter instead of BrowserRouter, because GitHub pages doesn't support history api like normal browser, it will look for a specific file in given path
To deploy your app you need to run the following command in same order -
npm run build # this will generate a build folder
gh-pages -d build # this will publish the build folder to GitHub pages
This is very important that you publish the build folder, because
its contains the index.html file, which GitHub will point.
You can read more about deploying react app to GitHub Pages here
React-app out of the box is client-server application, and you should compile it first to html + client side js before deploying.
There are lots of good docs: create-react-app.dev, medium.com and the shortest way here
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Firebase from 'firebase';
class App extends Component {
render() {
return (
<View>
<Text>App</Text>
</View>
)
}
}
export default App;
So this code is crashing because of the import Firebase from 'firebase' I used 'npm install --save firebase' and I did 'npm link firebase' and firebase is in package.json, but that import is still crashing it. Anyone know why? I saw some people just created a variable for firebase, but it does this for all imports and I also need to add a google sign in import, which also crashed my app.
Configure firebase before running the app. Check the following link to configure firebase in Android or iOS.
https://rnfirebase.io/docs/v4.2.x/installation/android
https://rnfirebase.io/docs/v4.2.x/installation/ios
i'm looking for a way to integrate grommet framework to a react app created with the cli.
I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss
For Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.
Here is an example using grommet and grommet-css
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}