Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Hello,
I have spent the better part of the day trying to figure out some of the many problems with the actual tutorial. I have made it to step 4 (build user interface with polaris / Add Shopify App Bridge. I already have a host of small bugs that I will try and summarise but I have now hit a wall and can go no further.
1st Problem)
in Steps 4.1.1 - 4.1.3 the next.config.js:
The original from the tutorial:
require("dotenv").config();
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
module.exports = withCSS({
The original needs to be changed to:
require("dotenv").config();
const webpack = require('webpack');
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
module.exports = {
__________________
Equally I needed to run:
npm install wedpack --save
If i did not do this, i always received
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
and the polaris CSS didnt work. Now The small mod eliminates the warning in my terminal but my css still doesnt work.
This is the same for the annotated-layout page.
I Do not know why but I had to add:
import {AppProvider, EmptyState, Layout, Page } from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';
to the beggining of my pages (.index and annotated..). This was not specified in the tutorial, but if I did not at this and then wrap the <page> </page> with <AppProvider...> </AppProvider> otherwise i got another error everytime i tried to load my app.
________________________
So now I am upto the part with the Add Shopify Bridge and I have done everything upto the title bar section,
import { EmptyState, Layout, Page } from '@shopify/polaris';
import { TitleBar } from '@shopify/app-bridge-react';
const img = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
const Index = () => (
<Page>
<TitleBar
title="Sample App"
primaryAction={{
content: 'Select products',
}}
/>
however adding the title bar makes it where the site doesnt load and I get 3 errors of this nature:
I suspect it has something to do with the <appprovider> wrappers in the index.js page. Either way, it has been a total mess and I have had no luck with this tutorial OR the Shopify CLI tutorial.
Is there an updated tutorial with upto date compatibilites? What have I done wrong in this setup? Is there a git repetoire where a proper scaffolding can be cloned? I know this is a bit scatter brained, but this tutorial has sent me to the 4 corners of stackoverflow, git, and this forum. The two tutorials for Node.JS & the Shopify CLI seem to be outdated or working with non-compatible dependancies.
Here is my package file for anyone wondering about version compatibilité (I weirdly had to uninstall react in order to install "@shopify/app-bridge-react": "^1.29.0")
{
"name": "mako_deep",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@shopify/app-bridge": "^1.29.0",
"@shopify/app-bridge-react": "^1.29.0",
"@shopify/koa-shopify-auth": "^3.2.0",
"@shopify/polaris": "^6.0.1",
"dotenv": "^8.2.0",
"isomorphic-fetch": "^3.0.0",
"koa": "^2.13.1",
"koa-session": "^6.1.0",
"next": "^10.0.6",
"polaris": "^1.2.1",
"react": "^16.14.0",
"react-dom": "^17.0.1"
},
"devDependencies": {
"eslint": "^7.19.0",
"eslint-plugin-react": "^7.22.0",
"webpack": "^5.21.2"
}
}
(
Hi @MAKO-Royce,
Sorry for the difficulty you experienced while going through our tutorial. Those docs were a bit dated, and using newer versions of some of the libraries in there caused stuff to break. That being said, we updated our libraries and updated the tutorials. I would also ask that you check out the Shopify CLI which quickly scaffolds an app for you.
Let me know if you have any concerns with the new tutorial.
Best,
Seth.
syf_ | Developer Support @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog