Unable to run Angular 4 application after building with Webpack.

[elliotwesoff]

Hello,

My Angular app works just fine when using webpack-dev-server, but when trying to launch from a build it doesn't work. I'm getting this error:

Uncaught TypeError: BrowserFS.BFSRequire is not a function

I'm also not receiving any errors while webpack creates the build. Could someone help me out? Thanks!

[jvilk]

Sounds like a configuration issue. Can you open your app with the Chrome debugger open, enable breakpoints on uncaught exceptions, and examine the BrowserFS variable at the location where this exception is thrown? If BrowserFS.BFSRequire is not a function, what is it?

[elliotwesoff]

It looks like it's stopping in process.js...

module.exports = BrowserFS.BFSRequire('process');

//////////////////
// WEBPACK FOOTER
// ./~/browserfs/dist/shims/process.js
// module id = 241
// module chunks = 0 1

BrowserFS at this point is an empty object, thus making BrowserFS.BFSRequire undefined.

[jvilk]

I'm guessing you're using the example configuration in the README? Are you using Webpack 2?

BrowserFS shouldn't be an empty object... the shims all refer to BrowserFS, which the example config defines as a global object:

  plugins: [
    // Expose BrowserFS, process, and Buffer globals.
    new webpack.ProvidePlugin({ BrowserFS: 'bfsGlobal', process: 'processGlobal', Buffer: 'bufferGlobal' })
  ],

bfsGlobal refers to the BrowserFS module:

  resolve: {
    // Use our versions of Node modules.
    alias: {
      'fs': 'browserfs/dist/shims/fs.js',
      'buffer': 'browserfs/dist/shims/buffer.js',
      'path': 'browserfs/dist/shims/path.js',
      'processGlobal': 'browserfs/dist/shims/process.js',
      'bufferGlobal': 'browserfs/dist/shims/bufferGlobal.js',
      'bfsGlobal': require.resolve('browserfs')
    }
  },

[elliotwesoff]

I believe I'm on Webpack 1.15.0

$ npm list | grep -i webpack
+-- @types/webpack-env@1.13.0
+-- base-href-webpack-plugin@1.0.2 extraneous
+-- copy-webpack-plugin@4.0.1
+-- extract-text-webpack-plugin@2.1.0 extraneous
+-- html-webpack-plugin@2.28.0
| +-- extract-text-webpack-plugin@1.0.1 extraneous
| `-- webpack@1.15.0 extraneous
+-- jasmine-webpack-plugin@0.1.1 extraneous
+-- karma-webpack@2.0.3 extraneous
+-- UNMET PEER DEPENDENCY webpack@1.15.0
| `-- webpack-core@0.6.9
+-- webpack-dev-server@1.16.5
| `-- webpack-dev-middleware@1.10.2
+-- webpack-merge@4.1.0 extraneous
+-- webpack-typescript@0.5.6 extraneous

Yeah I've got both the plugins and resolve options in my webpack config just the way you have it. Like I said, it works just fine in the dev server. Idk :/

[hector-del-rio]

Same problem here.

[jvilk]

@hector-del-rio and @elliotwesoff is your code open source? I'm not seeing this in a simple project I just set up with the following code:

webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
   filename: 'bundle.js'
  },
  resolve: {
    // Use our versions of Node modules.
    alias: {
      'fs': 'browserfs/dist/shims/fs.js',
      'buffer': 'browserfs/dist/shims/buffer.js',
      'path': 'browserfs/dist/shims/path.js',
      'processGlobal': 'browserfs/dist/shims/process.js',
      'bufferGlobal': 'browserfs/dist/shims/bufferGlobal.js',
      'bfsGlobal': require.resolve('browserfs')
    }
  },
  plugins: [
    // Expose BrowserFS, process, and Buffer globals.
    // NOTE: If you intend to use BrowserFS in a script tag, you do not need
    // to expose a BrowserFS global.
    new webpack.ProvidePlugin({ BrowserFS: 'bfsGlobal', process: 'processGlobal', Buffer: 'bufferGlobal' })
  ],
  // DISABLE Webpack's built-in process and Buffer polyfills!
  node: {
    process: false,
    Buffer: false
  }
};

index.js:

var fs = BrowserFS.BFSRequire('fs');
BrowserFS.configure({ fs: "LocalStorage" }, function (e) {
  console.log(fs.readdirSync('/'));
});

[hector-del-rio]

I'm trying this in a blank test project and still getting Uncaught TypeError: BrowserFS.BFSRequire is not a function in the browser.

I uploaded the test project here.

[jvilk]

This might be a change in behavior in Webpack 2/3. Webpack was trying to get browserfs.js to depend on itself for Buffer/process/etc.

Adding the following to webpack.config.js seemed to remedy the issue (although your example code does not configure IndexedDB correctly!):

    module: {
      noParse: /browserfs\.js/
    },

Can you let me know if that solves your problem? If so, I'll update the README.

NOTE: This option is also present in Webpack 1, so this may resolve issues in that version as well!

[hector-del-rio]

The code did fix the issue, thank you!

I also corrected the IndexedDB configuration issue. Let me add that not providing options for the backend could use the default values, as they seem to be already there if i define options as an empty object.

[unclejustin]

I had the same problem with Webpack 3. this fixed my issue as well. Maybe update the Readme?

[belohlavek]

Same :point_up:

[elliotwesoff]

Sorry, I'm no longer working on the project that I had the issue with. It seems like the issue has been solved based on the last three comments, so I'll close the issue. Thanks for all the support!

[ev45ive]

@jvilk - Thank you for this solution. Can you please update README with proper comment? I have spent a lot of time trying to solve process.js:1 Uncaught TypeError: BrowserFS.BFSRequire is not a function issue with no success until i finally found this issue. Would be easier for people if its in README.

BTW> Thanks a lot for the great work on BFS!

[jvilk]

Ah, sorry about that. I'll update it now.