react-email
react-email copied to clipboard
resendlabs
Dev command fails on fresh install
Unfortunately I freshly installed the library, following the "manual setup" tutorial exactly, and got the following error:
❯ yarn email dev
yarn run v1.22.17
$ /Users/sam/Developer/progression/progression-app/node_modules/.bin/email dev
✔ React Email files ready
✔ React email is up-to-date
⠋ Generating emails preview(node:25731) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead
(Use `node --trace-deprecation ...` to show where the warning was created)
✔ Emails preview generated
✔ Dependencies installed
warning package.json: "dependencies" has dependency "@types/classnames" with range "^2.3.1" that collides with a dependency in "devDependencies" of the same name with version "2.3.1"
warning package.json: "dependencies" has dependency "@types/react" with range "^17.0.9" that collides with a dependency in "devDependencies" of the same name with version "18.0.25"
warning package.json: "dependencies" has dependency "@types/react-dom" with range "^17.0.6" that collides with a dependency in "devDependencies" of the same name with version "18.0.9"
warning package.json: "dependencies" has dependency "postcss" with range "^8.3.0" that collides with a dependency in "devDependencies" of the same name with version "8.4.19"
warning package.json: "dependencies" has dependency "tailwindcss" with range "^2.2.7" that collides with a dependency in "devDependencies" of the same name with version "3.2.4"
warning package.json: "dependencies" has dependency "typescript" with range "^4.9.4" that collides with a dependency in "devDependencies" of the same name with version "4.9.3"
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: Next.js requires react >= 18.2.0 to be installed.
at Object.<anonymous> (/Users/sam/.react-email/node_modules/next/dist/build/webpack-config.js:1725:11)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/sam/.react-email/node_modules/next/dist/server/dev/hot-reloader.js:14:45)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
^C
I tried navigating to ~/.react-email/ and upgrading the versions of react and react-dom from 17.x to 18.x but this error persisted—I didn't debug any further.
The package.json from that directory looked like this:
❯ bat package.json | jq
{
"name": "react-email-preview",
"version": "0.0.4",
"description": "The React Email preview application",
"license": "MIT",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
"format": "prettier --write \"**/*.{ts,tsx,md}\""
},
"dependencies": {
"@next/font": "13.0.4",
"@radix-ui/colors": "0.1.8",
"@radix-ui/react-collapsible": "^0.0.16",
"@radix-ui/react-slot": "1.0.1",
"@radix-ui/react-toggle-group": "^0.0.9",
"@react-email/render": "0.0.2",
"classnames": "^2.3.1",
"next": "13.0.4",
"prism-react-renderer": "1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@babel/plugin-transform-runtime": "^7.18.9",
"@babel/preset-react": "^7.13.13",
"@babel/preset-typescript": "^7.13.0",
"@easy-eva-icons/react": "^1.0.2",
"@headwayapp/react-widget": "^0.0.4",
"@progression-team/design-system": "1.226.1",
"@radix-ui/react-accordion": "^1.0.1",
"@radix-ui/react-id": "^0.0.6",
"@radix-ui/react-popover": "^1.0.0",
"@radix-ui/react-progress": "^1.0.0",
"@remirror/pm": "^2.0.1",
"@remirror/react": "^2.0.18",
"@ridi/object-case-converter": "^2.0.4",
"@storybook/react": "^6.5.9",
"@types/classnames": "^2.3.1",
"@types/react": "^17.0.9",
"@types/react-dom": "^17.0.6",
"bootstrap": "4",
"cross-fetch": "^3.1.4",
"css-loader": "^5.2.6",
"css-minimizer-webpack-plugin": "^3.0.1",
"date-fns": "^2.22.1",
"date-fns-tz": "^1.3.7",
"deserialize-json-api": "^1.4.0",
"fork-ts-checker-webpack-plugin": "^6.2.10",
"framer-motion": "^4.1.17",
"merge-anything": "^5.0.2",
"mini-css-extract-plugin": "^1.6.0",
"mobx": "^6.6.2",
"mobx-react-lite": "^3.4.0",
"mobx-state-tree": "^5.1.6",
"modern-normalize": "^1.1.0",
"phosphor-react": "^1.4.1",
"pluralize": "^8.0.0",
"popper.js": "^1.16.1",
"postcss": "^8.3.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.2",
"postcss-loader": "^5.3.0",
"postcss-preset-env": "^6.7.0",
"qs": "^6.11.0",
"query-string": "^7.1.1",
"quill": "^1.3.7",
"react-color-palette": "^6.2.0",
"react-datepicker": "^4.8.0",
"react-day-picker": "^8.3.5",
"react-hot-toast": "^2.1.1",
"react-lazy-load-image-component": "^1.5.4",
"react-select": "^5.6.0",
"recharts": "^2.1.16",
"remirror": "^2.0.17",
"sass": "1.32",
"sass-loader": "^12.0.0",
"style-loader": "^3.3.0",
"svg-inline-loader": "^0.8.2",
"tailwindcss": "^2.2.7",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.9.4",
"webpack": "^5.11.0",
"webpack-cli": "^4",
"zod": "^3.15.1",
"zod-form-data": "^1.2.2"
},
"devDependencies": {
"@types/classnames": "2.3.1",
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.9",
"autoprefixer": "10.4.13",
"postcss": "8.4.19",
"tailwindcss": "3.2.4",
"typescript": "4.9.3"
}
}
I'll try to reproduce your error, I enjoyed testing using version 14.21.1 node js and it worked fine!
I believe you configured something wrong.
Gist example : https://gist.github.com/EmersonGarrido/41e3ab7edfa991ab908c6604461fb5dc
Yeah, not sure what to say I'm afraid this is an odd one! It does feel like the dev app should have the react versions upgraded but not sure why doing that manually didn't fix it.
FWIW I'm on node v17.4.0.
I don't believe I configured anything specifically? I added the dependency to my existing app and ran the dev command 🤔
This should be fixed now: https://github.com/resendlabs/react-email/pull/392
