debug.js imports itself when relative imports are prioritised

[wassname]

Steps

1. compile a react project which has import { Input, Menu, Segment } from "semantic-ui-react"
2. run it in the browser

Expected Result

No errors

Actual Result

debug.js:38Uncaught TypeError: _debug.enable is not a function

This is because when the debug.js file runs require("debug") it import itself, not the node debug module. I recommend renaming it to 'startDebug.js' to avoid recursive imports when relative importing is enabled and prioritied.

Version

0.61.7

Testcase

N/A

[wassname]

P.S. the workaround is to set the webpack config:

module.exports = {
  resolve:{
    "debug": "debug/browser.js"
  }
}

[levithomason]

The debug module defines the browser field in their package.json:

{
  "browser": "./browser.js",
}

This is used by webpack to automatically require the browser build making the resolve config unnecessary. We also use debug both in dev and production mode on the doc site without no errors.

This leads me to believe it is something unique to the setup where you're seeing this. What version of Webpack are you using and how are you setting your environment?

[noah79]

I have the same problem. I'm in webpack 2 and typescript 2.2.1.

[levithomason]

http://react.semantic-ui.com is powered by webpack 2 without issues. You can review our webpack.config.js in this repo to see how we're doing things.

You can also see an upcoming doc update showing webpack 2 usage in this PR #1497.