There were a few issues with the scripts in the Electron examples:
* `dist` and `pack-app` would fail without a `name` and `version` in `package.json`.
* `type-check` didn't work because there isn't a `tsconfig.json` at the root. It needs to look in the `electron-src` and `renderer` folders respectively.
`electron-builder` also needed to be updated in order to run on macOS 12.3+ (see https://github.com/electron-userland/electron-builder/issues/6606).
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.
![image](https://user-images.githubusercontent.com/13413409/129115266-80e00bf3-78aa-40be-bd0f-a18aaa448a68.png)
So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)
Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)
> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`
Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).
## Documentation / Examples
- [x] Make sure the linting passes
[With next 11 requiring react 17](https://nextjs.org/blog/next-11#upgrade-guide), most of the examples
need to be updated, so the following snippet updated all the examples to
a compatible react version.
```bash
cd examples/
fd -g 'package.json' | xargs sed -r -i 's/"react": ".*"/"react": "^17.0.2"/
fd -g 'package.json' | xargs sed -r -i 's/"react-dom": ".*"/"react-dom": "^17.0.2"/'
# exclude experimental react version
git checkout with-reason-relay/package.json
```
remove `alwaysStrict: true` rule from tsconfig.json in with-typescript example, because the rule is included in `strict: true` has been already written in tsconfig.json and other included rules such as `noImplicitAny: true` have not been written.
[tsconfig documentation link](https://www.typescriptlang.org/tsconfig#alwaysStrict)
## Documentation / Examples
- [x] Make sure the linting passes
1. updates the `.gitignore` for this example to ignore the temporary output folders. ( similar to #15783 )
2. change yarn run script to npm run script ( I don't like use yarn currently. )
- Changed script `start` to `dev` and improved it #18934 adding commando to transpile electron code;
- Added some folders into `.gitignore`;
- Updated react to avoid issues as #18916Fixes#18934
**What's the problem this PR addresses?**
A decent amount of the examples don't have a `name` field in `package.json` that matches their folder name, meaning they either lack a name or the names are duplicated.
I was testing Yarn 2 workspaces using the entire examples directory and needed to get rid of the duplicates.
**How did you fix it?**
Updated the names to match the names of their folders
It seems like the error occurs with `next export` when building the current example.
```
$ cd examples/with-electron-typescript
$ yarn && yarn build
Error occurred prerendering page "/detail". Read more: https://err.sh/next.js/prerender-error
Error: Error for page /detail: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export
Error: Export encountered errors on following paths:
/detail
at exportApp (/Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/node_modules/next/dist/export/index.js:22:1166)
error Command failed with exit code 1.
```
I changed routes to statically resolve pages generating from `pages/detail.tsx` and added `getStaticPaths` and `getStaticProps`. so then it will export as follows
```
yarn run v1.22.4
$ next build renderer && next export renderer
Creating an optimized production build...
Compiled successfully.
Automatically optimizing pages...
Page Size First Load JS
┌ ○ / 336 B 62.6 kB
├ ○ /404 2.54 kB 61.6 kB
├ ○ /about 338 B 62.6 kB
├ ● /detail/[id] 440 B 62.7 kB
├ ├ /detail/101
├ ├ /detail/102
├ ├ /detail/103
├ └ /detail/104
└ ● /initial-props 530 B 62.8 kB
+ First Load JS shared by all 59.1 kB
├ static/pages/_app.js 983 B
├ chunks/commons.9facbe.js 10.9 kB
├ chunks/framework.b76773.js 40.3 kB
├ runtime/main.800476.js 6.22 kB
└ runtime/webpack.c21266.js 746 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
> using build directory: /Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/renderer/.next
copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
launching 7 workers
Exporting (0/4)
Exporting (1/4)
Exporting (2/4)
Exporting (3/4)
Exporting (4/4)
Export successful
Done in 11.47s.
```
Related to [11014](https://github.com/vercel/next.js/issues/11014).
Removed getInitialProps in favor of getStaticProps and getServerSideProps. Refactored one of the components from class to functional. Removed redundant imports. Removed React.FC/FunctionComponent. Added two build files to gitignore.
Let me know if you want something to be changed.
* copy only compiled files into electron build for with-electron-typescript
* updated npm deps for with-electron-typescript
* copy only compiled files into electron build for with-electron
* updated npm deps for with-electron
Co-authored-by: JJ Kasper <jj@jjsweb.site>