'Buffer is not defined' or 'nodebuffer is not supported by this browser' webpack / angular #614

New Issue

2017-03-30T16:05:33Z

mhenris commented

2017-03-30 16:05:33 +00:00

(Migrated from github.com)

I can't seem to get away from either of these errors.

I'm using webpack and angular.

When I put node: { Buffer: false } into my webpack config, I see the Buffer is not defined error upon loading my app.

When I take that out, I see the nodebuffer is not supported by this browser when trying to utilize the XLSX methods.

I read the other issues mentioning that a buffer shim was being added somewhere else. I did tell webpack not to include jszip as outlined in the demo for webpack using noParse: [/jszip.js$/] in my webpack config.

Any help would be appreciated. relevant files attached.

xlsx-issue.zip

I can't seem to get away from either of these errors. I'm using webpack and angular. When I put `node: { Buffer: false }` into my webpack config, I see the `Buffer is not defined` error upon loading my app. When I take that out, I see the `nodebuffer is not supported by this browser` when trying to utilize the XLSX methods. I read the other issues mentioning that a buffer shim was being added somewhere else. I did tell webpack not to include jszip as outlined in the demo for webpack using `noParse: [/jszip.js$/]` in my webpack config. Any help would be appreciated. relevant files attached. [xlsx-issue.zip](https://github.com/SheetJS/js-xlsx/files/883042/xlsx-issue.zip)

SheetJSDev commented

2017-03-30 16:18:49 +00:00

(Migrated from github.com)

In general the nodebuffer is not supported by this browser error suggests one of the following happened:

XLSX.readFile or XLSX.writeFile in the browser (since there's no equivalent of fs in the browser context -- you have to get the data another way, like HTML5 File API, and use XLSX.read or XLSX.write)
XLSX.read or XLSX.write with type:buffer

I actually don't see any reference to readFile or writeFile or buffer in the shared code, so this is strange.

Webpack is complaining about your config:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

I am not really familiar with either webpack or angular. What version of webpack/angular are you using and how are you running it?

In general the `nodebuffer is not supported by this browser` error suggests one of the following happened: - `XLSX.readFile` or `XLSX.writeFile` in the browser (since there's no equivalent of `fs` in the browser context -- you have to get the data another way, like HTML5 File API, and use `XLSX.read` or `XLSX.write`) - `XLSX.read` or `XLSX.write` with `type:buffer` I actually don't see any reference to `readFile` or `writeFile` or `buffer` in the shared code, so this is strange. Webpack is complaining about your config: ``` Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve has an unknown property 'root'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } ``` I am not really familiar with either webpack or angular. What version of webpack/angular are you using and how are you running it?

mhenris commented

2017-03-30 17:13:07 +00:00

(Migrated from github.com)

Webpack: 1.14.0
Angular 1.6.0

I'm using webpack-dev-server to bundle and serve the built file locally and including it in the webpage

Webpack: 1.14.0 Angular 1.6.0 I'm using webpack-dev-server to bundle and serve the built file locally and including it in the webpage

SheetJSDev commented

2017-03-30 17:55:04 +00:00

(Migrated from github.com)

@mhenris there were many missing pieces from your zip, and I think some of the files in subdirectories were changed, but after some changes and npm installs I was finally able to get webpack to produce something.

I think a buffer shim is being forced by jsforce:

$ webpack --display-modules --verbose
Hash: 5be65756bade5c51a86a
Version: webpack 1.14.0
Time: 4113ms
          Asset     Size  Chunks             Chunk Names
transactions.js  11.6 MB       0  [emitted]  transactions
...
  [24] ./~/readable-stream/readable.js 630 bytes {0} [built]
       cjs require readable-stream [23] ./~/jsforce/lib/browser/request.js 3:13-39
...
  [37] ./~/buffer-shims/index.js 3.23 kB {0} [built]
       cjs require buffer-shims [27] ./~/readable-stream/lib/_stream_writable.js 47:17-40
       cjs require buffer-shims [39] ./~/readable-stream/lib/_stream_readable.js 40:17-40
       cjs require buffer-shims [41] ./~/readable-stream/lib/internal/streams/BufferList.js 5:17-40

We will have to revisit zip soon.

Just out of curiosity, if you take a file and save it as XLS (not XLSX) do you see any error? XLS doesn't use any zip-related features.

@mhenris there were many missing pieces from your zip, and I think some of the files in subdirectories were changed, but after some changes and npm installs I was finally able to get webpack to produce something. I think a buffer shim is being forced by jsforce: ``` $ webpack --display-modules --verbose Hash: 5be65756bade5c51a86a Version: webpack 1.14.0 Time: 4113ms Asset Size Chunks Chunk Names transactions.js 11.6 MB 0 [emitted] transactions ... [24] ./~/readable-stream/readable.js 630 bytes {0} [built] cjs require readable-stream [23] ./~/jsforce/lib/browser/request.js 3:13-39 ... [37] ./~/buffer-shims/index.js 3.23 kB {0} [built] cjs require buffer-shims [27] ./~/readable-stream/lib/_stream_writable.js 47:17-40 cjs require buffer-shims [39] ./~/readable-stream/lib/_stream_readable.js 40:17-40 cjs require buffer-shims [41] ./~/readable-stream/lib/internal/streams/BufferList.js 5:17-40 ``` We will have to revisit zip soon. Just out of curiosity, if you take a file and save it as XLS (not XLSX) do you see any error? XLS doesn't use any zip-related features.

mhenris commented

2017-03-30 22:43:30 +00:00

(Migrated from github.com)

There is no error with .xls file. Only xlsx.

mhenris commented

2017-03-30 23:06:21 +00:00

(Migrated from github.com)

Sorry for the missing stuff, here's a more comprehensive zip file with the package.json and other components, but I think you've figured something out related to JSforce. If I remove it from my list of modules and add the node: { Buffer: false } back into webpack.config, then I am able to successfully parse .xlsx files.

webapp.zip

Sorry for the missing stuff, here's a more comprehensive zip file with the package.json and other components, but I think you've figured something out related to JSforce. If I remove it from my list of modules and add the `node: { Buffer: false }` back into webpack.config, then I am able to successfully parse .xlsx files. [webapp.zip](https://github.com/SheetJS/js-xlsx/files/884009/webapp.zip)

SheetJSDev commented

2017-04-01 16:27:05 +00:00

(Migrated from github.com)

We will change how node is detected (using process) so that should skip the relevant code paths in the browser

We will change how node is detected (using `process`) so that should skip the relevant code paths in the browser

Sign in to join this conversation.