search

fabien0102 / gatsby-starter

Gatsby 2.0 starter with typescript and many cools dev tools
386 stars 99 forks source link

Create branch for Gatsby v2 #72

Closed mrcne closed 6 years ago

mrcne commented 6 years ago

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

i001962 commented 6 years ago

@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!

mrcne commented 6 years ago

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.

i001962 commented 6 years ago

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.

mrcne commented 6 years ago

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.

i001962 commented 6 years ago

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.

mrcne commented 6 years ago

So I solved several build problems today:

  1. 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.

  2. createContext is not a function error: I updated react and now it works fine.

  3. It looks like onCreateWebpackConfig is not required anymore because it create production React builds. I removed whole "Temporary workaround" block and it works fine.

  4. 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

ghernando commented 6 years ago

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'.

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

i001962 commented 6 years ago

I ran this prior to getting the migrated project running.

npm install gatsby@next react react-dom

ghernando commented 6 years ago

@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!

mrcne commented 6 years ago

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.

fabien0102 commented 6 years ago

@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 :wink:

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 :wink:)

i001962 commented 6 years ago

@mpoiu branch next was just created.