question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: does brunch support conditional require ? (use case in react@15.4 above)

See original GitHub issue

Description

What’s the essence of the issue?

➸ brunch --version
2.9.1

Expected behavior

Tell us what you think should happend.

support latest react:

  "dependencies": {
    "material-ui": "^0.16.5",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.1",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "babel-brunch": "~6.0.0",
    "babel-preset-es2015": "~6.9.0",
    "babel-preset-react": "~6.11.1",
    "brunch": "^2.4.0",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "^2.0.0",
    "javascript-brunch": "^2.0.0",
    "uglify-js-brunch": "^2.0.0"
  }

Actual behavior

Tell us what actually happens.

I met a same issue as this one: error in browser console: but his solution of remove node_modules/ and re-compile doesn’t resolve problem here; it is always reproduce

Uncaught Error: Cannot find module 'react-dom/lib/ReactPerf' from 'react/lib/ReactAddonsDOMDependencies.js'

http://stackoverflow.com/questions/40953011/browser-console-error-cannot-find-module-react-dom-lib-reactperf-from-react

If at all possible, please create a small demo app on GitHub that demonstrates the issue so it’s easier for us to check and debug.

brunch new -s react; npm install --save react@latest react-dom@latest material-ui ...

the default empty template compiles and runs fine; but once I added the first button, the ui reload failed with above error in console

Environment

  1. Brunch: 2.9.1
  2. Node: 6.9.2
  3. NPM: (npm v2 is not supported)
  4. Operating system: Linux

package.json contents

{
  "name": "your-app",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "start": "brunch watch --server -P 3334",
    "prod": "brunch build --production"
  },
  "dependencies": {
    "material-ui": "^0.16.5",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.1",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "babel-brunch": "~6.0.0",
    "babel-preset-es2015": "~6.9.0",
    "babel-preset-react": "~6.11.1",
    "brunch": "^2.4.0",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "^2.0.0",
    "javascript-brunch": "^2.0.0",
    "uglify-js-brunch": "^2.0.0"
  }
}

brunch config contents

the default from template:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

Other useful files, when present (log, bower.json etc.)

I suspect the problem is in brunch because I checked the transpiled public/vendor.js file, I can see the module 'react/lib/ReactAddonsDOMDependencies.js' is registered but I am not seeing the module 'react-dom/lib/ReactPerf' registered,

we can see the file content here: require('react-dom/lib/ReactPerf') is conditionally loaded when not in production mode, which is needed during development, so question here is does brunch support this kind of conditionally loading a module? if so, what changes in brunch-config is required?

https://unpkg.com/react@15.4.1/lib/ReactAddonsDOMDependencies.js


if (process.env.NODE_ENV !== 'production') {
  var ReactPerf = require('react-dom/lib/ReactPerf');
  var ReactTestUtils = require('react-dom/lib/ReactTestUtils');

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

10reactions
goshacmdcommented, Dec 20, 2016

Brunch is an open source project that is maintained in our spare time; some of the contributions are sponsored out of Paul’s own pocket.

You may find it hard to believe but most of us have real lives with partners and friends; as well as work or contracts that we need to pay our bills, so it’s no surprise the time we have for side projects and OSS is limited and we may choose to prioritize other projects of ours.

It’s an open source project, not a cafe. We don’t owe you—or anyone else, for that matter—a thing. You are more than welcome, however, to submit PRs and address your own questions by looking at the sources (they are all right here on GitHub!) and maybe even posting the answers here in Issues so that everyone else could see them.

Pinging top contributors and demanding something shows you feel entitled. Sorry to burst your bubble but you are not entitled to anything. I personally owe you no more responding to issues than you owe me to respond to other Brunch issues here.

If you like Brunch, you are always free to helps us out by tackling issues, bugs, adding features, and doing community work. In fact, that would be really awesome! ❤️🔥

If you want your project to depend on Brunch but you require support, you’re more than welcome to pay for commercial-level support (it’s right on the page you linked: http://brunch.io/support). Only then can you demand something… and not from all of the top contributors, but from the people that provide you support — Paul or Andriy in this case.

3reactions
gaearoncommented, Jan 6, 2017

In the meantime, this should be fixed after updating all React packages to 15.4.2.

Read more comments on GitHub >

github_iconTop Results From Across the Web

brunch/troubleshooting-and-faqs.md at main · sebanc/brunch
Boot ChromeOS on x86_64 PC - supports Intel CPU/GPU from 4th Gen (Haswell) or AMD ... ChromeOS is based on linux, most troubleshooting...
Read more >
React 16
5 minute real-world performance test: I just upgraded a relatively large (200K+ LOC) app that performs server side rendering of charts from ...
Read more >
eslint-plugin-react-hooks
Design simple views for each state in your application, and React will efficiently update and render just the right components when your data...
Read more >
Untitled
Format computer and start over, Ghost live action, Kleines bezirksgericht wiki, ... Hack habbo cheat engine 6.1, What is healthy breakfast, ...
Read more >
Oblasti saveta, Web design | Strana 18
(20 mins) When to NOT Use Render Props — Kent is often asked “When should I ... for Form Building in React Apps...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found