React-slick: Webpack build issues.

Created on 24 Aug 2016 · 9Comments · Source: akiran/react-slick

When I include react-slick in my app and build with Webpack, I get the following error:

ERROR in ./~/react-slick/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-object-assign" specified in "/Users/nmcl54/Documents/atom_workspace/nmo-ui-b
rowse/node_modules/react-slick/.babelrc" at 0, attempted to resolve relative to "/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_
modules/react-slick"
    at /Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/options/option-manager.js:177:1
7
    at Array.map (native)

    at Function.normalisePlugins (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/opti
ons/option-manager.js:153:20)
    at OptionManager.mergeOptions (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/opt
ions/option-manager.js:245:36)
    at OptionManager.init (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/options/opt
ion-manager.js:383:12)
    at File.initOptions (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/index.js:223:
65)
    at new File (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/file/index.js:140:24)
    at Pipeline.transform (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-core/lib/transformation/pipeline.js:46:1
6)
    at transpile (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-loader/index.js:38:20)
    at Object.module.exports (/Users/nmcl54/Documents/atom_workspace/nmo-ui-browse/node_modules/babel-loader/index.js:131:12)
 @ ./src/app/components/promo/Carousel.js 11:18-40

I know these babel plugins and presets are in your devDependencies, but if I run npm install --save babel-plugin-transform-object-assign babel-preset-es2015-loose then webpack bundles properly. I seem to be the only one who has experienced this, which makes me think it's just a configuration problem on my end, but I haven't faced this issue with any other node packages.

Source

coreyleelarson

Most helpful comment

lib contains files that are already transpilied by babel
You have to exclude node_modules in babel loader webpack config

module: {
  loaders: [{
      exclude: /node_modules/,
      test: /\.js$/,
      loader:  "babel"
 }]
}

akiran on 24 Aug 2016

👍4

All 9 comments

lib contains files that are already transpilied by babel
You have to exclude node_modules in babel loader webpack config

module: {
  loaders: [{
      exclude: /node_modules/,
      test: /\.js$/,
      loader:  "babel"
 }]
}

akiran on 24 Aug 2016

👍4

I already have this in my webpack config.

module: {
    loaders: [
      { test: /\.js?$/, exclude: '/node_modules/', loader: 'babel?compact=false' },
      { test: /\.scss?$/, exclude: '/node_modules/', loader: ExtractTextPlugin.extract('css!sass') },
    ],
  },

coreyleelarson on 24 Aug 2016

I fixed the issue. Our webpack config is not at the root of our project, so we needed to provide the absolute path to our node_modules directory.

coreyleelarson on 24 Aug 2016

This appears to have broke the object-assign shim in v0.12.5, and possibly other versions.

alexkrolick on 24 Aug 2016

@alexkrolick This specific issue ended up being a configuration problem on my end, not a bug with react-slick.

coreyleelarson on 24 Aug 2016

That may not have been the problem - looking into the compiled source I
noticed that _extends maps to Object.assign instead of the object-assign
version; shimming Object.assign fixes it.

On Aug 24 2016, at 12:53 pm, Corey Larson [email protected] wrote:

@alexkrolick This specific issue ended up
being due to a configuration problem on my end, not a bug with react-slick.

You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the
thread.

alexkrolick on 24 Aug 2016

@alexkrolick That may be a separate issue.

This particular issue had to do with my application attempting to transpile react-slick when it didn't need to, and not being able to resolve the babel presets/plugins since they are devDependencies.

coreyleelarson on 24 Aug 2016

@alexkrolick We are using https://www.npmjs.com/package/babel-plugin-transform-object-assign babel plugin because Object.assign may not be supported in all browsers.

Functionally it should be correct

akiran on 25 Aug 2016

I see 'transfrom-object-assign' in .babelrc, but nothing in package.json.
Maybe should have this package configured in package.json -dev-dependencies part.