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

aikodeio commented 5 years ago

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\nodejs\npm.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

errorwebpack

jonniebigodes commented 5 years ago

@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 commented 5 years ago

@jonniebigodes thanks! your solution worked perfectly

LekoArts commented 5 years ago

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

jackmorrison12 commented 4 years ago

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

aikodeio commented 4 years ago

@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()
                }]
            }
        })
    }
}

prasetyodimas commented 1 year ago

Thanks for your help @jackmorrison12 realy help fulll, i take you code and tested running well !

Previously : when i'm typing the command npm run build / gatsby build.

Actual Result :

Status : Solved ! when building gatsby 👯

Note : But this code condition have if === build-html ( gatby build / SSR ) when run gatsby develop / npm run start have error to !.

Solutions :

I'm remove the condition logic if statement (done) running start develop ( local / build SSR mode ) error was gone ! 👍🏻

Reference : My profesional portofolio visit => https://github.com/prasetyodimas/prasetyodev

gatsbyjs / gatsby