Build a Shopify app with Node.js and React tutorial - i18n error

Highlighted
Tourist
3 0 2

Hi all:

New to Node.js and React. Been following the tutorial to build a shopify app and am getting stuck at implementing i18n. Getting this error and can't find anything via Google search:

 

MissingAppProviderError: No i18n was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.
at useI18n (C:\nodejs\sample-embedded-app3\node_modules\@shopify\polaris\index.js:488:11)
at WithAppProvider(PageInner) (C:\nodejs\sample-embedded-app3\node_modules\@shopify\polaris\index.js:8080:15)
at processChild (C:\nodejs\sample-embedded-app3\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\nodejs\sample-embedded-app3\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\nodejs\sample-embedded-app3\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\nodejs\sample-embedded-app3\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (C:\nodejs\sample-embedded-app3\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at render (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\render.js:83:16)
at Object.renderPage (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\render.js:419:16)
at Function.getInitialProps (C:\nodejs\sample-embedded-app3\.next\server\static\development\pages\_document.js:293:19)
at Object.loadGetInitialProps (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\lib\utils.js:59:29)
at Object.renderToHTML (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\render.js:423:36)
at async DevServer.renderToHTMLWithComponents (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\next-server.js:651:26)
at async DevServer.renderToHTML (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\next-server.js:798:28)
at async DevServer.renderToHTML (C:\nodejs\sample-embedded-app3\node_modules\next\dist\server\next-dev-server.js:19:539)
at async DevServer.render (C:\nodejs\sample-embedded-app3\node_modules\next\dist\next-server\server\next-server.js:540:22)

 

Any pointers are appreciated!

Thanks,

 

Gunter

 

2 Likes
Highlighted
Shopify Partner
2 0 0

Just ran into this same error. Make sure you _app.js and index.js files are under the 'pages' directory

0 Likes
Highlighted
Tourist
3 0 2

Just checked and they are in that directory. Will run it again later this week to see if something changed. Thanks for the response.

0 Likes
Highlighted
New Member
1 0 1

Hello. 

 

Did you ever find a solution to this? I am running into the same issue.

1 Like
Highlighted
Tourist
3 0 2
No. Sorry.
0 Likes
Highlighted
New Member
1 0 0

I'm running into this issue too, still. I followed what they have on their Github as well. No luck....

https://github.com/Shopify/shopify-demo-app-node-react/blob/fetch-data-with-apollo-starter-files/pag...

 

Anyone find a solution yet?

0 Likes
Highlighted
New Member
1 0 0

Hello,

 

Have you looked into the docs about the AppProvider?

I solved this by wrapping the component with AppProvider and adding i18n. 

The shortest sample is this:

 

import React from 'react';
import ReactDOM from 'react-dom';
import {AppProvider} from '@shopify/polaris';
import enTranslations from '@shopify/polaris/locales/en.json';
import '@shopify/polaris/styles.css';

import App from './App';

function WrappedApp() {
  return (
    <AppProvider i18n={enTranslations}>
      <App />
    </AppProvider>
  );
}

ReactDOM.render(<WrappedApp />, document.getElementById('root'));

Although I'm new to this, use this at your own risk :) 

 

Best.

Mustafa.

0 Likes
Highlighted
New Member
1 0 0

Anyone got this working yet? No idea what else to try - tried enTranslations and it did not work.

 

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with...

 

when i get to pages section

 

Get the same error

 

 

 

0 Likes