using with next.js?

[madhums]

Hi, I came across your comment from this thread vercel/next.js#3205 (comment)

Unfortunately, I am having some issues getting this plugin to work with .babelrc. Here's the stack trace

Module build failed: TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/madhu/code/project/node_modules/@babel/runtime/helpers/classCallCheck.js:3:11)
    at BabelPlugin (/Users/madhu/code/project/node_modules/targets-webpack-plugin/dist.js:163:34)
    at Function.memoisePluginContainer (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/madhu/code/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/madhu/code/project/node_modules/babel-loader/lib/index.js:50:20)
    at /Users/madhu/code/project/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/madhu/code/project/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

 @ multi ./pages/_error.js

My .babelrc looks like this

{
  "plugins": [
    ["styled-components", {
      "ssr": true,
      "displayName": true,
      "preprocess": false
    }],
    'transform-class-properties',
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "components": "./components",
        }
      }
    ],
    'targets-webpack-plugin'
  ],
  "presets": [
    "next/babel",
    "env"
  ]
}

I am using this in a next.js project. Do you happen to have any clue why this is not working?

[madhums]

Ah! I see that this has to be used as a next.js plugin. I just tried that but I now get this error in the web console.

[absolute-resource-path]:3935 Uncaught TypeError: Cannot set property 'sourceMapSupport' of undefined
    at [absolute-resource-path]:3935
    at Object.node_modulesZeitSourceMapSupportBrowserSourceMapSupportJs ([absolute-resource-path]:3935)
    at __webpack_require__ (manifest.js?3659:1242)
    at fn (manifest.js?3659:1208)
    at Object.node_modulesNextDistClientNextDevJs ([absolute-resource-path]:4634)
    at __webpack_require__ (manifest.js?3659:1242)
    at fn (manifest.js?3659:1208)
    at Object._ ([absolute-resource-path]:8802)
    at __webpack_require__ (manifest.js?3659:1242)
    at webpackJsonpCallback (manifest.js?3659:1196)

@sheerun Any clue?

[sheerun]

Have you added it exactly the same way as in the readme? What's your next.config.js and package.json?

[pyankoff]

Seems to be working great with

// next.config.js
const TargetsPlugin = require("targets-webpack-plugin");

module.exports = {
  webpack: function (config, { dev }) {
    if (!dev) {
      config.plugins.push(new TargetsPlugin({
        browsers: ["last 2 versions", "chrome >= 41"]
      }))
    }
    return config
  }  
}

Thanks @sheerun!! Took me some time to figure out the correct usage, added PR #2

[sheerun]

Yes, it should be used only for production build