React Compilation failing due to react-notification-alert

ahmedmusawir commented 5 years ago

./node_modules/react-notification-alert/dist/animate.css 7:0\nModule parse failed: Unexpected token (7:0)\nYou may need an appropriate loader to handle this file type.\n| Copyright (c) 2015 Daniel Eden\n| */\n> .animated {\n| -webkit-animation-duration: 1s;\n| animation-duration: 1s;\n @ ./node_modules/react-notification-alert/dist/index.js 15:0-24\n @ ./pages/dashboard/notifications.jsx\n @ multi ./pages/dashboard/notifications.jsx'

einazare commented 5 years ago

Hello there @ahmedmusawir ,

Thank you for your interest in working our products. This is due to the fact that you do not have css loader activated in your project. I'll update our peerDependecies in my next update, hopefully soon.

Best, Manu

W1M0R commented 5 years ago

I am experiencing the same problem. An easy way to verify it, is to create an Electron app using electron-react-boilerplate and doing an import NotificationAlert from "react-notification-alert"; from your React component. This boilerplate project comes with css-loader, and I have no problems importing my own CSS files into the project.

The error that I get is:

.\node_modules\react-notification-alert\dist\animate.css:7
.animated {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:660:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
    at Module.load (internal/modules/cjs/loader.js:602:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
    at Function.Module._load (internal/modules/cjs/loader.js:533:3)
    at Module.require (internal/modules/cjs/loader.js:640:17)
    at require (internal/modules/cjs/helpers.js:20:18)

einazare commented 5 years ago

Hello there, @W1M0R ,

Thank you for your detailed comment. I'll see what I can do about this. If you have any recommendation, on how to solve the issue, it would be really great if you could share it.

Best, Manu

W1M0R commented 5 years ago

It works if I do import NotificationAlert from "react-notification-alert/dist";.

The npm package has the transpiled babel output in the dist subfolder. If I can suggest a few possible solutions:

Let the package uploaded to npm only contain the files from the dist folder.
Or we need to determine what the users of your package need to add to their babel configuration, so that packages in their local node_modules folders are also included in the babel transpilation process. Perhaps this issue will help in that regard: https://github.com/webpack/webpack/issues/2031
Don't require animate.css but list it as a peer dependency, so that your users can install it themselves.

I am using Babel 7 in my project, and your project currently uses Babel 6, although I don't think that should be a problem.

Related issues:

einazare commented 5 years ago

Hello again, @W1M0R ,

Thank you for letting me know about this. I thought that by adding "main": "dist/index.js", inside the package.json, when importing the library inside your project it would have automatically import from the dist folder. In my next update, I'll go with the third solve.

Best, Manu

W1M0R commented 5 years ago

From https://medium.com/webpack/how-to-cope-with-broken-modules-in-webpack-4c0427fb23a

Tip 1: Prefer unminified source over dist Most modules link the pre-bundled dist version in the main field of their package.json. While this is useful for developers without a module bundler, for webpack users it is better to alias the source version. This avoids the usual module system overhead of pre-bundled files. However, in most cases the dist version works just fine as well.

Tip 6: Use noParse to include large dists When there is no source version of the module and you want to include the dist, you can flag this file as noParse. In this case, webpack will just include the file without parsing it, which can be used to improve the build time. But be careful: This also means that any feature requiring the AST, like the ProvidePlugin, will not work inside this file. webpack just takes the source code without looking at it.

W1M0R commented 5 years ago

Thanks @EINazare, I can confirm that v0.0.9 now works for me without modifications.

For other users that are affected by similar issues when using electron-react-boilerplate, see the comment here for additional tips and workarounds: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/1955#issuecomment-458521704

creativetimofficial / react-notification-alert

React Compilation failing due to react-notification-alert #5