Module parse failed: Unexpected character '#' (1:0) with Create React App about appauth-js HOT 11 CLOSED

It seems like I just need to exclude node_modules/opener/opener.js from the build process. I've tried running yarn eject on my app and configuring webpack to use shebang-loader for this file, but no luck. I still get the same error.

// Process JS with Babel.
{
  test: /\.(js)$/,
  include: paths.appNodeModules + '/opener/opener.js',
  loader: [require.resolve('shebang-loader'), require.resolve('babel-loader')],
},
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  exclude: paths.appNodeModules + '/opener/opener.js',
  loader: require.resolve('babel-loader'),
  options: {

    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
  },
},

from appauth-js.

I think the problem here might be that opener.js has a #! preamble.
You might want to do a pre-processing step which just removes that line before you run through the react build process.

from appauth-js.

I tried removing #!/usr/bin/env node from ./node_modules/opener/opener.js and that got me a bit further, but not much.

Failed to minify the code from this file: 

        ./node_modules/hoek/lib/index.js:35 

Is this a dependency of AppAuth JS?

from appauth-js.

hoek/lib is not a dependency.

from appauth-js.

According to npm list hoek, it is a dependency of @openid/appauth:

➜  foo git:(master) ✗ npm list hoek
[email protected] /Users/mraible/foo
└─┬ @openid/[email protected]
  └─┬ [email protected]
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├── [email protected]
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ └── [email protected]  deduped
    ├─┬ [email protected]
    │ ├── [email protected]  deduped
    │ └─┬ [email protected]
    │   └── [email protected]  deduped
    ├─┬ [email protected]
    │ ├── [email protected]  deduped
    │ ├─┬ [email protected]
    │ │ ├── [email protected]  deduped
    │ │ └─┬ [email protected]
    │ │   ├── [email protected]  deduped
    │ │   └─┬ [email protected]
    │ │     └── [email protected]  deduped
    │ └─┬ [email protected]
    │   └── [email protected]  deduped
    └─┬ [email protected]
      └── [email protected]  deduped

from appauth-js.

Ah.. So it's a dependency of hapi.
Let me try and reproduce this on my end and investigate. I have been able to use rollup to build AppAuth-JS for prod mode. I used a configuration that looks something like:

import closure from 'rollup-plugin-closure-compiler-js';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';

export default {
  input: 'built/src/index.js',
  output: {
    file: 'built/app-bundle.js',
    format: 'iife',
    name: 'app',
    globals: {'crypto': 'crypto'},
    sourcemap: true
  },
  external: ['crypto'],
  plugins: [
    replace({'process.env.NODE_ENV': JSON.stringify('production')}),
    nodeResolve({jsnext: true, main: true}),
    commonjs(),
    closure({createSourceMap: true}),
  ]
};

And use something like:

node_modules/.bin/tsc && node_modules/.bin/rollup --config config/rollup/prod.js

My devDependencies looks like:

"devDependencies": {
    "npm": "^6.0.0",
    "rollup": "^0.58.2",
    "rollup-plugin-closure-compiler-js": "^1.0.6",
    "rollup-plugin-commonjs": "^9.1.0",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-replace": "^2.0.0",
    "rollup-watch": "^4.3.1",
    "typescript": "^2.8.3"
  }

from appauth-js.

I was able to use electron-builder to package the sample for production and prove it works. The problem is centered around CRA. I'd be a very happy camper if I was able to make the AuthService class above compile in a CRA-generated app.

When I tried to port my app from CRA to be in the appauth-js-electron-sample, I had to change everything to use TypeScript (and JXS). The TypeScript stuff went OK, but trying to figure out Babel and JSX proved frustrating. Ideally, it'd be possible to modify my existing app to somehow work with AuthService (even if it requires ejecting the webpack config).

from appauth-js.

I find trying to keep up with all the changes in webpack frustrating. I use rollup which does a really good job especially combined with closure-compiler.

I will add documentation and sample code around how one can build AppAuth-JS for production (there is a browserify example at https://github.com/openid/AppAuth-JS/blob/master/package.json#L24) but I will also upload a sample that uses rollup.

I will also investigate on what I should be doing to make AppAuth-JS work better with CRA.

from appauth-js.

Closing this for now. Will investigate using Webpack, and update this thread.

from appauth-js.

I am facing this error in an angular-electron application.
ERROR in ./node_modules/opener/opener.js Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. | #!/usr/bin/env node | | "use strict"; ℹ ｢wdm｣: Failed to compile.

I started using the starter from this repository:
https://github.com/maximegris/angular-electron

Included AppAuth-js as dependency and I am facing this error.

ng eject is disabled in current version of angular cli so I cannot modify webpack loader to remove #! as a prebuild step.

Is there any other step I should take to get rid of this error?

from appauth-js.

@zkewal I have same error. Did you find workaround?

from appauth-js.