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

[BUG] Built-in bundler yield invalid react app #3282

Open
tzvc opened this issue May 7, 2021 · 4 comments
Open

[BUG] Built-in bundler yield invalid react app #3282

tzvc opened this issue May 7, 2021 · 4 comments

Comments

@tzvc
Copy link

tzvc commented May 7, 2021

Hi there,

I'm trying to bundle my latest react app using snowpack's built-in bundler (esbuild) and I'm having issues running the produced build.

The build run without errors. But when I serve the build folder and access my app via the browser, I see only a white screen.

Upon inspection, it seems that the bundle is fetched by the HTML, but doesn't seem to be executed. Also something I noticed is that img assets are loaded by the code as "scripts" thus producing errors.

Screen Shot 2021-05-07 at 3 09 17 pm

The error dont seems to come from the "mimifying" as, if I leave minify: true and turn bundle to false, the app runs normally.

What is even weirder is that, I'm building all my react projects with the exact same config and never had an issue.

Reproduce

npx create-snowpack-app react-snowpack --template @snowpack/app-template-react-typescrip
cd react-snowpack
npm i
npm run build
serve /build

My snowpack config (i'm running snowpack 3.3.7)

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: "/", static: true },
    src: { url: "/dist" },
  },
  plugins: [
    "@snowpack/plugin-react-refresh",
    "@snowpack/plugin-dotenv",
    "@snowpack/plugin-typescript",
    "@snowpack/plugin-postcss",
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    { match: "routes", src: ".*", dest: "/index.html" },
  ],
  optimize: {
    bundle: true,
    minify: true,
  },
};

My tsconfig.json

{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "baseUrl": "./",
    /* paths - import rewriting/resolving */
    "paths": {
      // If you configured any Snowpack aliases, add them here.
      // Add this line to get types for streaming imports (packageOptions.source="remote"):
      //     "*": [".snowpack/types/*"]
      // More info: https://www.snowpack.dev/guides/streaming-imports
    },
    /* noEmit - Snowpack builds (emits) files, not tsc. */
    "noEmit": true,
    /* Additional Options */
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "importsNotUsedAsValues": "error"
  }
}

Where should I look into ?

Cheers!

@azuline
Copy link

azuline commented May 8, 2021

Also experiencing this issue. My build works fine on 3.3.6; bug seems to be introduced in 3.3.7.

Update: Tried again--3.3.6 isn't working, I probably forgot to update deps. 3.0.13 is working and 3.1.0 is not.

@tzvc
Copy link
Author

tzvc commented May 8, 2021

@azuline Same problem for me on 3.3.6. But i was able to build on 3.0.13

@azuline
Copy link

azuline commented May 8, 2021

Strange! Here is my config: https://github.com/azuline/repertoire/tree/master/frontend.

@awu43
Copy link
Contributor

awu43 commented May 9, 2021

Might be caused by #3109, try using this workaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants