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

Incompatibility with 3.x.x and sst v2 #844

Open
theoldfather opened this issue Sep 12, 2024 · 4 comments
Open

Incompatibility with 3.x.x and sst v2 #844

theoldfather opened this issue Sep 12, 2024 · 4 comments

Comments

@theoldfather
Copy link

Getting this nasty error when I try to updates @shopify/shopify-app-remix from 2.8.2 to 3.x.x. I am running sst v2 (2.43.7) with RemixSite set to build with node 20.x : runtime: "nodejs20.x"

Would love to upgrade so I can get the latest APIs from shopify, but seems like there use of new attributes is causing problems.

Error: There was a problem bundling the SSR function for the "ServerFunction" Site.
Expected ";" but found "with"
node_modules/@shopify/shopify-app-remix/dist/esm/react/components/AppProvider/AppProvider.mjs
3 │ import englishI18n from '@shopify/polaris/locales/en.json' with { type: 'json' };

Trace: Error: There was a problem bundling the SSR function for the "ServerFunction" Site.
Expected ";" but found "with"
node_modules/@shopify/shopify-app-remix/dist/esm/react/components/AppProvider/AppProvider.mjs
3 │ import englishI18n from '@shopify/polaris/locales/en.json' with { type: 'json' };
    at SsrFunction.buildAssetFromHandler (file:///ssd2/Projects/sst-app/node_modules/sst/constructs/SsrFunction.js:225:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///ssd2/Projects/sst-app/node_modules/sst/constructs/SsrFunction.js:65:19
    at process.<anonymous> (file:///ssd2/Projects/sst-app/node_modules/sst/cli/sst.js:58:21)
    at process.emit (node:events:531:35)
    at process.emit (node:domain:488:12)
    at process._fatalException (node:internal/process/execution:178:25)
    at processPromiseRejections (node:internal/process/promises:289:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)

@lizkenyon
Copy link
Contributor

Hi there 👋

This is most likely an issue with the Node version. In Node 22 removed import assertions, and replaced them with import attributes, but they were only patched into specific older node versions.

Can you try one of these Node versions

 "node": "^18.20 || ^20.10 || >=21.0.0"

@theoldfather
Copy link
Author

This is my engine config and my local build version is Node v21.7.3.

"engines": {
    "node": "^20.10 || >=21.0.0"
  },

So far my very hacky and unsatisfying work around is to use a vite plugin:

// vite-import-assertion-plugin.ts
import { transformAsync } from '@babel/core';
import { Plugin } from 'vite';

export default function importAssertionPlugin(): Plugin {
  return {
    name: 'vite-plugin-import-assertion',
    async transform(code: string, id: string): Promise<string | undefined> {
      if (id.includes('node_modules') || !id.endsWith('.mjs')) {
        return undefined;
      }

      const result = await transformAsync(code, {
        filename: id,
        plugins: [
          ['@babel/plugin-syntax-import-assertions'],
        ],
        presets: [
          ['@babel/preset-env', { targets: { node: 'current' } }],
        ],
      });

      return result?.code ?? undefined;
    },
  };
}
// vite.config.ts
...
import importAssertionPlugin from './vite-import-assertion-plugin';
...
plugins: [
    importAssertionPlugin(),
    remix({
      ignoredRouteFiles: ["**/.*"],

    }),
    tsconfigPaths(),
  ],
...
// stacks/stacks.ts
const site = new RemixSite(stack, "site", {
...
      nodejs: {
            esbuild: {
              external: ["@aws-sdk/*"],
              loader: {
                '.json': 'json',
              },
              plugins:[
                {
                  name: 'import-assertion',
                  setup(build) {
                    build.onLoad({ filter: /\.mjs$/ }, async (args) => {
                      const fs = require('fs');
                      let contents = await fs.promises.readFile(args.path, 'utf8');
                      contents = contents.replace(/import .+ from .+ with { type: 'json' };/g, (match) => {
                        return match.replace(' with { type: \'json\' }', '');
                      });
                      return { contents, loader: 'js' };
                    });
                  },
                }
              ]
            },
          },
....

@lizkenyon
Copy link
Contributor

Thank you for the update. And glad to hear you found a workaround for now.

If you are able to provide a minimal repo to reproduce this, as well as the Node versions you are using, we may be able to look into this further to see if there is a better solution for your use case.

@whiskerside
Copy link

same problem to me. execute the deploy command was failed.

{
  "name": "app-name",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "vite build && vite build --ssr",
    "deploy": "remix vite:build && wrangler pages deploy ./build/client",
    "dev": "shopify app dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler pages dev ./build/client",
    "typecheck": "tsc",
    "vite": "vite",
    "typegen": "wrangler types",
    "preview": "npm run build && wrangler pages dev",
    "cf-typegen": "wrangler types"
  },
  "dependencies": {
    "@prisma/adapter-d1": "5.20.0",
    "@prisma/client": "^5.20.0",
    "@remix-run/cloudflare": "2.14.0",
    "@remix-run/cloudflare-pages": "2.14.0",
    "@remix-run/dev": "2.14.0",
    "@remix-run/react": "2.14.0",
    "@remix-run/serve": "2.14.0",
    "@shopify/app-bridge-react": "^4.1.5",
    "@shopify/polaris": "13.4.0",
    "@shopify/shopify-app-remix": "^3.4.0",
    "@shopify/shopify-app-session-storage-prisma": "^5.1.5",
    "isbot": "^5.1.0",
    "moment": "^2.30.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-tsconfig-paths": "^5.0.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20241106.0",
    "@remix-run/dev": "2.14.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "prettier": "^3.3.3",
    "prisma": "^5.22.0",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.3",
    "vite-tsconfig-paths": "^4.2.1",
    "wrangler": "3.57.1"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ]
}

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