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

mgsotelo · 2020-09-01T21:12:42Z

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
[email protected] /Users/mario/Documents/CodeProjects/boxy-pe
└── [email protected]

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 [email protected]
npm info using [email protected]
npm verb npm-session c0fc00b5699356fd
npm info lifecycle [email protected]~preinstall: [email protected]
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 [email protected]~preinstall: [email protected]
npm info lifecycle [email protected]~preinstall: [email protected]
npm timing action:preinstall Completed in 117ms
npm info linkStuff [email protected]
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 [email protected]
npm timing action:build Completed in 27ms
npm info lifecycle [email protected]~install: [email protected]
npm info lifecycle [email protected]~install: [email protected]

> [email protected] 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 [email protected]~install: unsafe-perm in lifecycle true
npm verb lifecycle [email protected]~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 [email protected]~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 [email protected]~postinstall: [email protected]
npm info lifecycle [email protected]~postinstall: [email protected]
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 [email protected]
npm info lifecycle [email protected]~install: [email protected]
npm info lifecycle [email protected]~postinstall: [email protected]
npm info lifecycle [email protected]~prepublish: [email protected]
npm info lifecycle [email protected]~prepare: [email protected]
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

The text was updated successfully, but these errors were encountered:

mgsotelo · 2020-09-01T21:21:36Z

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 · 2020-09-01T22:28:22Z

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

mgsotelo · 2020-09-02T21:42:07Z

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 · 2021-01-19T16:57:37Z

Add to webpack config

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

Support svg image (using sharp), not support online svg now Add externals: { sharp: 'commonjs sharp'} in webpack.config.js lovell/sharp#2350 (comment) Zhihu username sometimes shows undefined, it is because profile is gziped Add gzip: true in fetchProfile Update ts-loader webpack typescript webpack-cli, with somebugs this undefined https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does-this-get-orphaned-in-my-instance-methods Explictly call member function, e.g. const sendRequest = (options) => httpService.sendRequest(options) Always error on property override accessor microsoft/TypeScript#37894 My solution is set tooltip and description in the constructor Remove dep of uglifyjs-webpack-plugin add keyword of 知乎专栏, 知乎, Markdown

mateozupanjac · 2022-06-02T05:44:11Z

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

jameswassink · 2022-06-08T23:01:38Z

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 · 2023-01-03T16:09:40Z

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

lovell · 2023-01-03T16:59:48Z

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

mgsotelo added the installation label Sep 1, 2020

lovell closed this as completed Sep 3, 2020

joe-bell mentioned this issue Jun 13, 2021

@plaiceholder/next: Add Sharp to Webpack Externals joe-bell/plaiceholder#93

Merged

Repository owner locked and limited conversation to collaborators Jan 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mgsotelo commented Sep 1, 2020

mgsotelo commented Sep 1, 2020

lovell commented Sep 1, 2020

mgsotelo commented Sep 2, 2020

jeremytenjo commented Jan 19, 2021

mateozupanjac commented Jun 2, 2022 •

edited

Loading

jameswassink commented Jun 8, 2022

smlee commented Jan 3, 2023 •

edited

Loading

lovell commented Jan 3, 2023

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

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

Comments

mgsotelo commented Sep 1, 2020

mgsotelo commented Sep 1, 2020

lovell commented Sep 1, 2020

mgsotelo commented Sep 2, 2020

jeremytenjo commented Jan 19, 2021

mateozupanjac commented Jun 2, 2022 • edited Loading

jameswassink commented Jun 8, 2022

smlee commented Jan 3, 2023 • edited Loading

lovell commented Jan 3, 2023

mateozupanjac commented Jun 2, 2022 •

edited

Loading

smlee commented Jan 3, 2023 •

edited

Loading