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 · 4 comments

Comments

Projects
None yet
4 participants
@jamesknelson
Copy link

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

This comment has been minimized.

Copy link

eckdanny-osi commented Oct 27, 2018

Related #5149

@kentcdodds

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor

kentcdodds commented Nov 7, 2018

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

If you can help there that would be fantastic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment