Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking serialport with webpack #901

Closed
andrewjaykeller opened this issue Aug 9, 2016 · 15 comments
Closed

Tracking serialport with webpack #901

andrewjaykeller opened this issue Aug 9, 2016 · 15 comments

Comments

@andrewjaykeller
Copy link

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 stefanpenner/es6-promise#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.

@reconbot
Copy link
Member

reconbot commented Aug 9, 2016

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.

@andrewjaykeller
Copy link
Author

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
Copy link
Author

Possibly related webpack/webpack#1114

@andrewjaykeller
Copy link
Author

This is a link to how the aws-sdk team got their module working with web pack aws/aws-sdk-js#603

@reconbot
Copy link
Member

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
Copy link
Member

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.

@andrewjaykeller
Copy link
Author

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

@mzgoddard
Copy link

@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.

@reconbot
Copy link
Member

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

@Twistedst
Copy link

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.

@keyiis
Copy link

keyiis commented Mar 24, 2017

@Twistedst you can try below

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

@reconbot
Copy link
Member

reconbot commented Mar 24, 2017 via email

@mzgoddard
Copy link

mzgoddard commented Mar 24, 2017 via email

@reconbot
Copy link
Member

That's super helpful, thank you

@hanfengcan
Copy link

thanks

@lock lock bot locked as resolved and limited conversation to collaborators May 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

6 participants