howtographql + React tutorial : Error: Cannot find module './generated/prisma.graphql' - reactjs

I'm following the howtographql + React tutorial right now. I'm currently at the beginning of the tutorial when I have to define my queries, mutation and stuff in my schema.graphql. But according to the tutorial, I have to import prisma.graphql from the generatedfolder by writing the following line :
# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"
I indeed generated the serverfolder which contains everything except this file that is supposed to be generated as well I guess.
Apparently, I should be able to run the server using yarn startbut when I'm doing so, I have this message :
Error: Cannot find module './generated/prisma.graphql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at resolveFileName (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:43:9)
at module.exports (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:46:41)
at resolveModuleFilePath (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:150:24)
at /Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:187:30
at Array.forEach (<anonymous>)
at collectDefinitions (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:185:16)
at Object.importSchema (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:73:14)
at mergeTypeDefs (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-yoga/dist/index.js:412:37)
I don't understand what I'm doing wrong...
Do you guys have any idea ?

Related

CssSyntaxError - unknown word in Tailwind and Next.js project

10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.

TypeError: Cannot read property 'twoArgumentPooler' of undefined

Recently we have upgraded the react-native-web package to latest version 0.17.0 From that time we are getting the issue TypeError: Cannot read property 'twoArgumentPooler' of undefined while running yarn test
To analyse this issue, gone through the code which is implemented by our developers but we didn't have anything like twoArgumentPooler but it's available in react-native-web package in the path
at Object.<anonymous> (node_modules/react-native-web/dist/cjs/exports/Touchable/BoundingDimensions.js:19:46)
How to resolve this issue
Can you show your jest config file? I had a similar issue and it turned out that I was (manually) setting up the moduleNameMapper incorrectly. I had the following:
moduleNameMapper: {
'react-native': 'react-native-web',
},
which, upon running the tests, effectively invalidated an import on line 10 inside react-native-web/dist/exports/Touchable/BoundingDimensions.js (the file mentioned in your stacktrace) and surely a lot of other imports.
This
import PooledClass from '../../vendor/react-native/PooledClass';
var twoArgumentPooler = PooledClass.twoArgumentPooler;
turned into this (notice the changed and incorrect path)
import PooledClass from '../../vendor/react-native-web/PooledClass';
var twoArgumentPooler = PooledClass.twoArgumentPooler;
This ultimately resulted in the exact same error as you got, and was resolved by correctly defining the remapper entry like this:
moduleNameMapper: {
'^react-native$': 'react-native-web',
},
Hope it helps! If nothing else, perhaps this will help someone in the future!

'ReferenceError: cptable is not defined' when running Jest tests, the actual code to generate the excel sheet works fine

The stack trace is as follows.
Test suite failed to run
ReferenceError: cptable is not defined
1 | import React, { Component } from 'react';
> 2 | import ReactExport from 'react-export-excel';
| ^
at cptable (node_modules/react-export-excel/node_modules/xlsx/xlsx.js:10:37)
at Object.<anonymous> (node_modules/react-export-excel/node_modules/xlsx/xlsx.js:6:1)
at Object.require (node_modules/react-export-excel/dist/ExcelPlugin/components/ExcelFile.js:19:13)
at Object.require (node_modules/react-export-excel/dist/index.js:7:18)
at Object.<anonymous> (components/CustomReport.jsx:2:1)
If i follow the trace, it reaches the following code section
at cptable (node_modules/react-export-excel/node_modules/xlsx/xlsx.js:10:37)
if(typeof cptable === 'undefined') cptable = require('./dist/cpexcel');
I've seen github issues where they suggest to remove "use strict" from component code but I'm not even using it. Here is the related issue https://github.com/SheetJS/sheetjs/issues/324
Well, this library didn't help so went with another one.
react-html-table-to-excel
Here, you need to create a html table and then that table gets converted to excel. I hid the table using CSS so that i only get the export excel button.

React "Module Not Found" when loading a local image

I am trying to load an image using React using the following code:
const DogImage = require("../../public/dog.jpg");
console.log(DogImage);
...
<img src={DogImage} width="100px"/>
but I am getting the error:
the console log statement gives:
Please let me know if you have any suggestions or if I can provide more info!
EDIT: The file listed in the console.log (dist/8ce0...) exists when built
The path is going into the default property, which is a special property used by the import syntax. Try:
import DogImage from '../../public/dog.jpg';
OR
const DogImage = require('../../public/dog.jpg').default;
Anything else would require digging into the webpack config.

Android Manifest merger error in Codename One

In a bare bones project, I added these build hints:
android.gradleDep=compile 'com.erikagtierrez.multiple_media_picker:multiple-media-picker:1.0.5'
android.min_sdk_version=23
I would like to import the following Android library to make a CN1Lib (that requires at least Android SDK 23):
https://github.com/erikagtierrez/multiple-media-picker
To be short: I spent one day trying to import that, I also experimented with Android Studio and with suggestions found on Stack Overflow (trying to make a custom .aar), without success.
Could you help me to import that library? There is manifest merger error.
In fact, the issue reported by the build server is:
* What went wrong:
Execution failed for task ':processReleaseManifest'.
> Manifest merger failed : Attribute application#label value=(BareBones) from AndroidManifest.xml:15:17-42
is also present at [com.erikagtierrez.multiple_media_picker:multiple-media-picker:1.0.5] AndroidManifest.xml:23:9-41 value=(#string/app_name).
Suggestion: add 'tools:replace="android:label"' to <application> element at AndroidManifest.xml:15:3-43:103 to override.
I also tried to add the build hint:
android.xapplication_attr=tools:replace="android:label"
as suggested by the previous error, without success.
In the last case, I get:
Merging result: ERROR
/tmp/build1659178556337293135xxx/Test/src/main/AndroidManifest.xml:15:3-43:103 Error:
tools:replace specified at line:15 for attribute android:label, but no new value specified
/tmp/build1659178556337293135xxx/Test/src/main/AndroidManifest.xml Error:
Validation failed, exiting
-- Merging decision tree log ---
The last full log is here: https://gist.github.com/jsfan3/dd6c23f86a2ac949f996910c8cece62b
Thank you
This is happening because our code things you injected android:label on your own and doesn't inject it to avoid collision...
Change the code to this:
android.xapplication_attr=tools:replace="android:label" android:label="App Name"

Resources