iamyotav
iamyotav
Explore posts from servers
CDCloudflare DevelopersTTCTheo's Typesafe Cult
PostsComments
CDCloudflare Developers
Created by iamyotav on 3/21/2025 in #general-help
Rate Limit and CORS Issue
Hi, We've set up a rate limit using Cloudflare rules, and it's working fine. However, when we hit the rate limit, I get a CORS error. My API server and client are on different domains. I tried to solve this by adding Response Header Transform Rules, but while this has changed the error, it hasn't solved the problem. With Response Header Transform Rules, the error is: Access to XMLHttpRequest at 'https://api-sandbox.meetsummer.org/login' from origin 'https://app-sandbox.meetsummer.org' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Without Response Header Transform Rules, the error is: Access to XMLHttpRequest at 'https://api-sandbox.meetsummer.org/login' from origin 'https://app-sandbox.meetsummer.org' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Can someone guide me on how to resolve this issue?
1 replies
TTCTheo's Typesafe Cult
Created by iamyotav on 10/6/2024 in #questions
Help Needed: Jest Fails to Transform UI Package After Migrating from CRA to Vite in Monorepo
Hi everyone, My name is Yotav, and I'm working on migrating my company's Create React App (CRA) to Vite. We have a large application that we've built over the last 7 years, and it's organized in a monorepo structure. The app uses a custom UI package we've developed, and we use Jest for testing. After starting the migration to Vite and making the necessary adjustments, I managed to get most things working. However, I'm encountering an issue where Jest stops transforming the UI package when running tests in the app. It breaks when it encounters the export keyword. I've tried various solutions found online, but none have resolved the issue. I'm hoping someone here can help. Project Structure: MonoRepo - Packages -- Web-app --- Jest config --- Babel config -- UI --- Jest config --- Babel config Error Example: 
FAIL  src/__tests__/schemas/pslf.spec.js
  ● Test suite failed to run
    Details:

    /Users/yotavmasa/Summer/repos/summer/packages/ui-components/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as Button } from './core/Button';
    SyntaxError: Unexpected token 'export'

      1 | import React from 'react';
      2 |
    > 3 | import { TextInput } from '@summer/ui-components';
        | ^
      4 |
      5 | import { Row } from 'components/pages/idr/wizard/shared/styles';
      6 | import { InputWrapper } from 'components/pages/idr/wizard/steps/Submit/shared/Inputs';

      at Runtime.createScriptFromCode (../../node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (src/components/pages/idr/wizard/steps/Submit/fields/EmployerName.jsx:3:1)
      at Object.require (src/schemas/idr.js:3:1)
      at Object.require (src/schemas/pslf.js:9:1)
      at Object.require (src/__tests__/schemas/pslf.spec.js:4:1)
FAIL  src/__tests__/schemas/pslf.spec.js
  ● Test suite failed to run
    Details:

    /Users/yotavmasa/Summer/repos/summer/packages/ui-components/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as Button } from './core/Button';
    SyntaxError: Unexpected token 'export'

      1 | import React from 'react';
      2 |
    > 3 | import { TextInput } from '@summer/ui-components';
        | ^
      4 |
      5 | import { Row } from 'components/pages/idr/wizard/shared/styles';
      6 | import { InputWrapper } from 'components/pages/idr/wizard/steps/Submit/shared/Inputs';

      at Runtime.createScriptFromCode (../../node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (src/components/pages/idr/wizard/steps/Submit/fields/EmployerName.jsx:3:1)
      at Object.require (src/schemas/idr.js:3:1)
      at Object.require (src/schemas/pslf.js:9:1)
      at Object.require (src/__tests__/schemas/pslf.spec.js:4:1)
What I've Tried: Adjusting transformIgnorePatterns in Jest config. Modifying moduleNameMapper to ensure correct path resolutions. Ensuring Babel presets and plugins are correctly configured. Issue Details: Jest seems to fail when encountering ES6 module syntax (export keyword) in the UI package. The UI package is located in a sibling directory within the monorepo. Jest's error suggests it's not transforming the code from the UI package. you can see that i find the correct path configs: 
const path = require('path');

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest'],
  },
  testEnvironment: '<rootDir>/testEnvironment.js',
  testEnvironmentOptions: {
    url: 'http://localhost',
  },
  modulePaths: ['<rootDir>', '<rootDir>/src'],
  moduleDirectories: [
    'node_modules',
    path.resolve(__dirname, '..'), // Allow importing from sibling packages
  ],
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
  transformIgnorePatterns: [
    '/node_modules/(?!(\\.pnpm|@summer/ui-components))',
  ],
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  testMatch: ['**/*.(spec|test).[tj]s?(x)'],
  extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
  moduleNameMapper: {
    // Map @summer packages to their source files
    '^@summer/(.*)$': path.resolve(__dirname, '..', '$1', 'src'),
  },
};
const path = require('path');

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest'],
  },
  testEnvironment: '<rootDir>/testEnvironment.js',
  testEnvironmentOptions: {
    url: 'http://localhost',
  },
  modulePaths: ['<rootDir>', '<rootDir>/src'],
  moduleDirectories: [
    'node_modules',
    path.resolve(__dirname, '..'), // Allow importing from sibling packages
  ],
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
  transformIgnorePatterns: [
    '/node_modules/(?!(\\.pnpm|@summer/ui-components))',
  ],
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  testMatch: ['**/*.(spec|test).[tj]s?(x)'],
  extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
  moduleNameMapper: {
    // Map @summer packages to their source files
    '^@summer/(.*)$': path.resolve(__dirname, '..', '$1', 'src'),
  },
};
{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "node": "current" }, "modules": "auto" }
    ],
    ["@babel/preset-react", { "runtime": "automatic" }],
    [
      "babel-preset-vite",
      {
        "env": true,
        "glob": false
      }
    ]
  ]
}
{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "node": "current" }, "modules": "auto" }
    ],
    ["@babel/preset-react", { "runtime": "automatic" }],
    [
      "babel-preset-vite",
      {
        "env": true,
        "glob": false
      }
    ]
  ]
}
1 replies