Giters

callmecavs / layzr.js

A modern lazy loading library for images.

Home Page:http://callmecavs.com/layzr.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Babel compile error

thomasdigby opened this issue · comments

commented

I'm getting an error when building with Babel, I'm importing in ES6 import Lazyr from 'lazyr.js' (.... is my project path)

ERROR in ./~/layzr.js/dist/layzr.min.js Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "..../node_modules/layzr.js/.babelrc" at 0

I'm not sure if it would conflict with my projects Babel setup? Here's my .babelrc in case:

{
  "presets": ["es2015", "stage-1", "react"]
}

Thanks

commented

Hey @thomasdigby. The source of the event emitter dependency, knot.js, uses the object spread operator, which I don't think is included in the stage-1 preset. You can either use stage-0 instead, or include Babel's object spread transform specifically, like so:

First, add it to your package.json:

npm install babel-plugin-transform-object-rest-spread --save-dev

Then, add it to your .babelrc file:

{
  "plugins": ["transform-object-rest-spread"]
}

More info about this specific Babel plugin can be found here. Let me know if that works.

commented

Thanks for looking into it so quickly @callmecavs

After installing the babel-plugin, the error has now moved onto Error: Couldn't find preset "es2015-rollup". Correct me if I'm wrong, but are these dependencies not transpiled pre-import? Or will I need to include each babel plugin/preset within my own project? Surely I don't need to switch my build system to rollup?

commented

@thomasdigby if you require the file in dist, it's already transpiled to ES5, and wrapped in a UMD wrapper, so it will work with any build system (CommonJS, AMD, or directly in the browser via <script> tag). This is the file in the main field of the package.json.

If you require the file in src, as you're doing, you'll need to transpile it and bundle it yourself. You're seeing that error because the .babelrc file from Layzr is in your node_modules folder, and your build setup is reading it when trying to transpile Layzr. Make sure to exclude all of your node_modules directory, except for Layzr's source file, and you shouldn't get that error anymore.

That's my best guess - without knowing what build tool you're using, or seeing the configuration.