Create branch for Gatsby v2

Question

Create branch for Gatsby v2

mrcne opened this issue 6 years ago · 12 comments

I started with migration to Gatsby v2 and thought about creating a pull request.
I don't think it's good idea to put it to master for now (since v2 is not released yet).

Can you please create a new branch (preferably called "next" or "v2"), so I could create pull request there?

Here's my code so far:
https://github.com/mpoiu/gatsby-starter/tree/next

Answer 1 · 2018-08-29T04:11:41.000Z

@mpoiu does your next branch build without errors? Gatsby develop worked for me but not the build. Thought I'd ask before diving to to see what's up. Looks like a webpackMissingModule related to !raw-loader!

Answer 2 · 2018-08-29T14:52:05.000Z

Unfortunately I also get this error when building:

⠁ Building static HTML for pages{ Error: Cannot find module '!raw-loader!../public/styles.css'
    at webpackMissingModule (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:26334:78)
    at Module../src/html.tsx (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:26334:185)
    at __webpack_require__ (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:30:30)
    at Module../.cache/static-entry.js (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:612:10)
    at __webpack_require__ (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:30:30)
    at /home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:94:18
    at /home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:97:10
    at webpackUniversalModuleDefinition (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:3:20)
    at Object.<anonymous> (/home/marcin/workspace/open-source/gatsby-starter/public/render-page.js:10:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18) code: 'MODULE_NOT_FOUND' }

For some reason file public/styles.css is not being generated.

Answer 3 · 2018-08-29T22:51:02.000Z

To get the build unblocked I did the following:

1 - gatsby-node.js comment out lines 20-30
// exports.onCreateWebpackConfig = ({config, stage}) => {
// if (stage === 'build-javascript') {
// config.loader('typescript', {
// test: /.tsx?$/,
// loaders: [
// babel-loader?${JSON.stringify({presets: ['babel-preset-env'], plugins: [extractQueryPlugin]})},
// 'ts-loader'
// ]
// });
// }
// };

2 - pages/blog.tsx edit line 90 to add props.
const { pathname } = props.location;

I haven't thoroughly tested this but thought I'd post it here for your consideration.

Answer 4 · 2018-08-30T06:57:03.000Z

Thank you. It really unblocks the build, but the error Cannot find module '!raw-loader!../public/styles.css' is still there. Lack of public/styles.css makes first load of homepage look pretty bad.

I wonder if we really need this "Temporary workaround to ensure Gatsby builds minified" anymore.
I will continue investigating.

Answer 5 · 2018-08-30T13:19:19.000Z

That’s strange. I didn’t notice the initial load problem you mention and will double check in a few hours.
UPDATE I see the first load issue you are referring too when running gatsby develop and agree it looks pretty bad- however the builds don't have that first load issue. ENDUPDATE

When I toggle off and on lines 20-30 in gatsby-node.js the raw-loader error goes away and the build gets passed the css/js step before failing on the html step due to blog.tsx (corrected by adding ‘props.’ To line 90). That’s why I didn’t head down the road of removing in-line css as directed here https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#remove-inlined-css-in-htmljs

I do get a precomitt error (husky?) but that’s me learning this toolset and being a git beginner.

Answer 6 · 2018-08-31T17:15:25.000Z

So I solved several build problems today:

Cannot find module '!raw-loader!../public/styles.css' error:
Gatsby v2 will inline styles even if html.tsx file is present, therefore I removed inlined styles.
Now the error is gone and first load looks good.
createContext is not a function error:
I updated react and now it works fine.
It looks like onCreateWebpackConfig is not required anymore because it create production React builds.
I removed whole "Temporary workaround" block and it works fine.
Precommit Git/Husky error:
Maybe in your case it was caused by extractQueryPlugin is assigned a value but never used.
It runs linter on staged files before commit:
https://github.com/okonet/lint-staged
I removed extractQueryPlugin const too.

I have pushed everything to my fork:
https://github.com/mpoiu/gatsby-starter/tree/next

Answer 7 · 2018-09-01T23:11:16.000Z

I tried to use the new "next" branch fork, but it fails for me on startup.
I took the code base as of Sept 1.
What's wrong?
I see:

gatsby develop

success delete html files from previous builds — 0.006 s
success open and validate gatsby-config.js — 0.004 s
success copy gatsby files — 0.032 s
success onPreBootstrap — 0.008 s
error UNHANDLED EXCEPTION

TypeError: Cannot destructure property createNodeField of 'undefined' or 'null'.

gatsby-node.js:15 Object.exports.onCreateNode
C:/Gatsby2/proj/gatsby-node.js:15:29
api-runner-node.js:104 runAPI
[proj]/[gatsby]/dist/utils/api-runner-node.js:104:36
api-runner-node.js:178
[proj]/[gatsby]/dist/utils/api-runner-node.js:178:33
map.js:27
[proj]/[gatsby]/[async]/internal/map.js:27:9
eachOfLimit.js:64 replenish
[proj]/[gatsby]/[async]/internal/eachOfLimit.js:64:17
eachOfLimit.js:49 iterateeCallback
[proj]/[gatsby]/[async]/internal/eachOfLimit.js:49:17
onlyOnce.js:12
[proj]/[gatsby]/[async]/internal/onlyOnce.js:12:16
map.js:29
[proj]/[gatsby]/[async]/internal/map.js:29:13
util.js:16 tryCatcher
[proj]/[bluebird]/js/release/util.js:16:23
nodeify.js:23 Promise.successAdapter
[proj]/[bluebird]/js/release/nodeify.js:23:30
promise.js:566 Promise._settlePromise
[proj]/[bluebird]/js/release/promise.js:566:21
promise.js:606 Promise._settlePromiseCtx
[proj]/[bluebird]/js/release/promise.js:606:10
async.js:138 Async._drainQueue
[proj]/[bluebird]/js/release/async.js:138:12
async.js:143 Async._drainQueues
[proj]/[bluebird]/js/release/async.js:143:10
async.js:17 Immediate.Async.drainQueues [as _onImmediate]
[proj]/[bluebird]/js/release/async.js:17:14

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter@1.0.0 start: gatsby develop
npm ERR! Exit status 1

Answer 8 · 2018-09-02T01:16:52.000Z

I ran this prior to getting the migrated project running.

npm install gatsby@next react react-dom

Answer 9 · 2018-09-02T02:42:45.000Z

@i001962
Thanks. That got me started.
I had thought that "npm install" would install everything from package.json.
After installing react there were more specific errors about other gatsby plugins that also needed to be installed.
After installing all those it started OK.
Thanks again!

Answer 10 · 2018-09-02T07:49:25.000Z

I have reproduced your error @ghernando and I think it was problem with package-lock.json.
It caused that I had to run npm install twice for it to install all dependencies.

I have committed new package-lock.json and initial install seems to work properly with it.

Answer 11 · 2018-09-02T13:13:02.000Z

@mpoiu Very good to have you in the project, I'm personally totally out of this project for now (time is missing and I don't use gatsby in my company ;) )

@i001962 I added you as collaborator, you seams ready for this and have already contribute to this starter. (This decision is totally arbitrary ^^)

If anyone else want to be collaborator, just ask me 😉

Very thank you to everybody to deal with this v2 migration, I hope I will have more time for this project in the future, since, I let you manage the baby 👍

(I'm of course always available for helping and review if needed 😉)

Answer 12 · 2018-09-03T00:53:39.000Z

@mpoiu branch next was just created.