building a Vite app fails in a github action

706 Views Asked by At

I'm running some basic steps in a github action, when I build the app I'm getting the following error:

Command failed with exit code 1: npm run build
Could not resolve './***.scss.js' from 
node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js
error during build:
Error: Could not resolve './***.scss.js' from
node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js
    at error (/home/runner/work/xxx/xxx/web/frontend/node_
modules/rollup/dist/shared/rollup.js:198:30)

Seems like a component from polaris library is now able to resolve a js file? the build runs fine locally I'm wondering if I need to install a library prior to do a build?

it's a shopify app I'm using the shopify CLI, any direction will be appreciated.

it's a reactjs app using vite, I added the saas loader to the package json manifest but didn't make any difference.

"sass-loader": "^13.3.2"

Could not resolve './*.scss.js'** is right because does not exists, it's just a scss file not javascript.

this is my yaml file

name: Deploy to Firebase Hosting on PR
"on": pull_request
jobs:
  build_and_preview:
    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: "npm"
      - name: Create .env file
        run: |
          echo "SECRET_KEY=${{ secrets.ENV_PROD }}" >> .env
      - name: Install npm dependencies
        run: npm install -D sass npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXX }}"
          projectId: xxx
2

There are 2 best solutions below

0
On BEST ANSWER

I've found this somewhere on a github thread that worked for me, in the vide config you got to add the config section:

css: {
    preprocessorOptions: {
      scss: {
        includePaths: ["node_modules"],
      },
    },
  },
0
On

I got the same issue and fixed it. Remove global: {} in define section of defineConfig in frontend/vite.config.js file.

define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
    global: {},
},

to

 define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
 },