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

Module parse failed. Unexpected character '#'. #4603

Closed
fluency03 opened this issue Mar 30, 2017 · 19 comments

Comments

Projects
None yet
@fluency03
Copy link

commented Mar 30, 2017

What is the current behavior?

I am using electron-vue. I would like to write some unit test. But encountered the following error.

$npm run unit

> dockeron@0.0.1 unit /Users/fluency03/Workplace/github/dockeron
> cross-env BABEL_ENV=testing-unit karma start test/unit/karma.conf.js

(node:19628) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: bd5b9b00eb149df15584
Version: webpack 2.3.2
Time: 3925ms
   Asset     Size  Chunks  Chunk Names
index.js  1.41 MB       0  index.js
chunk    {0} index.js (index.js) 510 kB [entry] [rendered]
    [9] ./app/src/renderer/js/docker.js 389 bytes {0} [built]
   [10] ./app/src/renderer/vuex/modules/index.js 236 bytes {0} [built]
   [11] ./app/src/renderer/vuex/mutation-types.js 123 bytes {0} [built]
   [13] ./app/src/renderer/components/HomePageView.vue 1.63 kB {0} [built]
   [20] ./app/src/renderer/vuex/actions.js 306 bytes {0} [built]
   [21] ./app/src/renderer/vuex/getters.js 87 bytes {0} [built]
   [22] ./app/src/renderer/vuex/modules/counters.js 459 bytes {0} [optional] [built]
   [23] ./app/src/renderer/vuex/store.js 318 bytes {0} [built]
   [25] ./app/src/renderer/components/HomePageView/SingleContainerView.vue 1.7 kB {0} [built]
   [41] ./app/src/renderer/routes.js 273 bytes {0} [optional] [built]
   [42] ./app/src/renderer/App.vue 1.53 kB {0} [optional] [built]
   [45] ./app/src/renderer ^\.\/(?!main(\.js)?$) 796 bytes {0} [built]
   [46] ./test/unit/specs \.spec$ 184 bytes {0} [built]
   [96] ./test/unit/index.js 238 bytes {0} [built]
   [97] ./test/unit/specs/HomePageView.spec.js 455 bytes {0} [optional] [built]
     + 110 hidden modules

ERROR in ./app/~/JSONStream/index.js
Module parse failed: /Users/fluency03/Workplace/github/dockeron/app/node_modules/JSONStream/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node
|
| var Parser = require('jsonparse')
 @ ./app/~/docker-modem/lib/modem.js 11:15-36
 @ ./app/~/dockerode/lib/docker.js
 @ ./app/src/renderer/js/docker.js
 @ ./app/src/renderer ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  544 kB       0
    chunk    {0} index.html 541 kB [entry]
        [0] ./~/lodash/lodash.js 540 kB {0} [built]
        [1] ./~/html-webpack-plugin/lib/loader.js!./app/index.ejs 1.02 kB {0} [built]
        [2] (webpack)/buildin/module.js 517 bytes {0} [built]

If the current behavior is a bug, please provide the steps to reproduce.

You can find the code here.

The most relevant parts are:

I have tried add:

    new webpack.DefinePlugin({
      '#! /usr/bin/env node': ''
    })

but no luck.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

Node.js: 7.7.4
Webpack: 2.3.2
Operating System: OSX

@sokra

This comment has been minimized.

Copy link
Member

commented Mar 31, 2017

This is a flag about this module being a node.js cli tool.

In general it doesn't make sense to bundle a CLI "tool".

In this case it seem to be a combined CLI + LIB module. (not best practice?)

As workaround you can write a loader removing the hashbag or send a PR splitting the CLI part in to a separate file in JSONStream.

@fluency03

This comment has been minimized.

Copy link
Author

commented Mar 31, 2017

@sokra THanks. I am new to webpack. Could you give me more idea about how to write a loader?

And btw, what is PR?

@sokra

This comment has been minimized.

Copy link
Member

commented Mar 31, 2017

module.exports = function(source) {
  return source.replace(/^#! .*\n/, "");
};
@fluency03

This comment has been minimized.

Copy link
Author

commented Mar 31, 2017

@sokra Thanks. I will try this out and keep it updated.

@fluency03

This comment has been minimized.

Copy link
Author

commented Apr 1, 2017

@sokra I have add the remove-hashbag-loader:

module.exports = function (source) {
  return source.replace(/^#! .*\n/, '')
}

and in webpack config:

{
  test: /\.js$/,
  use: ['babel-loader', 'remove-hashbag-loader']        
  include: [ path.resolve(__dirname, 'app/src/renderer') ],
  exclude: /node_modules/
},

and:

  resolveLoader: {
    alias: {
      'remove-hashbag-loader': path.join(__dirname, './loaders/remove-hashbag-loader')
    }
  },

But still got the save error:

ERROR in ./app/~/JSONStream/index.js
Module parse failed: /Users/fluency03/Workplace/github/dockeron/app/node_modules/JSONStream/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node
|
| var Parser = require('jsonparse')
 @ ./app/~/docker-modem/lib/modem.js 11:15-36
 @ ./app/~/dockerode/lib/docker.js
 @ ./app/src/renderer/js/docker.js
 @ ./app/src/renderer ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
@fluency03

This comment has been minimized.

Copy link
Author

commented Apr 1, 2017

@sokra I have also tried directly use:

      {
        test: /\.js$/,
        use: [
          'babel-loader',
          require.resolve('./loaders/remove-hashbag-loader')
        ],
        include: [ path.resolve(__dirname, 'app/src/renderer') ],
        exclude: /node_modules/
      },

no luck as well.

@sokra

This comment has been minimized.

Copy link
Member

commented Apr 1, 2017

Add another rule which only matches the JSONStream file. You current rule excludes node_modules.

@sokra sokra added the problem label Apr 4, 2017

@SrihariThalla

This comment has been minimized.

Copy link

commented May 16, 2017

Hi @fluency03! Is the issue resolved? I am experiencing the same issue with create-react-app here perliedman/query-overpass#23

@dhruvdutt

This comment has been minimized.

Copy link
Member

commented Sep 7, 2017

This should work fine.

module.exports = function(source) {
  return source.replace(/^.*#!.*$/mg, "");
};
@fwouts

This comment has been minimized.

Copy link

commented Nov 17, 2017

For the next person who runs into the issue, here's how I fixed it thanks to the helpful hints from @fluency03 and @sokra:

Web pack config (in my case webpack.renderer.config.js):

...
module: {
  rules: [
    {
      test: /\.js$/,
      use: ["remove-hashbag-loader"]
    }
    ...
  ]
},
resolveLoader: {
  alias: {
    "remove-hashbag-loader": path.join(__dirname, "./loaders/remove-hashbag-loader")
  }
}

In loaders/remove-hashbag-loader.js:

module.exports = function(source) {
  return source.replace(/^#! .*\n/, "");
};
@mrchief

This comment has been minimized.

Copy link

commented Jan 9, 2018

@fluency03 Have you tried shebang-loader ?

@fr-ser

This comment has been minimized.

@SrihariThalla

This comment has been minimized.

Copy link

commented Jan 30, 2018

This issue is now resolved as the JSONStream has been updated here: dominictarr/JSONStream@debb492

@WouterVanherck

This comment has been minimized.

Copy link

commented Mar 8, 2018

@fr-ser The accepted answer of that question didn't exactly resolve the Unexpected character '# issue because it was depricated. However, the comments helped me out. After that, a new issue occured:

TypeError: str.indexOf is not a function
    at wrapComment (...\node_modules\webpack\lib\BannerPlugin.js:9:9)
    at new BannerPlugin (...\node_modules\webpack\lib\BannerPlugin.js:15:44)
    at Object.<anonymous> (...\config\webpack.config.prod.js:261:5)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (...\scripts\build.js:17:14)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

Have you had the same problem? How did you resolve it?

Link to the corresponding StackOverflow question

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Mar 13, 2018

Original issue was solved. Thanks everyone.
@WouterVanherck you use BannerPlugin for shebang. Please recreate separate other issue. Thanks!

@keshav00001

This comment has been minimized.

Copy link

commented Aug 24, 2018

please help for this problem...

C:\Users\Noargs\Documents\Angular>cd my-app

C:\Users\Noargs\Documents\Angular\my-app>ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-08-24T06:23:17.081Z
Hash: 45253f019453bff022b4
Time: 7394ms
chunk {main} main.js, main.js.map (main) 11.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.26 MB [initial] [rendered]

ERROR in ./ansi-html
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/bin/sh
| basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
|
i 「wdm」: Failed to compile.

Terminate batch job (Y/N)? y

C:\Users\Noargs\Documents\Angular\my-app>ng version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (
| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 6.1.5
Node: 8.11.3
OS: win32 x64
Angular: 6.1.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/cli 6.1.5
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.2.2
typescript 2.7.2
webpack 4.9.2

@phmngocnghia

This comment has been minimized.

Copy link

commented Sep 12, 2018

Bump

@srghma

This comment has been minimized.

Copy link

commented Dec 11, 2018

using https://www.npmjs.com/package/webpack-node-externals (in order to ignore all modules in node_modules folder) helped me with this issue

@manzooralam

This comment has been minimized.

Copy link

commented Jun 23, 2019

Hi guys,
Can any one suggest me, how to resolved this,

After $ng serve

comes this errors:
`
ERROR in ./ansi-html 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

#!/bin/sh
| basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
|
i 「wdm」: Failed to compile.
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.