2

I created a sample react starter kit project in webstorm using webstorm's pre-defined project template and am trying to set breakpoints in debug mode.

I first built the project using npm run build then set the debug configuration to run build/server.js.

However it won't recognize any of the breakpoints in the original source files and seems to be ignoring the sourcemaps. How can I get it to recognize the sourcemaps and allow me to both set breakpoints in the source files as well as step into the source files.

There is this issue in the react starter kit repo: https://github.com/kriasoft/react-starter-kit/issues/121 but I couldn't see what the resolution was, and unlike the commenter, I couldn't even get it to step into the source files... it just stayed on the generated js files instead.

MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460

1 Answers1

2

Well... WebStorm 10 has no support for sourcemaps generated by Webpack. They are partially supported in WebStorm 11 for client-side applications (see http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/), but not supported for Node.js. so, you can't debug server.js in WebStorm 11, but you can debug client side. To do this, try the following:

change appConfig in src/config.js as follows:

const appConfig = merge({}, config, {
  entry: [
    ...(WATCH ? ['webpack-hot-middleware/client'] : []),
    './src/app.js',
  ],
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'app.js',
  },
devtool: 'source-map',
module: {
    loaders: [
      WATCH ? {
        ...JS_LOADER,
        query: {
          // Wraps all React components into arbitrary transforms
          // https://github.com/gaearon/babel-plugin-react-transform
          plugins: ['react-transform'],
          extra: {
            'react-transform': {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module'],
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react'],
                },
              ],
            },
          },
        },
      } : JS_LOADER,
      ...config.module.loaders,
      {
        test: /\.css$/,
        loader: 'style-loader/useable!css-loader!postcss-loader',
      },
    ],
  },
});

set up the javascript debug run configuration:

URL: http://localhost:5000 Remote URLs: map project root folder to 'webpack:///path/to/react-starter-kit', like 'webpack:///C:/WebstormProjects/react-starter-kit' map build/public to http://localhost:5000

This doesn't work perfectly, but works in general - breakpoints in src/routes.js, src/app.js are hit

lena
  • 90,154
  • 11
  • 145
  • 150
  • Please also make sure to exclude build folder from project (Mark directory as/Excluded). If mapping 'webpack:///path/to/react-starter-kit' doesn't work, try 'webpack:///.' – lena Oct 23 '15 at 15:14
  • Wow, after searching through 20 different blog articles and github issues and stackoverflow questions, it is in your answer that I very first see that someone finally makes the claim that debugging sourcemapped Node.Js is actually not supported. At least by webpack, right? – Attila Szeremi Jan 25 '16 at 11:02
  • 2
    Right - debugging node.js applications bundled with webpack is not supported. See https://youtrack.jetbrains.com/issue/WEB-18751 – lena Jan 25 '16 at 11:32
  • Thanks. By the way antigremlin says that the issue will be solved in the next major IntelliJ. In fact, you won't need to provide mappings manually. https://github.com/webpack/webpack/issues/238#issuecomment-174469661 – Attila Szeremi Jan 25 '16 at 14:42
  • @AttilaSzeremi, this is [how I configured it](http://stackoverflow.com/a/36333472/268093) with `webpack:webpack`, Meteor v1.3 and WS 2016 after running into similar frustrations. – MasterAM Mar 31 '16 at 13:12