Gatsby: Error building. WEBPACK: Unexpected character '�' (1: 2)

[aikodeio]

Description

Hello! I have a problem that I have not been able to solve with other solutions that I have reviewed for similar problems.

I am using AMCHARTS. When I built my application, WEBPACK showed me the error: "canvas", "jsdom", "xmldom" is not recognized.

I installed those dependencies (npm install canvas jsdom xmldom)

But now, when building my application, WEBPACK shows me the error:
Unexpected character '�' (1: 2)

I don't know why, I can't find the reason :(

Local works well!

Steps to reproduce

• Create a site with gatsby
• Install AMCHARTS (npm install @ amcharts / amcharts4)
• Add a component as indicated in the documentation: https://www.amcharts.com/docs/v4/getting-started/integrations/using-react/
• Run gatsby development (it should work)
• Run gatsby build

Expected result

The application must be built without problems.

Actual result

The gatsby build command fails.
WEBPACK:
Generating SSR bundle failed
Unexpected character '�' (1: 2)

Environment

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
npm: 6.11.2 - C:\Program Files\nodejsnpm.CMD
Browsers:
Edge: 44.18362.329.0
npmPackages:
gatsby: ^2.15.14 => 2.15.14
gatsby-image: ^2.2.18 => 2.2.18
gatsby-plugin-manifest: ^2.2.16 => 2.2.16
gatsby-plugin-no-sourcemaps: ^2.1.1 => 2.1.1
gatsby-plugin-nprogress: ^2.1.6 => 2.1.6
gatsby-plugin-offline: ^2.2.10 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
gatsby-plugin-sharp: ^2.2.21 => 2.2.21
gatsby-source-filesystem: ^2.1.22 => 2.1.22
gatsby-transformer-sharp: ^2.2.14 => 2.2.14

[jonniebigodes]

@aikodeio it seems that the package might not be gatsby/ssr friendly, when you issue the command that specific package or one of it's dependencies is trying to access some apis that are not available, as gatsby builds the pages in node. You can take a look at this and see if it helps.

If the issue still persists after following the documentation i've mentioned, can you please make a reproduction following these steps so that it can be looked at in more detail?

[aikodeio]

@jonniebigodes thanks! your solution worked perfectly

[LekoArts]

Glad you got it working! Let's close this issue then.

[jackmorrison12]

@aikodeio I'm having the same problem - what path did you change the /bad-module/ to in your gatsby-node.js file?

[aikodeio]

@jackmorrison12 I don't know if it's late, but I will share my code that solved this problem:

my gatsby-node.js :

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {

    actions.setWebpackConfig({
        node: {
            fs: 'empty'
        }
    })

    if(stage === 'build-html'){
        actions.setWebpackConfig({
            module: {
                rules: [{
                    test: /canvg/,
                    use: loaders.null()
                }]
            }
        })
    }
}