Module parse failed: Unexpected character '�' (1:0)

[mgsotelo]

Hi,
I am having the following issue while trying to make sharp work on my local dev environment:

[Vue warn]: Error in v-on handler: "Error: 
Something went wrong installing the "sharp" module

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

- Remove the "node_modules/sharp" directory then run
  "npm install --ignore-scripts=false --verbose" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/install
- Search for this error at https://github.com/lovell/sharp/issues
"

found in

---> <BFormFile>
       <AccountSummaryView> at src/components/Account/AccountSummaryView.vue
         <MyAccount> at src/views/MyAccount.vue
           <App> at src/App.vue
             <Root>

My code looks like this (using vue, btw, but i dont't think it can affect the output) :

// previous code ...

methods: {
    uploadimage() {
      console.log("uploadimage method called")
      const sharp = require("sharp");
      sharp(this.profileimgfile)
        .resize({
          width: 300,
          height: 300,
        })
        .webp()
        .toBuffer()
        .then((img) => {
          this.$store.dispatch("modifyuserprofilepic", img);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

// more code ...

Did you see the documentation relating to installation?

Yes, but no information there about this issue.

Have you ensured the architecture and platform of Node.js used for npm install is the same as the architecture and platform of Node.js used at runtime?

Local dev machine so I guess it's ok

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?

mario@mgmac boxy-pe % npm ls sharp
boxy-pe@0.1.0 /Users/mario/Documents/CodeProjects/boxy-pe
└── sharp@0.26.0 

If you are installing as a root or sudo user, have you tried with the npm install --unsafe-perm flag?

Not using root

If you are using the ignore-scripts feature of npm, have you tried with the npm install --ignore-scripts=false flag?

Here's the output of that command:

mario@mgmac boxy-pe % rm -fr node_modules/sharp
mario@mgmac boxy-pe % npm install --ignore-scripts=false --verbose
npm info it worked if it ends with ok
npm verb cli [
npm verb cli   '/usr/local/bin/node',
npm verb cli   '/usr/local/bin/npm',
npm verb cli   'install',
npm verb cli   '--ignore-scripts=false',
npm verb cli   '--verbose'
npm verb cli ]
npm info using npm@6.13.4
npm info using node@v12.14.0
npm verb npm-session c0fc00b5699356fd
npm info lifecycle boxy-pe@0.1.0~preinstall: boxy-pe@0.1.0
npm timing stage:loadCurrentTree Completed in 2276ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 26ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 1181ms
npm timing stage:loadIdealTree:loadAllDepsIntoIdealTree Completed in 1984ms
npm timing stage:loadIdealTree Completed in 3628ms
npm timing stage:generateActionsToTake Completed in 200ms
npm verb correctMkdir /Users/mario/.npm/_locks correctMkdir not in flight; initializing
npm verb lock using /Users/mario/.npm/_locks/staging-7dfe15593b271ae3.lock for /Users/mario/Documents/CodeProjects/boxy-pe/node_modules/.staging
npm timing action:extract Completed in 222ms
npm timing action:finalize Completed in 15ms
npm timing action:refresh-package-json Completed in 59ms
npm info lifecycle semver@7.3.2~preinstall: semver@7.3.2
npm info lifecycle sharp@0.26.0~preinstall: sharp@0.26.0
npm timing action:preinstall Completed in 117ms
npm info linkStuff semver@7.3.2
npm verb linkBins [
npm verb linkBins   { semver: 'bin/semver.js' },
npm verb linkBins   '/Users/mario/Documents/CodeProjects/boxy-pe/node_modules/sharp/node_modules/.bin',
npm verb linkBins   false
npm verb linkBins ]
npm info linkStuff sharp@0.26.0
npm timing action:build Completed in 27ms
npm info lifecycle semver@7.3.2~install: semver@7.3.2
npm info lifecycle sharp@0.26.0~install: sharp@0.26.0

> sharp@0.26.0 install /Users/mario/Documents/CodeProjects/boxy-pe/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/mario/.npm/_libvips/libvips-8.10.0-darwin-x64.tar.br
prebuild-install info begin Prebuild-install version 5.3.5
prebuild-install info looking for cached prebuild @ /Users/mario/.npm/_prebuilds/7f763b-sharp-v0.26.0-napi-v3-darwin-x64.tar.gz
prebuild-install info found cached prebuild 
prebuild-install info unpacking @ /Users/mario/.npm/_prebuilds/7f763b-sharp-v0.26.0-napi-v3-darwin-x64.tar.gz
prebuild-install info unpack resolved to /Users/mario/Documents/CodeProjects/boxy-pe/node_modules/sharp/build/Release/sharp.node
prebuild-install info install Successfully installed prebuilt binary!
npm verb lifecycle sharp@0.26.0~install: unsafe-perm in lifecycle true
npm verb lifecycle sharp@0.26.0~install: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/mario/Documents/CodeProjects/boxy-pe/node_modules/sharp/node_modules/.bin:/Users/mario/Documents/CodeProjects/boxy-pe/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin
npm verb lifecycle sharp@0.26.0~install: CWD: /Users/mario/Documents/CodeProjects/boxy-pe/node_modules/sharp
npm timing audit submit Completed in 2119ms
npm http fetch POST 200 https://registry.npmjs.org/-/npm/v1/security/audits/quick 2118ms
npm timing audit body Completed in 1ms
npm timing action:install Completed in 6552ms
npm info lifecycle semver@7.3.2~postinstall: semver@7.3.2
npm info lifecycle sharp@0.26.0~postinstall: sharp@0.26.0
npm timing action:postinstall Completed in 8ms
npm verb unlock done using /Users/mario/.npm/_locks/staging-7dfe15593b271ae3.lock for /Users/mario/Documents/CodeProjects/boxy-pe/node_modules/.staging
npm timing stage:executeActions Completed in 7095ms
npm timing stage:rollbackFailedOptional Completed in 0ms
npm info linkStuff boxy-pe@0.1.0
npm info lifecycle boxy-pe@0.1.0~install: boxy-pe@0.1.0
npm info lifecycle boxy-pe@0.1.0~postinstall: boxy-pe@0.1.0
npm info lifecycle boxy-pe@0.1.0~prepublish: boxy-pe@0.1.0
npm info lifecycle boxy-pe@0.1.0~prepare: boxy-pe@0.1.0
npm timing stage:runTopLevelLifecycles Completed in 13678ms
npm verb saving []
npm verb shrinkwrap skipping write for package.json because there were no changes.
npm info lifecycle undefined~preshrinkwrap: undefined
npm info lifecycle undefined~shrinkwrap: undefined
npm verb shrinkwrap skipping write for package-lock.json because there were no changes.
npm info lifecycle undefined~postshrinkwrap: undefined
added 2 packages from 65 contributors and audited 1378 packages in 14.813s

53 packages are looking for funding
  run `npm fund` for details

found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
npm verb exit [ 0, true ]
npm timing npm Completed in 16677ms
npm info ok 

What is the complete output of running npm install --verbose sharp? Have you checked this output for useful error messages?

Maybe the same as above

What is the output of running npx envinfo --binaries --system?

mario@mgmac boxy-pe % npx envinfo --binaries --system
npx: instaló 1 en 3.631s

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 295.73 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.14.0 - /usr/local/bin/node
    npm: 6.13.4 - /usr/local/bin/npm

[mgsotelo]

Just to add more information, this is the warning I receive on compile:

WARNING  Compiled with 2 warnings                                                                                                     15:46:23

warning  in ./node_modules/sharp/lib/libvips.js

Critical dependency: the request of a dependency is an expression

warning  in ./node_modules/sharp/build/Release/sharp.node

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

@ ./node_modules/sharp/lib/constructor.js 11:2-40
@ ./node_modules/sharp/lib/index.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Account/AccountSummaryView.vue?vue&type=script&lang=js&
@ ./src/components/Account/AccountSummaryView.vue?vue&type=script&lang=js&
@ ./src/components/Account/AccountSummaryView.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/MyAccount.vue?vue&type=script&lang=js&
@ ./src/views/MyAccount.vue?vue&type=script&lang=js&
@ ./src/views/MyAccount.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[lovell]

Hi, sharp requires the Node.js runtime and will not work in a browser.

[mgsotelo]

Oh, ok, it would've been great to use sharp client-side (because I'm using firebase/aws s3 for storage and I don't really have the need to do some server-side processing) and the other libraries for doing this in the browser are not as good as this one or as well-documented as this is... thanks anyway for your response.

If there is a way to make this work in a browser (a workaround or something like that) please let me know.

Thanks anyway, please close this issue if you consider it appropriate.

[jeremytenjo]

Add to webpack config

{    
  externals: {
    sharp: 'commonjs sharp'
  }
}

[mateozupanjac]

To fix this problem when using Vue, add this to your vue.config.js:
configureWebpack: { externals: { sharp: "commonjs sharp", }, }

[jameswassink]

Note adding it to webpack externals means that it won't be included in the bundle, which may not be what you want. If using node, you can include it with node-loader.

Install it: npm i -D node-loader

In webpack.config.js:

module: {
  rules: [
    { test: /\.ts$/, loader: "ts-loader" },  
    { test: /\.node$/, use: "node-loader"}
  ]
}

(Source)

[smlee]

In my case I just had to add { test: /\.node$/, use: "node-loader"} to the rules:

[lovell]

https://sharp.pixelplumbing.com/install#bundlers