Closed shawn-fetanat closed 2 years ago
abuuzayr
commented
2 years ago hey @shawn-fetanat thanks for raising this issue.
I believe this is due to having blitz installed via npm previously on your machine as well.
Can you share the output of this command: npm list -g | grep blitz ?
shawn-fetanat
commented
2 years ago Oh I ended up deleting that directory and creating a new one. Now when I run blitz new ./ it asks me whether I want to install via npm or yarn. I chose yarn and everything successfully installed/resolved. I have a question about something else now though. I don't know if it's something on my end but right after creating my project, without me doing anything else, I installed the styled-components recipe and then I ran the dev server with 'yarn run dev' and it says it can't find the babel plugin for styled-components. Is there additional configuration I need to do? I thought recipes took care of everything. Here are my console log...
fetan@DESKTOP-AO95IN6 MINGW64 /c/SF.Code/blitz-template
$ yarn global add blitz
yarn global v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info @expo/ngrok-bin-darwin-arm64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-darwin-arm64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-darwin-arm64@2.3.40: The CPU architecture "x64" is incompatible with this module.
info @expo/ngrok-bin-darwin-x64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-darwin-x64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-freebsd-ia32@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-freebsd-ia32@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-freebsd-ia32@2.3.40: The CPU architecture "x64" is incompatible with this module.
info @expo/ngrok-bin-freebsd-x64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-freebsd-x64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-linux-arm@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-linux-arm@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-linux-arm@2.3.40: The CPU architecture "x64" is incompatible with this module.
info @expo/ngrok-bin-linux-arm64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-linux-arm64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-linux-arm64@2.3.40: The CPU architecture "x64" is incompatible with this module.
info @expo/ngrok-bin-linux-ia32@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-linux-ia32@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-linux-ia32@2.3.40: The CPU architecture "x64" is incompatible with this module.
info @expo/ngrok-bin-linux-x64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-linux-x64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-sunos-x64@2.3.40: The platform "win32" is incompatible with this module.
info "@expo/ngrok-bin-sunos-x64@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info @expo/ngrok-bin-win32-ia32@2.3.40: The CPU architecture "x64" is incompatible with this module.
info "@expo/ngrok-bin-win32-ia32@2.3.40" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "expo-cli > xdl > @expo/dev-server > @expo/metro-config > metro-react-native-babel-transformer@0.59.0" has unmet peer dependency "@babel/core@*".
warning "blitz > @blitzjs/core > next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "blitz > @testing-library/react@11.2.5" has unmet peer dependency "react@*".
warning "blitz > @testing-library/react@11.2.5" has unmet peer dependency "react-dom@*".
warning "blitz > @testing-library/react-hooks@4.0.1" has unmet peer dependency "react@>=16.9.0".
warning "blitz > react-test-renderer@17.0.1" has unmet peer dependency "react@17.0.1".
warning "blitz > ts-jest@26.5.0" has unmet peer dependency "typescript@>=3.8 <5.0".
warning "blitz > @blitzjs/babel-preset > babel-plugin-superjson-next@0.3.0" has unmet peer dependency "next@>=9.0.0".
warning "blitz > @blitzjs/babel-preset > babel-plugin-superjson-next@0.3.0" has unmet peer dependency "superjson@1.x".
warning "blitz > @blitzjs/cli > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
warning "blitz > @blitzjs/generator > jscodeshift@0.11.0" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "blitz > eslint-config-blitz > @typescript-eslint/eslint-plugin@4.17.0" has unmet peer dependency "@typescript-eslint/parser@^4.0.0".
warning "blitz > eslint-config-blitz > @typescript-eslint/eslint-plugin@4.17.0" has unmet peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
warning "blitz > eslint-config-blitz > eslint-config-next@11.1.2" has unmet peer dependency "eslint@^7.23.0".
warning "blitz > eslint-config-blitz > eslint-config-next@11.1.2" has unmet peer dependency "next@>=10.2.0".
warning "blitz > react-test-renderer > react-shallow-renderer@16.14.1" has unmet peer dependency "react@^16.0.0 || ^17.0.0".
warning "blitz > @blitzjs/cli > @blitzjs/installer > ink@3.0.8" has unmet peer dependency "react@>=16.8.0".
warning "blitz > @blitzjs/cli > @blitzjs/installer > ink-spinner@4.0.1" has unmet peer dependency "react@^16.8.2".
warning "blitz > @blitzjs/core > next > @next/react-dev-overlay@11.1.0" has unmet peer dependency "react@^17.0.2".
warning "blitz > @blitzjs/core > next > @next/react-dev-overlay@11.1.0" has unmet peer dependency "react-dom@^17.0.2".
warning "blitz > @blitzjs/core > next > null-loader@4.0.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "blitz > @blitzjs/core > next > react-query@3.21.1" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "blitz > @blitzjs/core > next > styled-jsx@4.0.0" has unmet peer dependency "react@>= 16.8.0 || 17.x.x || 18.x.x".
warning "blitz > @blitzjs/core > next > use-subscription@1.5.1" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "blitz > eslint-config-blitz > @typescript-eslint/eslint-plugin > @typescript-eslint/experimental-utils@4.17.0" has unmet peer dependency "eslint@*".
warning "blitz > eslint-config-blitz > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev
|| >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "blitz > eslint-config-blitz > eslint-config-next > @typescript-eslint/parser@4.31.1" has unmet peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
warning "blitz > eslint-config-blitz > eslint-config-next > eslint-import-resolver-typescript@2.5.0" has unmet peer dependency "eslint@*".
warning "blitz > eslint-config-blitz > eslint-config-next > eslint-plugin-import@2.24.2" has unmet peer dependency "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0".
warning "blitz > eslint-config-blitz > eslint-config-next > eslint-plugin-jsx-a11y@6.4.1" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7".
warning "blitz > eslint-config-blitz > eslint-config-next > eslint-plugin-react@7.25.2" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7".
warning "blitz > eslint-config-blitz > eslint-config-next > eslint-plugin-react-hooks@4.2.0" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0".
warning "blitz > @blitzjs/cli > @blitzjs/installer > ink > react-reconciler@0.24.0" has unmet peer dependency "react@^16.0.0".
[4/4] Building fresh packages...
success Installed "blitz@0.41.1" with binaries:
- blitz
Done in 8.07s.
fetan@DESKTOP-AO95IN6 MINGW64 /c/SF.Code/blitz-template
$ blitz new ./
✔ You have the latest Blitz version
√ Install dependencies? · yarn
√ Pick a form library (you can switch to something else later if you want) · React Final Form
Hang tight while we set up your new Blitz app!
CREATE .env
CREATE .env.local
CREATE .env.test.local
CREATE .eslintrc.js
CREATE README.md
CREATE app\api\.keep
CREATE app\auth\components\LoginForm.tsx
CREATE app\auth\components\SignupForm.tsx
CREATE app\auth\mutations\changePassword.ts
CREATE app\auth\mutations\forgotPassword.test.ts
CREATE app\auth\mutations\forgotPassword.ts
CREATE app\auth\mutations\login.ts
CREATE app\auth\mutations\logout.ts
CREATE app\auth\mutations\resetPassword.test.ts
CREATE app\auth\mutations\resetPassword.ts
CREATE app\auth\mutations\signup.ts
CREATE app\auth\pages\forgot-password.tsx
CREATE app\auth\pages\login.tsx
CREATE app\auth\pages\reset-password.tsx
CREATE app\auth\pages\signup.tsx
CREATE app\auth\validations.ts
CREATE app\core\components\Form.tsx
CREATE app\core\components\LabeledTextField.tsx
CREATE app\core\hooks\useCurrentUser.ts
CREATE app\core\layouts\Layout.tsx
CREATE app\pages\404.tsx
CREATE app\pages\_app.tsx
CREATE app\pages\_document.tsx
CREATE app\pages\index.test.tsx
CREATE app\pages\index.tsx
CREATE app\users\queries\getCurrentUser.ts
CREATE babel.config.js
CREATE blitz-env.d.ts
CREATE blitz.config.ts
CREATE db\index.ts
CREATE db\migrations\.keep
CREATE db\schema.prisma
CREATE db\seeds.ts
CREATE integrations\.keep
CREATE jest.config.ts
CREATE mailers\.keep
CREATE mailers\forgotPasswordMailer.ts
CREATE package.json
CREATE public\favicon.ico
CREATE public\logo.png
CREATE test\setup.ts
CREATE test\utils.tsx
CREATE tsconfig.json
CREATE types.ts
✔ Retrieving the freshest of dependencies
✔ Resolving packages
✔ Fetching packages
✔ Linking dependencies
✔ Building fresh packages
✔ Initializing SQLite database
✔ Committing your app
Your new Blitz app is ready! Next steps:
1. cd ./
2. blitz dev
✅ Installed 2 dependencies
✅ Successfully created utils\theme.ts
+–––––––––––––––––––––––––––––––––––––––––––––––––––––––––+
⎪ Add custom getInitialProps logic in Custom Document ⎪
+–––––––––––––––––––––––––––––––––––––––––––––––––––––––––+
We will add custom getInitialProps logic in _document. We need to do this so that styles are correctly rendered on the server side.
--- app/pages/_document.tsx
+++ app/pages/_document.tsx
@@ -1,23 +1,56 @@
-import {Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/} from 'blitz'
-
-class MyDocument extends Document {
- // Only uncomment if you need to customize this behaviour
- // static async getInitialProps(ctx: DocumentContext) {
- // const initialProps = await Document.getInitialProps(ctx)
- // return {...initialProps}
- // }
-
- render() {
- return (
- <Html lang="en">
- <DocumentHead />
- <body>
- <Main />
- <BlitzScript />
- </body>
- </Html>
- )
- }
-}
-
-export default MyDocument
+import {
+ DocumentContext,
+ Document,
+ Html,
+ DocumentHead,
+ Main,
+ BlitzScript /*DocumentContext*/,
+} from 'blitz';
+
+import { ServerStyleSheet } from "styled-components";
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx: DocumentContext) {
+ const sheet = new ServerStyleSheet();
+ const originalRenderPage = ctx.renderPage;
+
+ try {
+ ctx.renderPage = () => originalRenderPage({
+ enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+ });
+
+ const initialProps = await Document.getInitialProps(ctx);
+
+ return {
+ ...initialProps,
+
+ styles: <>
+ {initialProps.styles}
+ {sheet.getStyleElement()}
+ </>
+ };
+ } finally {
+ sheet.seal();
+ }
+ }
+
+ // Only uncomment if you need to customize this behaviour
+ // static async getInitialProps(ctx: DocumentContext) {
+ // const initialProps = await Document.getInitialProps(ctx)
+ // return {...initialProps}
+ // }
+
+ render() {
✅ Installed 2 dependencies
✅ Successfully created utils\theme.ts
✅ Modified file: app/pages/_document.tsx
+–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––+
⎪ Import required provider and wrap the root of the app with it ⎪
+–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––+
Additionally we supply ThemeProvider with a basic theme property and base global styles.
--- app/pages/_app.tsx
+++ app/pages/_app.tsx
@@ -1,40 +1,46 @@
-import {
- AppProps,
- ErrorBoundary,
- ErrorComponent,
- AuthenticationError,
- AuthorizationError,
- ErrorFallbackProps,
- useQueryErrorResetBoundary,
-} from "blitz"
-import LoginForm from "app/auth/components/LoginForm"
-
-export default function App({ Component, pageProps }: AppProps) {
- const getLayout = Component.getLayout || ((page) => page)
-
- return (
- <ErrorBoundary
- FallbackComponent={RootErrorFallback}
- onReset={useQueryErrorResetBoundary().reset}
- >
- {getLayout(<Component {...pageProps} />)}
- </ErrorBoundary>
- )
-}
-
-function RootErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
- if (error instanceof AuthenticationError) {
- return <LoginForm onSuccess={resetErrorBoundary} />
- } else if (error instanceof AuthorizationError) {
- return (
- <ErrorComponent
- statusCode={error.statusCode}
- title="Sorry, you are not authorized to access this"
- />
- )
- } else {
- return (
- <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />
- )
- }
-}
+import {
+ AppProps,
+ ErrorBoundary,
+ ErrorComponent,
+ AuthenticationError,
+ AuthorizationError,
+ ErrorFallbackProps,
+ useQueryErrorResetBoundary,
+} from "blitz"
+import LoginForm from "app/auth/components/LoginForm"
+
+import { ThemeProvider } from "styled-components";
+import { theme, GlobalStyle } from "utils/theme";
+
+export default function App({ Component, pageProps }: AppProps) {
+ const getLayout = Component.getLayout || ((page) => page)
+
+ return <>
+ <GlobalStyle />
+ <ThemeProvider theme={theme}>
+ <ErrorBoundary
+ FallbackComponent={RootErrorFallback}
+ onReset={useQueryErrorResetBoundary().reset}
+ >
+ {getLayout(<Component {...pageProps} />)}
+ </ErrorBoundary>
+ </ThemeProvider>
+ </>;
+}
+
+function RootErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
+ if (error instanceof AuthenticationError) {
+ return <LoginForm onSuccess={resetErrorBoundary} />
+ } else if (error instanceof AuthorizationError) {
+ return (
+ <ErrorComponent
✅ Installed 2 dependencies
✅ Successfully created utils\theme.ts
✅ Modified file: app/pages/_document.tsx
✅ Modified file: app/pages/_app.tsx
+–––––––––––––––––––––––––––––––––+
⎪ Add Babel plugin and preset ⎪
+–––––––––––––––––––––––––––––––––+
Update the Babel configuration to use Styled Component's SSR plugin.
--- babel.config.js
+++ babel.config.js
@@ -1,4 +1,6 @@
✅ Installed 2 dependencies
✅ Successfully created utils\theme.ts
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from C:\SF.Code\blitz-template\.env.local
info - Loaded env from C:\SF.Code\blitz-template\.env
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Using external babel configuration from C:\SF.Code\blitz-template\babel.config.js
error - ./app/pages/_app.tsx
Error: Cannot find module 'babel-plugin-styled-components'
Require stack:
- C:\SF.Code\blitz-template\node_modules\next\dist\compiled\babel\bundle.js
- C:\SF.Code\blitz-template\node_modules\next\dist\compiled\babel\code-frame.js
- C:\SF.Code\blitz-template\node_modules\next\dist\build\webpack-config.js
- C:\SF.Code\blitz-template\node_modules\next\dist\server\dev\hot-reloader.js
- C:\SF.Code\blitz-template\node_modules\next\dist\server\dev\next-dev-server.js
- C:\SF.Code\blitz-template\node_modules\next\dist\server\next.js
- C:\SF.Code\blitz-template\node_modules\next\dist\server\lib\start-server.js
- C:\SF.Code\blitz-template\node_modules\next\dist\cli\next-dev.js
- C:\SF.Code\blitz-template\node_modules\next\dist\bin\next
at Array.map (<anonymous>)
flybayer
commented
2 years ago @shawn-fetanat is babel-plugin-styled-components listed in your package.json?
shawn-fetanat
commented
2 years ago No I don't see it not in my package.json
"dependencies": {
"@prisma/client": "3.2.1",
"blitz": "0.41.1",
"react-dom": "alpha",
"react": "alpha",
"zod": "3.9.8",
"final-form": "4.20.4",
"react-final-form": "6.5.7"
},
"devDependencies": {
"@types/preview-email": "2.0.1",
"@types/react": "17.0.30",
"eslint": "7.32.0",
"husky": "6.0.0",
"lint-staged": "10.5.4",
"prettier-plugin-prisma": "0.15.0",
"prettier": "2.4.1",
"pretty-quick": "3.1.1",
"preview-email": "3.0.5",
"prisma": "3.2.1",
"typescript": "~4.3"
},@shawn-fetanat ok then recipe installation failed somehow. It should be in there. Should have installed these deps: https://github.com/blitz-js/blitz/blob/canary/recipes/styled-components/index.ts#L51-L52
I installed blitz with
yarn global add blitz@latestand after it finished installing it saidsuccess installed blitz@0.41.1. Then I ranblitz new myBlitzTemplateand then it says"your global version of blitz is outdated". That doesn't make any sense. It just said I successfully finished installing the latest version which isblitz@0.41.1. I'm confused am I doing something wrong here. I triedyarn global add blitz@0.41.1and it still does the same thing. Here I copy and pasted console logs so you can check out exactly what went down...