Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

React Context breaks after build #1603

Closed
ROODAY opened this issue Aug 5, 2020 · 1 comment
Closed

React Context breaks after build #1603

ROODAY opened this issue Aug 5, 2020 · 1 comment

Comments

@ROODAY
Copy link

ROODAY commented Aug 5, 2020

  • What version of Neutrino are you using? ^9.3.0
  • Are you trying to use any presets? If so, which ones, and what versions? "@neutrinojs/react-components": "^9.3.0"
  • Are you using the Yarn client or the npm client? What version? Yarn 1.22.4
  • What version of Node.js are you using? v12.16.1
  • What operating system are you using? Windows 10
  • What did you do? Used React Context in my component library and exported the context for use inside other projects
  • What did you expect to happen? Context would work normally, updating the consumer when provider value changes
  • What actually happened, contrary to your expectations? Context only works within the component library. Using it after importing it into another project doesn't work, as the context never updates.

After a couple days of googling, I believe the issue is related to webpack. The code in question used to be inside my project, I recently moved it into a second repo to be used as a component library and I picked Neutrino.js as it seemed fairly straightforward. However, it seems that after running yarn build and trying to import from the built files, the imported context doesn't work. I found this question on StackOverflow and tried implementing it like so in my .neutrinorc.js:

const reactComponents = require('@neutrinojs/react-components');

module.exports = {
  use: [reactComponents(),
  (neutrino) => {
     neutrino.config.output.library("upe-react-components");
     neutrino.config.output.libraryTarget("umd");
     neutrino.config.mode("development");
    }],
};

But it still won't work. Could someone help me debug this?

Related to this issue.

@ROODAY
Copy link
Author

ROODAY commented Aug 5, 2020

I found a workaround by following this answer, however it ends up not being very elegant. Basically I have to import/re-export all my components through a single index.js file, meaning I can't do imports like

import Layout, {setBaseLayout} from "my-library/Layout"

and instead have to do


import {Layout, setBaseLayout} from "my-library"

which isn't very clean. Is there any way around this?

@edmorley edmorley closed this as completed Feb 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

2 participants