Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Macro reloading #5580

Open
jamesknelson opened this issue Oct 26, 2018 · 21 comments
Open

Macro reloading #5580

jamesknelson opened this issue Oct 26, 2018 · 21 comments
Milestone

Comments

@jamesknelson
Copy link
Contributor

@jamesknelson jamesknelson commented Oct 26, 2018

Is this a bug report?

I'm not sure if this is a bug in create-react-app, a bug in my macro, or if this is the intended behavior.

Did you try recovering your dependencies?

This occurs in a fresh build using yarn version 1.9.4. I've tried with react-scripts 2.0.5 and 2.0.0

Environment

Environment Info:

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.77
Firefox: 62.0.3
Safari: 12.0
npmPackages:
react: ^16.6.0 => 16.6.0
react-dom: ^16.6.0 => 16.6.0
react-scripts: ^2.0.5 => 2.0.5
npmGlobalPackages:
create-react-app: 2.0.4

Steps to Reproduce

To make the changes from a fresh create-react-app install:

  1. yarn add mdx.macro (see the package source)
  2. Create a markdown document with some content in src/test.mdx
# Hello, world
  1. replace App.js with:
import { mdx, importMDX } from 'mdx.macro';
import React, { Component } from 'react';
const App = importMDX.sync('./test.mdx')
export default App;

Expected Behavior

  1. I'd expect the content to show up on initial load, instead of needing to refresh the page manually.
  2. According to #5078 and kentcdodds/babel-plugin-macros#83, I would have expected the macro to be re-called on each build, but this doesn't appear to happen unless I actually edit the App.js file that calls the macro.

Actual Behavior

  1. When the browser loads localhost:3000 after executing yarn start, it shows a blank page. Hit refresh and the content appears.
  2. When you edit the content of test.mdx, the page refreshes (as the macro adds an import for the test.mdx file). However, the macro is not called again, so the old content is displayed.

Reproducible Demo

https://github.com/jamesknelson/mdx-cra-demo

Thoughts

I'm pretty out of my depth here, but I don't think the babel cache is the problem. I've tried cleaning the cache manually (rm node_modules/.cache/babel-loader/*) and then editing the markdown file. When I do, the page reloads, but the cache directory stays empty.

I think it's webpack itself that's deciding not to pass the App.js file through any loaders.

The macro follows the pattern mentioned by @kentcdodds where it creates a temporary file and imports that. The generated file then imports the original MDX file so that webpack will notice changes and rebuild (but only in development mode -- don't worry).

Would love to hear any ideas for getting this working, as being able to use MDX files without ejecting would be 👌, but no refresh-on-change is a bit of a deal breaker.

@eckdanny-osi
Copy link

@eckdanny-osi eckdanny-osi commented Oct 27, 2018

Related #5149

@kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Nov 6, 2018

If we can figure out how to solve this I will be very happy. Unfortunately I cannot personally spare any time to work on this :-/

@jamesknelson
Copy link
Contributor Author

@jamesknelson jamesknelson commented Nov 7, 2018

@kentcdodds Do you have any hunches on where I'd need to look? I can put a bit of time into this, I'm just stuck on the best approach.

@kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Nov 7, 2018

This will be the real solution: babel/babel#8497

If you can help there that would be fantastic

@alamothe
Copy link

@alamothe alamothe commented Apr 13, 2019

Hello, is there any workaround?

Let's say I edit a graphql file, how would I force recompile?

@nagman
Copy link
Contributor

@nagman nagman commented Apr 25, 2019

Agree with @alamothe. It would be awesome to have hot reload with .graphql files.

@thapakazi
Copy link

@thapakazi thapakazi commented Nov 19, 2019

Guys, any workaround on this for newbies like me ??

@nik-lampe
Copy link

@nik-lampe nik-lampe commented Dec 17, 2019

As a workaround:
If you save the file where you import the graphl file, it will be reloaded. Just add a line somewhere and have prettier active. Using VS Code Prettier will remove the line anyway but saving the file will trigger the reload and this will also reload the graphql file.

Not nice, because you have to edit two files, but better than restarting the script :)

@peterp
Copy link

@peterp peterp commented Feb 1, 2020

@kentcdodds The caveats section in babel-plugin-macros docs seems to indicate that the babel cache problem isn't an issue in Create React App:

image

But, it seems that it might be? Or do you know if that paragraph is still accurate because I'm trying to find some inspiration for fixing this in our own development server.

@kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Feb 2, 2020

I think that's still correct because CRA doesn't cache any file that's using a macro. That doesn't mean that webpack will rebuild when you change a file that the macro is using, but it will rebuild if you change anything that's being watched.

Maybe we could make that more clear.

@martuanez
Copy link

@martuanez martuanez commented Mar 23, 2020

I think the ability to add file watchers based on file type is the minimum desirable funcionality, right?

@ClementParis016
Copy link

@ClementParis016 ClementParis016 commented May 10, 2020

I just lost a bunch of time because I wasn't realizing that loader('xxx.graphql') wasn't rebuilding when saving a .graphql file so I started to become crazy because code looked fine but my queries weren't matching 😅

Reading these comments, I don't really understand if this is fixable in some way? Otherwise should we at least update the "Loading .graphql Files" docs to point out the fact that using loader() doesn't rebuild as opposed to using gql?

@DenysVuika
Copy link

@DenysVuika DenysVuika commented Jun 18, 2020

2 years later, and the problem is still there :( I have to stop the CRA and run it again each time I change a line in the .mdx file, and this process is extremely annoying. Is there any way to make it more developer-friendly? any workarounds?

@patricknick
Copy link

@patricknick patricknick commented Jun 18, 2020

2 years later, and the problem is still there :( I have to stop the CRA and run it again each time I change a line in the .mdx file, and this process is extremely annoying. Is there any way to make it more developer-friendly? any workarounds?

did you try this? #5580 (comment) For me it's working most of the time and still better than restarting.

@DenysVuika
Copy link

@DenysVuika DenysVuika commented Jun 18, 2020

@patricknick I am not using graphql, it's not working with regular .mdx files.

@DennisMamedov
Copy link

@DennisMamedov DennisMamedov commented Jul 31, 2020

What is the current non-graphql workaround?

@sarfata
Copy link

@sarfata sarfata commented Jul 31, 2020

What is the current non-graphql workaround?

See #5580 (comment) - Reload the .ts[x] file that includes the .mdx (or anything).

@adueck
Copy link

@adueck adueck commented Aug 18, 2020

@DenysVuika you can use mdx-loader and I find it works great for me. Without ejecting and with very little setup you can use mdx files and have live reloading. 😄

Instructions here.

A sample repo here create-react-app-with-mdx.

@Larkenx
Copy link

@Larkenx Larkenx commented Sep 22, 2020

Once again, create-react-app really needs to get on par with Vue.js's configurability of webpack with exposed options and chaining for a myriad of use cases and issues - one of these being reloading on graphql file watcher changes.

@manuFL
Copy link

@manuFL manuFL commented Dec 10, 2020

Still no updates on this?

@arthurdayton116
Copy link

@arthurdayton116 arthurdayton116 commented Feb 14, 2021

As a workaround I used nodemon. nodemon --watch src start then drop this config in package.json "nodemonConfig": { "ignore": ["test/*", "docs/*"], "delay": "2500", "ext": "mdx" }, The ext part says watch mdx files. This at least automates restart on save and the refresh part I can live with.

chenaski added a commit to chenaski/react-apollo that referenced this issue May 2, 2021
Because changes in a .graphql files doesn't recompile app.
facebook/create-react-app#5580
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet