v0.71.0 builds broken

Builds from 0.70.1 work but not in v0.71.0. The error when I load the page:

caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)

caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)

The culprit:

 * match-sorter-utils
 *
 * Copyright (c) TanStack
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
                parcelHelpers.defineInteropFlag(exports1);
                parcelHelpers.export(exports1, "compareItems", ()=>compareItems);
                parcelHelpers.export(exports1, "rankItem", ()=>rankItem);
                parcelHelpers.export(exports1, "rankings", ()=>rankings);
                const characterMap = {
                    \xc0: "A",

 * match-sorter-utils
 *
 * Copyright (c) TanStack
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
                parcelHelpers.defineInteropFlag(exports1);
                parcelHelpers.export(exports1, "compareItems", ()=>compareItems);
                parcelHelpers.export(exports1, "rankItem", ()=>rankItem);
                parcelHelpers.export(exports1, "rankings", ()=>rankings);
                const characterMap = {
                    \xc0: "A",

Solution:

This was resolved in 0.71.1, thank you!

Jump to solution

24 Replies

lab•2y ago

how are you building it atm btw? What's the full flag? Try building with minifcation on - I just want to verify that the ASCII minifier is functioning as expected :-?...

nahtnamOP•2y ago

I enabled the --no-minify flag so that it would point to the correct line of code. It happens with or without that flag Here is the full command I use: plasmo build --source-maps

lab•2y ago

@nahtnam btw I assume that package came from react-query from TanStack right? which version of it are you using

nahtnamOP•2y ago

    "@tanstack/query-async-storage-persister": "^4.26.1",
    "@tanstack/react-query": "^4.26.1",
    "@tanstack/react-query-devtools": "^4.26.1",
    "@tanstack/react-query-persist-client": "^4.26.1",

    "@tanstack/query-async-storage-persister": "^4.26.1",
    "@tanstack/react-query": "^4.26.1",
    "@tanstack/react-query-devtools": "^4.26.1",
    "@tanstack/react-query-persist-client": "^4.26.1",

Not sure which one

lab•2y ago

Can you do a pnpm why match-sorter-utils seems to come from react-query-devtools can you give me a snippet of how querydevtools is being used?

nahtnamOP•2y ago

Hmmm

export function DevSettings() {
  if (!isDev) return null;

  return (
    <>
      ...
      <ReactQueryDevtools />
    </>
  );
}

export function DevSettings() {
  if (!isDev) return null;

  return (
    <>
      ...
      <ReactQueryDevtools />
    </>
  );
}

And I just render <DevSettings at the bottom of my app (not conditionally) BTW dev works

lab•2y ago

is isDev cached value of process.env.NODE_ENV?

nahtnamOP•2y ago

Little trickier than that

import { env } from './env';

export const isProd = env.PLASMO_PUBLIC_NODE_ENV === 'production';
export const isDev = !isProd;

import { env } from './env';

export const isProd = env.PLASMO_PUBLIC_NODE_ENV === 'production';
export const isDev = !isProd;

env.ts

import { createEnv } from '@t3-oss/env-core';
import { z } from 'zod';

export const env = createEnv({
  clientPrefix: 'PLASMO_PUBLIC_',
  server: {},
  client: {
    PLASMO_PUBLIC_NODE_ENV: z
      .enum(['development', 'test', 'production'])
      .default('development'),
    PLASMO_PUBLIC_SUPABASE_URL: z.string().url(),
    PLASMO_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
    PLASMO_PUBLIC_GTAG_ID: z.string().min(1),
    PLASMO_PUBLIC_TODOIST_CLIENT_ID: z.string().min(1),
    PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID: z.string().min(1),
    PLASMO_PUBLIC_SENTRY_DSN: z.string().optional(),
  },
  runtimeEnvStrict: {
    PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID:
      process.env.PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID,
    PLASMO_PUBLIC_TODOIST_CLIENT_ID:
      process.env.PLASMO_PUBLIC_TODOIST_CLIENT_ID,
    PLASMO_PUBLIC_SUPABASE_ANON_KEY:
      process.env.PLASMO_PUBLIC_SUPABASE_ANON_KEY,
    PLASMO_PUBLIC_SUPABASE_URL: process.env.PLASMO_PUBLIC_SUPABASE_URL,
    PLASMO_PUBLIC_GTAG_ID: process.env.PLASMO_PUBLIC_GTAG_ID,
    PLASMO_PUBLIC_NODE_ENV: process.env.NODE_ENV,
    PLASMO_PUBLIC_SENTRY_DSN: process.env.PLASMO_PUBLIC_SENTRY_DSN,
  },
});

import { createEnv } from '@t3-oss/env-core';
import { z } from 'zod';

export const env = createEnv({
  clientPrefix: 'PLASMO_PUBLIC_',
  server: {},
  client: {
    PLASMO_PUBLIC_NODE_ENV: z
      .enum(['development', 'test', 'production'])
      .default('development'),
    PLASMO_PUBLIC_SUPABASE_URL: z.string().url(),
    PLASMO_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
    PLASMO_PUBLIC_GTAG_ID: z.string().min(1),
    PLASMO_PUBLIC_TODOIST_CLIENT_ID: z.string().min(1),
    PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID: z.string().min(1),
    PLASMO_PUBLIC_SENTRY_DSN: z.string().optional(),
  },
  runtimeEnvStrict: {
    PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID:
      process.env.PLASMO_PUBLIC_GOOGLE_CALENDAR_CLIENT_ID,
    PLASMO_PUBLIC_TODOIST_CLIENT_ID:
      process.env.PLASMO_PUBLIC_TODOIST_CLIENT_ID,
    PLASMO_PUBLIC_SUPABASE_ANON_KEY:
      process.env.PLASMO_PUBLIC_SUPABASE_ANON_KEY,
    PLASMO_PUBLIC_SUPABASE_URL: process.env.PLASMO_PUBLIC_SUPABASE_URL,
    PLASMO_PUBLIC_GTAG_ID: process.env.PLASMO_PUBLIC_GTAG_ID,
    PLASMO_PUBLIC_NODE_ENV: process.env.NODE_ENV,
    PLASMO_PUBLIC_SENTRY_DSN: process.env.PLASMO_PUBLIC_SENTRY_DSN,
  },
});

I have the PLASMO_PUBLIC prefix because its required by the library But you can see at the bottom it's mapped to process.env.NODE_ENV

lab•2y ago

try using process.env.NODE_ENV directly (just to see if it can prune that ReactQueryDevtools

nahtnamOP•2y ago

Changed to

export const isProd = process.env.NODE_ENV === 'production';
export const isDev = process.env.NODE_ENV === 'development';

export const isProd = process.env.NODE_ENV === 'production';
export const isDev = process.env.NODE_ENV === 'development';

Still have the issue

lab•2y ago

runtime env var rehydration like this will likely tamper with the code pruning BTW, but this is unrelated Oh like in the DevSettings itself

nahtnamOP•2y ago

Ahh Changed to if (process.env.NODE_ENV === 'production') return null;, didnt help, let me try with it conditionally rendering the component

lab•2y ago

Will have a patch for you soon apparently the new minifier (based on SWC) doesn't normalize UTF8

nahtnamOP•2y ago

Gotcha For the record, {process.env.NODE_ENV === 'development' && <DevSettings />} doesnt work either BTW I think this means im bundling the react devtools into my prod build which is not ideal either

lab•2y ago

yup if you do if and else does it work?

export function DevSettings() {
  if (process.env.NODE_ENV === "development") {

  return (
    <>
      ...
      <ReactQueryDevtools />
    </>
  );
} else {
return null;
}
}

export function DevSettings() {
  if (process.env.NODE_ENV === "development") {

  return (
    <>
      ...
      <ReactQueryDevtools />
    </>
  );
} else {
return null;
}
}

ref: https://parceljs.org/features/production/#development-branch-removal Oh, and try it with --hoist

nahtnamOP•2y ago

Isn't this the same thing/better? {process.env.NODE_ENV === 'development' ? <DevSettings /> : null} Doesnt work

plasmo build --source-maps --hoist

🟣 Plasmo v0.71.0
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Loaded environment variables from: []

🌼 daisyUI components 2.51.6  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  

🌼 daisyUI components 2.51.6  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  
🔴 ERROR  | Failed to resolve './240c7a708a5899b1-d31e3eea6e646ff7.js' from './240c7a708a5899b1-d31e3eea6e646ff7.js'

plasmo build --source-maps --hoist

🟣 Plasmo v0.71.0
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Loaded environment variables from: []

🌼 daisyUI components 2.51.6  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  

🌼 daisyUI components 2.51.6  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  
🔴 ERROR  | Failed to resolve './240c7a708a5899b1-d31e3eea6e646ff7.js' from './240c7a708a5899b1-d31e3eea6e646ff7.js'

lab•2y ago

interesting react-dev-tool already handled dev env:

export const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =
  process.env.NODE_ENV !== 'development'
    ? function () {
        return null
      }
    : devtools.ReactQueryDevtools

export const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =
  process.env.NODE_ENV !== 'development'
    ? function () {
        return null
      }
    : devtools.ReactQueryDevtools

So on my end, I was able to just do pnpm build --hoist, and simply do this:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

import Search from "~search"

const queryClient = new QueryClient()

function IndexNewtab() {
  return (
    <QueryClientProvider client={queryClient}>
      <Search />
      <ReactQueryDevtools />
    </QueryClientProvider>
  )
}

export default IndexNewtab

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

import Search from "~search"

const queryClient = new QueryClient()

function IndexNewtab() {
  return (
    <QueryClientProvider client={queryClient}>
      <Search />
      <ReactQueryDevtools />
    </QueryClientProvider>
  )
}

export default IndexNewtab

nahtnamOP•2y ago

Does it work without hoist (idk what hoist does) https://discord.com/channels/946290204443025438/1071728581748719646/1071728581748719646 I disabled hoist ^ because of this issue

lab•2y ago

yo sorry had to step out for a bit. hoist basically move all the dependency to the top of your bundle to make tree shaking more efficient

nahtnamOP•2y ago

Interesting, so with hoist did you get the error with the UTF8 stuff?

lab•2y ago

Without it I'm still getting the utf8 key with it, the prod build correctly strip out the devtool xD

nahtnamOP•2y ago

Hmm so looks like I need hoist but hoist doesnt work with the remote code injection thing

lab•2y ago

but yeah it would also ruin your remote code injection can you try assigning the remote injection into some variable and then maybe do some kind of variable assignment on it just to trick the hoister to include the remote code? Hmmm... I'm inspecting the prod and the dev bundle Not sure what the heck's going on with prod build that cause those matches to be borked lol Got a fix for the utf8 issue - apparently if I tell the minifier to keep ascii_only, it aggressively mangle those strng somehow lol tho, to actually discard the devtool, hoisting will be needed @nahtnam xd... without hoist, the prod bundle would include that component..

Solution

nahtnam•2y ago

This was resolved in 0.71.1, thank you!

Gaming

Programming

v0.71.0 builds broken