Failed import with Paste icon in Jest #1589

HartiganHM · 2021-06-22T14:47:09Z

HartiganHM
Jun 22, 2021

Hey, all!

We're running into an import error when running our Jest test suites after having added Paste icon imports to our components. I've tried a handful of different TS/Jest/Babel configurations, but thought I would reach out before going any further down the rabbit hole. Below is the error we're seeing, as well as our tsconfig.json and jest.config.ts. Happy to share any other details as necessary.

Thanks for the help!

Error

    SyntaxError: Cannot use import statement outside a module
      1 | import { forwardRef, useRef, useState, ChangeEvent } from 'react';
      2 | import { Margin, Width } from '@twilio-paste/core/style-props';
    > 3 | import { AttachIcon } from '@twilio-paste/icons/esm/AttachIcon';
        | ^
      4 | import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon';
      5 | import { CustomIcon } from '@twilio-paste/icons/esm/CustomIcon';
      6 |
      at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (components/blocks/fileInput/FileInput.tsx:3:1)

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react-jsx",
    "allowJs": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "noImplicitAny": true,
    "strict": true,
    "moduleResolution": "node",
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": {
      "types": ["../types.ts"]
    },
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
    "typings/index.d.ts",
    "dist",
    "out",
    "vendor"
  ]
}

jest.config.ts

/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/en/configuration.html
 */

export default {
  globals: {
    'ts-jest': {
      diagnostics: true,
      tsconfig: './tsconfig.json',
    },
  },

  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
  // maxWorkers: "50%",

  // An array of directory names to be searched recursively up from the requiring module's location
  moduleDirectories: ['node_modules', 'src'],

  // An array of file extensions your modules use
  moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },

  // The root directory that Jest should scan for tests and modules within
  rootDir: 'src',

  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],

  // A map from regular expressions to paths to transformers
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
};

Answered by HartiganHM

Jun 23, 2021

Re-posting here for more visibility outside of the nested comment thread:

Ultimate Solution

Built a custom resolver to point any esm icon dependencies to the corresponding cjs directories

/**
 * We're creating our own module resolver for jest because it is having a
 * very hard time finding our monorepo packages.  When we import a `@paste`
 * package we use our own module resolution, otherwise we use the default
 * node one.
 *
 * @param {string} package
 * @param {*} details
 */
function customResolver(package, details) {
  if (
    package.includes('@twilio-paste/') &&
    package.includes('icons') &&
    package.includes('esm')
  ) {
    const [start, end] = package.split('esm');
    …

View full answer

SiTaggart · 2021-06-22T18:25:12Z

SiTaggart
Jun 22, 2021

Hi @HartiganHM

This comes up fairly regularly, we have a small guide on the getting started page, so start there and let us know if that unblocks you https://paste.twilio.design/getting-started/engineering#handling-icons-in-jest

10 replies

TheSisb Jun 23, 2021

(node:46237) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'cookie' of null

This line doesn't look to be a Paste error since we aren't using the term cookie anywhere afaik. Search your code for cookie to see where this is trying to pull from, because that object is null.

(node:46237) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:46237) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

These lines are likely related, because you may be trying to get the value for a key cookie in a promise without wrapping a try {} catch(e) {}.

HartiganHM Jun 23, 2021
Author

@TheSisb I've recruited some of my team to help unblock me with this issue, but we're still running into errors intermittently. Currently, the main error we're seeing is below. Looks like it has to do with a module resolution error, though I'm not positive. We've tried a number of different solutions until finally going the route of a custom resolver (per your recommendation), which effectively points any esm icon packages to the cjs directory instead. I've posted the resolver we built below.

I've been blocked for coming up on three days now and may need to pivot soon, so any help is appreciated!

resolver.js

/**
 * We're creating our own module resolver for jest because it is having a
 * very hard time finding our monorepo packages.  When we import a `@paste`
 * package we use our own module resolution, otherwise we use the default
 * node one.
 *
 * @param {string} package
 * @param {*} details
 */
function customResolver(package, details) {
  if (
    package.includes('@twilio-paste/') &&
    package.includes('icons') &&
    package.includes('esm')
  ) {
    const [start, end] = package.split('esm');
    const newPackage = `${start}cjs${end}`;

    return details.defaultResolver(newPackage, details);
  }

  return details.defaultResolver(package, details);
}

module.exports = customResolver;

Error

  ● Console

    console.error
      Error: Uncaught [TypeError: Cannot read property 'fontSize50' of undefined]
          at reportException (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at innerInvokeEventListeners (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
          at invokeEventListeners (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: Cannot read property 'fontSize50' of undefined
          at TooltipArrow (/Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/tooltip/dist/index.js:1:1405)
          at renderWithHooks (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/hhartigan/Projects/support/help-center-ui/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at /Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:11327:26
          at unstable_runWithPriority (/Users/hhartigan/Projects/support/help-center-ui/node_modules/scheduler/cjs/scheduler.development.js:468:12)
          at runWithPriority$1 (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
          at flushSyncCallbackQueueImpl (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
          at flushSyncCallbackQueue (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
          at scheduleUpdateOnFiber (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:21893:9)
          at dispatchAction (/Users/hhartigan/Projects/support/help-center-ui/node_modules/react-dom/cjs/react-dom.development.js:16139:5)
          at /Users/hhartigan/Projects/support/help-center-ui/src/containers/SupportRequestForm/SupportRequestForm.tsx:83:9
          at Generator.next (<anonymous>)
          at fulfilled (/Users/hhartigan/Projects/support/help-center-ui/src/containers/SupportRequestForm/SupportRequestForm.tsx:5:58)
          at processTicksAndRejections (internal/process/task_queues.js:97:5)

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)

    console.error
      The above error occurred in the <TooltipArrow> component:
      
          at TooltipArrow (/Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/tooltip/dist/index.js:1:1319)
          at div
          at Styled(div)
          at div
          at Styled(div)
          at /Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/tooltip/dist/index.js:1:1577
          at Ue (/Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/reakit-library/dist/index.js:3:53647)
          at f (/Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/reakit-library/dist/index.js:2:2516)
          at Tooltip (/Users/hhartigan/Projects/support/help-center-ui/node_modules/@twilio-paste/tooltip/dist/index.js:1:2013)
          at div
          at Styled(div)
          at FileInput (/Users/hhartigan/Projects/support/help-center-ui/src/components/blocks/fileInput/FileInput.tsx:50:3)
          at form
          at Styled(div)
          at SupportRequestForm (/Users/hhartigan/Projects/support/help-center-ui/src/containers/SupportRequestForm/SupportRequestForm.tsx:50:38)
          at section
          at Styled(div)
          at TicketSubmission (/Users/hhartigan/Projects/support/help-center-ui/src/containers/TicketSubmission/TicketSubmission.tsx:13:3)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)

SiTaggart Jun 23, 2021

For that latest error are your test components wrapped in a theme provider, as per our guidelines? https://paste.twilio.design/getting-started/engineering#jest-testing

That's usually the source of a "I can't find what this token name is" error

HartiganHM Jun 23, 2021
Author

@SiTaggart Didn't realize we missed that, thanks for pointing it out! Looks like we're all set now. I'm going to run through everything and trim off what didn't work. I'll follow up with a post about the final solution. Seems like the big fix was the custom resolver in the Jest config per @TheSisb's recommendation.

HartiganHM Jun 23, 2021
Author

Ultimate Solution

Built a custom resolver to point any esm icon dependencies to the corresponding cjs directories

/**
 * We're creating our own module resolver for jest because it is having a
 * very hard time finding our monorepo packages.  When we import a `@paste`
 * package we use our own module resolution, otherwise we use the default
 * node one.
 *
 * @param {string} package
 * @param {*} details
 */
function customResolver(package, details) {
  if (
    package.includes('@twilio-paste/') &&
    package.includes('icons') &&
    package.includes('esm')
  ) {
    const [start, end] = package.split('esm');
    const newPackage = `${start}cjs${end}`;

    return details.defaultResolver(newPackage, details);
  }

  return details.defaultResolver(package, details);
}

module.exports = customResolver;

Updated jest.config.ts to include the below:

 resolver: '<rootDir>/.jest/resolver.js',
 transform: {
   '^.+\\.tsx?$': 'ts-jest',
   '^.+\\.js?$': 'babel-jest',
 },

Add a babel.config.js with the below (plus install of @babel/preset-typescript):

 module.exports = {
   presets: ['@babel/env', '@babel/typescript'],
 },

Update necessary page components to use Theme.Provider (here)

What we tried that was unnecessary

Converted jest.config.ts to *.js
Adding transformIgnorePatterns: ['/node_modules/@twilio-paste/icons/.*'] to our jest.config.ts
Lots of other complicated changes to .babelrc and/or babel.config.js
Adding import 'core-js/stable' or import 'regenerator-runtime/runtime' to our Jest setup file

HartiganHM · 2021-06-23T16:44:11Z

HartiganHM
Jun 23, 2021
Author

Re-posting here for more visibility outside of the nested comment thread:

Ultimate Solution

Built a custom resolver to point any esm icon dependencies to the corresponding cjs directories

/**
 * We're creating our own module resolver for jest because it is having a
 * very hard time finding our monorepo packages.  When we import a `@paste`
 * package we use our own module resolution, otherwise we use the default
 * node one.
 *
 * @param {string} package
 * @param {*} details
 */
function customResolver(package, details) {
  if (
    package.includes('@twilio-paste/') &&
    package.includes('icons') &&
    package.includes('esm')
  ) {
    const [start, end] = package.split('esm');
    const newPackage = `${start}cjs${end}`;

    return details.defaultResolver(newPackage, details);
  }

  return details.defaultResolver(package, details);
}

module.exports = customResolver;

Updated jest.config.ts to include the below:

 resolver: '<rootDir>/.jest/resolver.js',
 transform: {
   '^.+\\.tsx?$': 'ts-jest',
   '^.+\\.js?$': 'babel-jest',
 },

Add a babel.config.js with the below (plus install of @babel/preset-typescript):

 module.exports = {
   presets: ['@babel/env', '@babel/typescript'],
 },

Update necessary page components to use Theme.Provider (here)

What we tried that was unnecessary

Converted jest.config.ts to *.js
Adding transformIgnorePatterns: ['/node_modules/@twilio-paste/icons/.*'] to our jest.config.ts
Lots of other complicated changes to .babelrc and/or babel.config.js
Adding import 'core-js/stable' or import 'regenerator-runtime/runtime' to our Jest setup file

2 replies

TheSisb Jun 23, 2021

Thanks for reporting back with a clean solution and working through this issue with us! I'm sure this will help others in the future.

HartiganHM Jun 23, 2021
Author

@TheSisb Of course! I appreciate everyone on the Paste team working through the "Daily Hugh Question" with me 😅

Keep up the awesome work! 🔥

Failed import with Paste icon in Jest #1589

Uh oh!

HartiganHM Jun 22, 2021

Replies: 2 comments · 12 replies

Uh oh!

SiTaggart Jun 22, 2021

Uh oh!

Uh oh!

TheSisb Jun 23, 2021

Uh oh!

HartiganHM Jun 23, 2021 Author

Uh oh!

SiTaggart Jun 23, 2021

Uh oh!

HartiganHM Jun 23, 2021 Author

Uh oh!

Uh oh!

HartiganHM Jun 23, 2021 Author

Uh oh!

HartiganHM Jun 23, 2021 Author

Uh oh!

TheSisb Jun 23, 2021

Uh oh!

HartiganHM Jun 23, 2021 Author

HartiganHM
Jun 22, 2021

Replies: 2 comments 12 replies

SiTaggart
Jun 22, 2021

HartiganHM Jun 23, 2021
Author

HartiganHM Jun 23, 2021
Author

HartiganHM Jun 23, 2021
Author

HartiganHM
Jun 23, 2021
Author

HartiganHM Jun 23, 2021
Author