Ejected Create-React-App unable to transpile node_modules code from Atlaskit packages

479 Views Asked by At

Atlaskit packages in node_modules are causing Jest to fail in ejected create-react-app. I only have the default App.test.js file so far and receive a SyntaxError: Unexpected token export from @atlaskit/dropdown-menu.

Image of Error

I have looked all over the different questions on StackOverflow and Github Issues, and while the standard answer everyone keeps suggesting to try is to focus on transformIgnorePatterns in the Jest config, nothing I've tried seems to do the trick, so it may be a separate issue.

In package.json my current Jest configuration is as follows. It's the default configuration that shows up after ejecting:

package.json

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }

I have also removed the babel configurations and eslint out of package.json and into their own separate files.

.babelrc.js

const plugins = [
  [
    "module-resolver",
    {
      root: [
        "."
      ],
      alias: {
        atoms: "./src/components/atoms",
        molecules: "./src/components/molecules",
        organisms: "./src/components/organisms",
        pages: "./src/components/pages"
      }
    }
  ]
]

module.exports = {
  env: {
    development: {
      presets: ["react-app"],
      plugins,
    },
    local: {
      presets: ["react-app"],
      plugins,
    },
    qa: {
      presets: ["react-app"],
      plugins,
    },
    stage: {
      presets: ["react-app"],
      plugins,
    },
    production: {
      presets: ["react-app"],
      plugins,
    },
    test: {
      presets: [
        ["react-app",
          { 'preset-env': {
            'modules': 'commonjs'
          }}
        ]
      ],
      plugins,
    }
  }
}

.eslintrc.json

{
    "extends": ["standard", "standard-react"],
    "env": {
        "browser": true,
        "es6": true,
        "jest": true
    },
    "plugins": [
        "standard",
        "react"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "javascript": true,
            "modules": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {

    }
}

I expect, that when npm run test is called, that all node_modules and not just @atlaskit related ones will be properly transformed into code that doesn't cause Jest failures.

0

There are 0 best solutions below