Gatsby: babel-preset-gatsby : SyntaxError: Cannot use import statement outside a module

[visualjeff]

I just started to receive this failure on one of my Jest tests. I've seen others encounter a similar type of error but nobody has posted any real solution. I'm assuming I need to have the file @babel/runtime files from node_modules transformed before Jest can work with them? Any suggestions? Adding to the transformIgnorePatterns didn't seem to help.

Error message:

FAIL  src/components/headerLinks.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/jgilber/Documents/ecomm/home/node_modules/@babel/runtime/helpers/esm/slicedToArray.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import arrayWithHoles from "@babel/runtime/helpers/esm/arrayWithHoles";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/forge-components/dist/stories/links/linkWithTooltip/component.js:10:46)

Env info:

Gatsby CLI version: 2.15.1
Gatsby version: 2.29.1
node v14.15.1
MacOS 10.14.6

Package info:

"devDependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "babel-jest": "^26.6.3",
    "babel-plugin-styled-components": "^1.12.0",
    "babel-preset-gatsby": "^0.7.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.15.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-react-app": "^6.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "gatsby-plugin-eslint": "^2.0.8",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "prettier": "2.1.2",
    "react-test-renderer": "^17.0.1"
}

jest.config.js

module.exports = {
  verbose: true,
  transform: {
    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
  },
  collectCoverage: true,
  coverageDirectory: "coverage/reports",
  collectCoverageFrom: ["src/**/*.{js,jsx}"],
  coveragePathIgnorePatterns: [
    "/node_modules/",
    "/mocks/",
    "/public/",
    "/.cache/",
    "/coverage/",
  ],
  moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
  },
  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
  globals: {
    __PATH_PREFIX__: ``,
  },
  testURL: `http://localhost`,
  setupFiles: [`<rootDir>/loadershim.js`],
  setupFilesAfterEnv: ["<rootDir>/setup-test-env.js"],
}

[graysonhicks]

I think you would add the @babel/runtime to your transformIgnorePatterns:

transformIgnorePatterns: [
  '/node_modules/(?!(@babel\/runtime|gatsby))'
]

[visualjeff]

We have a solution!!! You just made my day. I tried a different variation of the same thing and I couldn't get it to work for me. I was doing @babel and didn't include runtime. Anything. Thanks again.