Error generating source map with react-components preset

[wlach]

Creating this simple react component:

package.json:

{
  "devDependencies": {
    "@neutrinojs/react-components": "^8.0.1",
    "neutrino": "^8.0.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "scripts": {
    "start": "neutrino start --use @neutrinojs/react-components",
    "build": "neutrino build --use @neutrinojs/react-components"
  }
}

src/components/test-component.jsx:

import React from 'react';

export default class TestComponent extends React.Component {

  render() { return ('hello'); }
}

I get this error when I run yarn build:

Hammersmith:test-react-component wlach$ yarn build
yarn run v1.3.2
warning package.json: No license field
$ neutrino build --use @neutrinojs/react-components
⠹ Building project/Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
        ^

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/Users/wlach/src/test-react-component/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/Users/wlach/src/test-react-component/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/Users/wlach/src/test-react-component/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/Users/wlach/src/test-react-component/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/Users/wlach/src/test-react-component/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /Users/wlach/src/test-react-component/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/Users/wlach/src/test-react-component/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/Users/wlach/src/test-react-component/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/wlach/src/test-react-component/node_modules/webpack/lib/Compilation.js:670:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[eliperelman]

I can replicate this.

[eliperelman]

Adding source-map-support doesn't seem to fix this either.

[eliperelman]

Here's the output of --inspect in my replication:

yarn run v1.3.2
$ neutrino build --inspect
{
  context: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components',
  devtool: 'source-map',
  entry: {
    HelloWorld: [
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/src/components/HelloWorld'
    ]
  },
  externals: [
    function (context, request, callback){
            var moduleName = getModuleName(request, includeAbsolutePaths);
            if (contains(nodeModules, moduleName) && !containsPattern(whitelist, request)) {
                // mark this module as external
                // https://webpack.github.io/docs/configuration.html#externals
                return callback(null, importType + " " + request);
            };
            callback();
        }
  ],
  module: {
    rules: [
      {
        test: /.(html)$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/html-loader/index.js',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        exclude: [
          '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/src/static'
        ],
        include: [
          '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/src',
          '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/test'
        ],
        test: /.(js|jsx|vue|ts|mjs)$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-loader/lib/index.js',
            options: {
              cacheDirectory: true,
              plugins: [
                [
                  '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/fast-async/plugin.js',
                  {
                    spec: true
                  }
                ],
                '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-plugin-transform-react-jsx/lib/index.js',
                  {
                    pragma: 'createElement'
                  }
                ],
                [
                  '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-plugin-jsx-pragmatic/jsx-pragmatic.js',
                  {
                    'export': 'createElement',
                    'import': 'createElement',
                    module: 'react'
                  }
                ],
                '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js',
                [
                  '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-plugin-transform-class-properties/lib/index.js',
                  {
                    spec: true
                  }
                ]
              ],
              presets: [
                [
                  '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-preset-env/lib/index.js',
                  {
                    debug: false,
                    exclude: [
                      'transform-regenerator',
                      'transform-async-to-generator'
                    ],
                    modules: false,
                    targets: {
                      browsers: [
                        'last 2 Chrome versions',
                        'last 2 Firefox versions',
                        'last 2 Edge versions',
                        'last 2 Opera versions',
                        'last 2 Safari versions',
                        'last 2 iOS versions'
                      ]
                    },
                    useBuiltIns: true
                  }
                ],
                '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/babel-preset-react/lib/index.js'
              ]
            }
          }
        ]
      },
      {
        test: (input) => {
              const isCssModule = cssModulesTest.test(input);
              const isRegularCss = cssTest.test(input);
        
              if (opts.modules !== false && isCssModule) {
                return false;
              }
        
              return isRegularCss;
            },
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/css-hot-loader/index.js'
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/extract-text-webpack-plugin/dist/loader.js',
            options: {
              omit: 1,
              remove: true
            }
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/style-loader/index.js'
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/css-loader/index.js',
            options: {
              importLoaders: 0
            }
          }
        ]
      },
      {
        test: /.(module.css)$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/css-hot-loader/index.js'
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/extract-text-webpack-plugin/dist/loader.js',
            options: {
              omit: 1,
              remove: true
            }
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/style-loader/index.js'
          },
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/css-loader/index.js',
            options: {
              importLoaders: 1,
              modules: true
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/url-loader/index.js',
            options: {
              limit: 10000,
              mimetype: 'application/font-woff',
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/url-loader/index.js',
            options: {
              limit: 10000,
              mimetype: 'application/octet-stream',
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/file-loader/dist/cjs.js',
            options: {
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/url-loader/index.js',
            options: {
              limit: 8192,
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|webp)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/url-loader/index.js',
            options: {
              limit: 8192,
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/url-loader/index.js',
            options: {
              limit: 8192,
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /.(worker.js|worker.jsx|worker.vue|worker.ts|worker.mjs)$/,
        use: [
          {
            loader: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/worker-loader/dist/cjs.js'
          }
        ]
      }
    ]
  },
  node: {
    Buffer: false,
    fs: 'empty',
    tls: 'empty'
  },
  output: {
    chunkFilename: '[name].[chunkhash].js',
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'umd',
    path: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/build',
    publicPath: './',
    umdNamedDefine: true
  },
  performance: {
    hints: 'error'
  },
  plugins: [
    {
      keys: [
        'NODE_ENV'
      ],
      defaultValues: {}
    },
    {
      filename: '[name].[contenthash].css',
      id: 1,
      options: {
        ignoreOrder: true,
        allChunks: true
      }
    },
    {
      filename: '[name].[contenthash].css',
      id: 2,
      options: {
        ignoreOrder: true,
        allChunks: true
      }
    },
    {
      options: {
        parserOpts: {},
        minifyPreset: function preset(context) {
          var _opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        
          var opts = isPlainObject(_opts) ? _opts : {};
        
          // validate options
          var validOptions = [].concat(_toConsumableArray(PLUGINS.map(function (p) {
            return p[0];
          })), _toConsumableArray(Object.keys(PROXIES)));
          for (var name in opts) {
            if (validOptions.indexOf(name) < 0) {
              throw new Error(`Invalid option "${name}"`);
            }
          }
        
          // build a plugins map from the plugin table above
          var pluginsMap = PLUGINS.reduce(function (acc, _ref) {
            var _ref2 = _slicedToArray(_ref, 3),
                name = _ref2[0],
                plugin = _ref2[1],
                defaultValue = _ref2[2];
        
            return Object.assign(acc, {
              [name]: {
                plugin,
                options: null,
                enabled: defaultValue
              }
            });
          }, {});
        
          // handle plugins and their options
          var _iteratorNormalCompletion = true;
          var _didIteratorError = false;
          var _iteratorError = undefined;
        
          try {
            for (var _iterator = PLUGINS[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
              var _ref3 = _step.value;
        
              var _ref4 = _slicedToArray(_ref3, 1);
        
              var _name = _ref4[0];
        
              if (isPlainObject(opts[_name])) {
                pluginsMap[_name].options = opts[_name];
              } else if (opts[_name] !== void 0) {
                pluginsMap[_name].enabled = !!opts[_name];
              }
            }
        
            // handle proxies
          } catch (err) {
            _didIteratorError = true;
            _iteratorError = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
              }
            } finally {
              if (_didIteratorError) {
                throw _iteratorError;
              }
            }
          }
        
          for (var proxyname in PROXIES) {
            if (opts[proxyname] !== void 0) {
              var _iteratorNormalCompletion2 = true;
              var _didIteratorError2 = false;
              var _iteratorError2 = undefined;
        
              try {
                for (var _iterator2 = PROXIES[proxyname][Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                  var to = _step2.value;
        
                  if (!pluginsMap[to].options) {
                    pluginsMap[to].options = {};
                  }
                  if (!hop(pluginsMap[to].options, proxyname)) {
                    pluginsMap[to].options[proxyname] = opts[proxyname];
                  }
                }
              } catch (err) {
                _didIteratorError2 = true;
                _iteratorError2 = err;
              } finally {
                try {
                  if (!_iteratorNormalCompletion2 && _iterator2.return) {
                    _iterator2.return();
                  }
                } finally {
                  if (_didIteratorError2) {
                    throw _iteratorError2;
                  }
                }
              }
            }
          }
        
          // get the array of plugins
          var plugins = Object.keys(pluginsMap).map(function (name) {
            return pluginsMap[name];
          }).filter(function (plugin) {
            return plugin.enabled;
          }).map(function (plugin) {
            return plugin.options ? [plugin.plugin, plugin.options] : plugin.plugin;
          });
        
          return {
            minified: true,
            comments: false,
            presets: [{ plugins }],
            passPerPreset: true
          };
        },
        minifyOpts: {},
        babel: {
          transform: function () { [native code] }
        },
        comments: /^\**!|@preserve|@license|@cc_on/,
        sourceMap: undefined,
        jsregex: /\.js($|\?)/i
      }
    },
    {
      options: {
        assetNameRegExp: /\.css$/g,
        cssProcessor: function creator() {
            var transformer = initializer.apply(undefined, arguments);
            transformer.postcssPlugin = name;
            transformer.postcssVersion = new _processor2.default().version;
            return transformer;
          },
        cssProcessorOptions: {},
        canPrint: true
      },
      lastCallInstance: {
        options: {
          assetProcessors: [
            {
              phase: 'compilation.optimize-chunk-assets',
              regExp: /\.css$/g,
              processor: function (assetName, asset, assets) {
                        return self.processCss(assetName, asset, assets);
                      }
            }
          ],
          onStart: function EMPTY_FUNC() {},
          onEnd: function EMPTY_FUNC() {},
          canPrint: true
        },
        deleteAssetsMap: {}
      }
    },
    {
      options: {}
    },
    {
      paths: [
        '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/build'
      ],
      options: {
        root: '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components',
        verbose: false,
        allowExternal: false,
        dry: false
      }
    },
    {
      apply: function apply(compiler) {
              var fileDependencies = void 0;
              var contextDependencies = void 0;
              var written = {};
      
              var context = void 0;
      
              if (!options.context) {
                  context = compiler.options.context;
              } else if (!_path2.default.isAbsolute(options.context)) {
                  context = _path2.default.join(compiler.options.context, options.context);
              } else {
                  context = options.context;
              }
      
              compiler.plugin('emit', function (compilation, cb) {
                  debug('starting emit');
                  var callback = function callback() {
                      debug('finishing emit');
                      cb();
                  };
      
                  fileDependencies = [];
                  contextDependencies = [];
      
                  var globalRef = {
                      info: info,
                      debug: debug,
                      warning: warning,
                      compilation: compilation,
                      written: written,
                      fileDependencies: fileDependencies,
                      contextDependencies: contextDependencies,
                      context: context,
                      output: compiler.options.output.path,
                      ignore: options.ignore || [],
                      copyUnmodified: options.copyUnmodified,
                      concurrency: options.concurrency
                  };
      
                  if (globalRef.output === '/' && compiler.options.devServer && compiler.options.devServer.outputPath) {
                      globalRef.output = compiler.options.devServer.outputPath;
                  }
      
                  _bluebird2.default.each(patterns, function (pattern) {
                      // Identify absolute source of each pattern and destination type
                      return (0, _preProcessPattern2.default)(globalRef, pattern).then(function (pattern) {
                          // Every source (from) is assumed to exist here
                          return (0, _processPattern2.default)(globalRef, pattern);
                      });
                  }).catch(function (err) {
                      compilation.errors.push(err);
                  }).finally(callback);
              });
      
              compiler.plugin('after-emit', function (compilation, cb) {
                  debug('starting after-emit');
                  var callback = function callback() {
                      debug('finishing after-emit');
                      cb();
                  };
      
                  var compilationFileDependencies = new Set(compilation.fileDependencies);
                  var compilationContextDependencies = new Set(compilation.contextDependencies);
      
                  // Add file dependencies if they're not already tracked
                  _lodash2.default.forEach(fileDependencies, function (file) {
                      if (compilationFileDependencies.has(file)) {
                          debug('not adding ' + file + ' to change tracking, because it\'s already tracked');
                      } else {
                          debug('adding ' + file + ' to change tracking');
                          compilation.fileDependencies.push(file);
                      }
                  });
      
                  // Add context dependencies if they're not already tracked
                  _lodash2.default.forEach(contextDependencies, function (context) {
                      if (compilationContextDependencies.has(context)) {
                          debug('not adding ' + context + ' to change tracking, because it\'s already tracked');
                      } else {
                          debug('adding ' + context + ' to change tracking');
                          compilation.contextDependencies.push(context);
                      }
                  });
      
                  callback();
              });
          }
    }
  ],
  resolve: {
    alias: {
      'react-native': 'react-native-web'
    },
    extensions: [
      '.js',
      '.jsx',
      '.vue',
      '.ts',
      '.mjs',
      '.json'
    ],
    modules: [
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/react-components/node_modules',
      'node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/web/node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/react/node_modules'
    ]
  },
  resolveLoader: {
    modules: [
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/react-components/node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/web/node_modules',
      '/private/var/folders/dl/9lrzd5110zlft676qdpr7xn40000gp/T/components/node_modules/@neutrinojs/react/node_modules'
    ]
  },
  target: 'web'
}
Done in 3.28s.

[eliperelman]

Possibly relevant webpack issue, but it appears to be resolved, and I seem to have the correct version with these fixes installed:

webpack/webpack#5931

[eliperelman]

Issue is here: webpack-contrib/babel-minify-webpack-plugin#68

I can confirm that reverting to v0.0.0 of this plugin makes the issue go away.

[eliperelman]

Preparing hotfix.

[eliperelman]

This should now be fixed in master. Unfortunately I made a little bit of a mess in master trying to make it happen, so I apologize for that.

The good news is that source maps should now at least be functional again across all middleware.

❤️ everyone, thanks for the patience.