Node-serialport: Tracking serialport with webpack

Created on 9 Aug 2016 · 15Comments · Source: serialport/node-serialport

SerialPort version: 3.1.2
NodeJS Version: 6.3.1
Operating System and Hardware: OSx
Are you using Electron/Atom/NwJS?: Electron and Webpack

(Run node -v && npm -v && python --version to get version numbers)

Summary of Problem

Serialport fails to build with web pack

Expected Behavior

No errors on building

Actual Behavior

WARNING in ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
 @ ./~/bindings/bindings.js 76:22-40 76:43-53


WARNING in ./~/bindings/README.md
Module parse failed: /Users/ajk/Desktop/Thinker_New/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:3)
    at Parser.pp$4.raise (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOp (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1656:43)
    at Parser.pp$3.parseExprOp (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1658:21)
    at Parser.pp$3.parseExprOps (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1639:17)
    at Parser.pp$3.parseMaybeConditional (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/ajk/Desktop/Thinker_New/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/ajk/Desktop/Thinker_New/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/ajk/Desktop/Thinker_New/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/ajk/Desktop/Thinker_New/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/ajk/Desktop/Thinker_New/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/ajk/Desktop/Thinker_New/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/ajk/Desktop/Thinker_New/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/ajk/Desktop/Thinker_New/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./~/bindings ^\.\/.*$

WARNING in ./~/es6-promise/dist/es6-promise.js
Module not found: Error: Cannot resolve module 'vertx' in /Users/ajk/Desktop/Thinker_New/node_modules/es6-promise/dist
 @ ./~/es6-promise/dist/es6-promise.js 131:20-30

Steps and Code to Reproduce the Issue

Try to build serialport with webpack (specifically electron-react-boilerplate)

I think serialport could fix this issue because https://github.com/stefanpenner/es6-promise/issues/100

I think a big problem might be the fact that bindings.js is the same name as the module bindings which is going to break web pack and building with native modules.

Source

andrewjaykeller

Most helpful comment

@aj-ptw, you need to mark bindings or serialport as an external dependency to webpack. In the node and electron webpack targets that will result in a small module in the webpack output that will require('bindings') or require('serialport'). You'll need to include the built serialport binary (easiest to just include the whole folder in node_modules) in a release of your electron app. (You'll need a build of the library for each platform you want to ship.)

The config to webpack to mark the externals can be pretty simple (and there are more complex options to achieve the same)

// in webpack options
externals: {
  bindings: true,
  serialport: true,
}

The original error posted relates to bindings using a statement require(n) to load the bound node binary library. webpack can only statically analyze require statements. It can't understand what n could be so it gives the error you see. Even if bindings uses a statement webpack could understand, the thing webpack would try to handle would be a machine native binary instead of webpack. You could use file-loader on that but I'm not sure that would be the best approach. The likely best is to mark bindings or serialport (or both) as an external dependency and include them as is in your electron app release.

mzgoddard on 17 Aug 2016

👍3

All 15 comments

SerialPort 4.x is the latest version for the record. You're using 3x.

We switched to lie as our Promise library in master. We have some major changes in master though (in the delimiter parser) so I'm working on cleaning up our streams for our next major release. Can you see if the problem exists in the master branch of SerialPort?

In the streams cleanup the filenames are being changed a bit, but that's a major bug in webpack if it can't deal with package and filenames being the same.

reconbot on 9 Aug 2016

well.... i was waiting for a good reason to upgrade to upgrade to 4.x haha thanks @reconbot, will let you know if the upgrade solves the issue

andrewjaykeller on 10 Aug 2016

This is a link to how the aws-sdk team got their module working with web pack https://github.com/aws/aws-sdk-js/issues/603

andrewjaykeller on 17 Aug 2016

I don't see a clear answer on what people did to make it work. Anything jump out to you?

I'd honestly not use webpack for the serialport module you can have it ignore node_modules when it's bundling. If you're using webpack for babel, you might want to consider using babel-register instead.

reconbot on 17 Aug 2016

I've been seeing a few issues with other binary modules and webpack. I don't believe it can be properly bundled as it requires non js files (the binary module). There's no way to get a single bundle file out of it. No webpack loader that handles it.

I'm going to close this issue as it's a webpack problem not a serialport problem. But I'm open to supporting webpack in the future if there is a change we can make to make it happen. In the near future we'll be providing chrome serialport support that will browserify/webpack just fine. Probably not what you're looking for however.

reconbot on 17 Aug 2016

Ok I'm going to solve this and post the solution here and see if there is something I can suggest for a future feature request on serial port. Great work @reconbot

andrewjaykeller on 17 Aug 2016

The config to webpack to mark the externals can be pretty simple (and there are more complex options to achieve the same)

// in webpack options
externals: {
  bindings: true,
  serialport: true,
}

mzgoddard on 17 Aug 2016

👍3

You can probably just mark serialport bindings shouldn't care if it's external or not.

reconbot on 17 Aug 2016

I'm still struggling with this issue. I have added the `externals: { serialport: true} option to Webpack and I'm still unable to require serialport in any code. Could someone supply me with an example Webpack config file and a use case? Thanks in advance.

Twistedst on 10 Feb 2017

@Twistedst you can try below

externals: {
.....
"serialport": "require('serialport')"
.....
}

keyiis on 24 Mar 2017

I've always seen it as serialport:"serialport"

On Fri, Mar 24, 2017, 10:26 AM keyiis notifications@github.com wrote:

@Twistedst https://github.com/Twistedst you can try below

externals: {
.....
"serialport": "require('serialport')"
.....
}

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/EmergingTechnologyAdvisors/node-serialport/issues/901#issuecomment-289036909,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABlbtyc-iEnrAKGqHZ032ImDT7lQLY9ks5ro9J3gaJpZM4JgUF-
.

reconbot on 24 Mar 2017

This is the relevant section for configuring webpack.
http://webpack.github.io/docs/configuration.html#externals webpack 1
https://webpack.js.org/configuration/externals/#externals Webpack 2

On Fri, Mar 24, 2017 at 10:30 AM Francis Gulotta notifications@github.com
wrote:

I've always seen it as serialport:"serialport"

On Fri, Mar 24, 2017, 10:26 AM keyiis notifications@github.com wrote:

@Twistedst https://github.com/Twistedst you can try below

externals: {
.....
"serialport": "require('serialport')"
.....
}

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
<
https://github.com/EmergingTechnologyAdvisors/node-serialport/issues/901#issuecomment-289036909
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AABlbtyc-iEnrAKGqHZ032ImDT7lQLY9ks5ro9J3gaJpZM4JgUF-

.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/EmergingTechnologyAdvisors/node-serialport/issues/901#issuecomment-289038221,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAy3EuBnXNziwE52CPBPokUjNYa_Knsoks5ro9OBgaJpZM4JgUF-
.