Webpacker: Source Maps don't work

[gkatsanos]

I've seen several source-map open issues I was wondering if there's any README/Doc for fixing them? (no source maps on my setup).

I tried:

config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

const config = environment.toWebpackConfig()

config.devtool = 'source-map'

module.exports = config

[jakeNiemiec]

You were close, environment needs to be exported, not config. Those consts probably don't help either.

Here's the doc you want, Ctrl+F for devtool https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

[gkatsanos]

Thank you for the quick reply! I tried:

// config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
environment.config.merge({ devtool: 'source-map' })

module.exports = environment.toWebpackConfig()

Still no source maps :(

EDIT:
this is how my config directory looks like

config/webpack
├── development.js
├── environment.js
├── loaders
│   └── vue.js
├── production.js
└── test.js

[jakeNiemiec]

Try:

-module.exports = environment.toWebpackConfig()
+module.exports = environment;

[AlexVPopov]

@gkatsanos what browser are you using? I have problems with source maps on Firefox, see #2227

[gkatsanos]

Try:

-module.exports = environment.toWebpackConfig()
+module.exports = environment;

This gives an invalid config object:

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'resolvedModules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           resolvedModules: …
         }
       })
     ]
 - configuration.plugins[0] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.
 - configuration.plugins[1] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.
 - configuration.plugins[2] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.
 - configuration.plugins[3] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.
 - configuration.plugins[4] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.
 - configuration.plugins[5] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.

@gkatsanos what browser are you using? I have problems with source maps on Firefox, see #2227

Chrome & Brave , latest versions.

[gkatsanos]

I managed to add CSS source-maps by including postcss-loader and sourceMap: true in all loaders.

environment.loaders.append('scss', {
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        implementation: require('sass'),
        fiber: require('fibers'),
        data: `@import "app/javascript/manager/styles/main.scss";`
      }
    }
  ]
})