Shopify React Next Cannot read property "/_app" of undefined - node.js

I am trying to setup an environment to develop a shopify theme, and I followed the tutorial found here:
https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris
But when I connected my server, the app, the store and so on, when I started integrating polaris, on build I started getting errors.
First I had an error about a missing module build-manifest.json and I found a suggestion somewhere on the forums to make a blank file with just {} in it in the .next/ directory and so I did.
Then it complained about react-loadable-manifest.json missing, and I did the same for it.
Both of these errors were being thrown from this piece of code:
server.use(async (ctx) => {
await handle(ctx.req, ctx.res); // <-- this line
ctx.respond = false;
ctx.res.statusCode = 200;
return;
});
And now I have the following errors:
error - ./node_modules/#shopify/polaris/dist/styles.css
TypeError: Cannot read property 'tapAsync' of undefined
TypeError: Cannot read property '/_app' of undefined
Thats the full stack, I dont see any "custom" code related to it:
error - ./node_modules/#shopify/polaris/dist/styles.css
TypeError: Cannot read property 'tapAsync' of undefined
TypeError: Cannot read property '/_app' of undefined
at getPageFiles (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\get-page-files.js:1:311)
at getDocumentFiles (C:\Users\Darkbound\Desktop\shopifyreact\server\.next\server\pages\_document.js:266:54)
at Head.render (C:\Users\Darkbound\Desktop\shopifyreact\server\.next\server\pages\_document.js:589:19)
at processChild (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
at resolve (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at renderToStaticMarkup (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:4314:27)
at renderDocument (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\render.js:3:715)
at renderToHTML (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\render.js:56:103)
at async C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:107:97
at async C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:100:142
at async DevServer.renderToHTMLWithComponents (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:132:387)
at async DevServer.renderErrorToHTML (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:134:327)
at async DevServer.render (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:72:236)
at async Object.fn (C:\Users\Darkbound\Desktop\shopifyreact\server\node_modules\next\dist\next-server\server\next-server.js:56:580)

I came across this issue when jumping next multiple dependencies versions at once. I was able to resolve it by removing the wrapped Container
https://github.com/vercel/next.js/blob/master/errors/app-container-deprecated.md

Related

Why is Fetch Undefined?

I am copying a code DIRECTLY from discord.js guide to send a direct message to myself (and only myself) through my bot.
module.exports = {
callback: async(client) => {
const user = await client.users.fetch('503965897203908609');
user.send('content');
}
}
here's the relevant code. and when I run the command, I get
TypeError: Cannot read properties of undefined (reading 'fetch')
WHY
Because your client.users is undefined, if we try to access a property on undefined it will throw an error.
as to why client.users is undefined, that would be something which requires more code to look at

fs.existsSync is not a function in Nuxt JS + Lowdb

What I need:
Read a local JSON file inside NuxtJS as the page loads. So I can parse it into a prop within <option> tag.
What I have:
Lowdb (installed as dependency — to read the JSON file) inside a component, with this code:
computed: {
resultFetchCamera: function() {
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json');
const db = low(adapter);
let value = db.get('Size').map('Name').value();
return value;
}
}
}
I got an error This dependency was not found: * fs in ./node_modules/lowdb/adapters/FileSync.js. Fixed with this solution. Which leads me to another error: TypeError: fs.existsSync is not a function. This solution helps out a bit but it also leads to other errors: TypeError: window.require is not a function and TypeError: FileSync is not a constructor. So, I undo the last solution and get back with the fs.existsSync error.
The question:
How to fix the fs.existsSync error (in a NuxtJS environment)?
Did I implement Lowdb to NuxtJS correctly?

TypeError: invNum.next is not a function

I have tried this code :
const invNum = require('invoice-number');
router.post('/checkout', async (req, res, next) => {
if (!req.session.cart) {
return res.redirect('/pos/');
}
var saleList = Sale.find().sort({ _id: -1 }).limit(1); // removed (err, data)=>{} to simply view it is working tested already
var settings = await Setting.find({}); // removed try and catch to simply view it is working tested already
var ticketNumber;
ticketNumber = !saleList ? invNum.next('0000000') : invNum.next(saleList.ticket_number);
var sale = new Sale({
ticket_number:ticketNumber,
cart: req.session.cart,
created_at: new Date()
});
sale.save((err, product) => {
createReceipt(settings, req.session.cart, "receipts/"+ticketNumber+".pdf");
req.session.cart = null;
res.redirect('/pos/');
});
});
I got this error:
TypeError: invNum.next is not a function
The problem is with invNum.next().
invNum.next() is a Node.js module to generate invoice number sequentially installed from npm.
Example:
invNum.next('2017/08/ABC001')
// => 2017/08/ABC002
I have tried already suggestions from previous stackoverflow posts by trying Promises or await async function in order to get this code to work. Hopefully, you can help or suggest something. Thank you.
There is a problem in version of invoice-number module. In the npm it is showing as 1.0.6 but in the GitHub repository it has 1.0.5 in the package.json file.
https://github.com/amindia/invoice-number.
I have tested this module by taking from Github repository and it's working fine.
Please take the source of this module from the given link it will works fine.
Seems to be some error in the module. I tried the below code snippet on RunKit
https://runkit.com/embed/ws2lv1y38mt4
var invNum = require('invoice-number')
try{
invNum.next('sdfsd1')
} catch(e){
console.log(e)
}
Getting the same error
I got this error:
TypeError: invNum.next is not a function UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch()
What is the output when you use the console.log on invNum?
Also use try catch and inside call invNum.next with await. Maybe something inside this function is throwing an error.
Edit: as jfriend00 says, if an plain text (like your "0000...") is working, probably the saleList is returning some error and you are not catching or treating the error.
Edit2: The last update on this NPM code is from 1 year ago and fewer people used this lib, probably is broken.
There is some part of the code from the index.js of the lib:
function _next (invoiceNumber) {
if (!invoiceNumber)
throw new Error('invoiceNumber cannot be empty')
var array = invoiceNumber.split(/[_/:\-;\\]+/)
var lastSegment = array.pop()
var priorSegment = invoiceNumber.substr(0, invoiceNumber.indexOf(lastSegment))
var nextNumber = alphaNumericIncrementer(lastSegment)
return priorSegment + nextNumber}
var api = { next: _next}
module.exports = api

TypeError: stream is undefined

Can't add a database connection to my small react app, i tried a bunch of npm modules: sqlite, sqlite3, realm. All fall back with type error:
TypeError: stream is undefined
i do absolutely nothing, just added a require statement in my component case that error:
import db from 'sqlite';
or:
var sqlite = require('sqlite3').verbose();
The last trace string:
(function (process){
module.exports = function (blocking) {
[process.stdout, process.stderr].forEach(function (stream) {
if (stream._handle && stream.isTTY && typeof stream._handle.setBlocking === 'function') {
stream._handle.setBlocking(blocking)
}
})
}
and real fails on building, with Error: Cannot find module 'AccessibilityInfo'
Your last trace points to the content of set-blocking npm module. Usually it is used by npmlog. It requires process.stderr and process.stdout to be present. In your case they aren't. If you are running the app in Electron that might be the case.
It probably means that you are attempting to run a nodejs library in the browser, and that will not work. You might be able to browserify the library.

Node-Webkit with external module containing native code

I'm using node-webkit with an external module called edge.
According to the node-webkit docs modules that contain native code must be recompiled using nw-gyp as oppose to node-gyp. I was able to recompile without error and node-webkit seems to import the module OK.
Heres my code. The code I'm trying to use:
var edge = require('edge.node');
var hello = edge.func(function () {/*
async (input) =>
{
return ".NET welcomes " + input.ToString();
}
*/});
hello('Node.js', function (error, result) {
if (error) throw error;
console.log(result);
});
Which throws the following error when run within node-webkit.
Uncaught TypeError: Object [object Object] has no method 'func'
If write the object out to console.log I can see:
Object {initializeClrFunc: function}
initializeClrFunc: function () { [native code] }
__proto__: Object
So the module seems to have loaded. If I run the same code outside of node-webkit, everything works perfectly and I can access the func function. This is driving me crazy - and any help would be really appreciated.
func method is provided by edge.js, the wrapper around edge.node native module. So you should replace require('edge.node') by require('edge').

Resources