Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '' #424

Open
andreperegrina opened this issue Jun 6, 2022 · 8 comments

Comments

@andreperegrina
Copy link

I'm just upgrading from craco 5.6.4 to the latest release, and I'm getting this error when trying to build the app.

ERROR in Failed to load plugin '@typescript-eslint' declared in 'BaseConfig': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Referenced from: BaseConfig

This is my eslint configruation

eslint: {
        configure: {
            "rules": {
                "no-restricted-imports": ['error', {
                    "name": "lodash",
                    "message": "Please use the specific module you need."
                }],
                "import/no-unresolved": "error",
                "import/no-named-as-default": 0,
                "import/no-anonymous-default-export": 0,
            },
            "settings": {
                "import/resolver": {
                    "typescript": {}
                }
            },
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
                "project": "./tsconfig.json",
                "tsconfigRootDir": "./"
            },
            "plugins": [
                "@typescript-eslint",
                "import"
            ],
            "extends": [
                "plugin:@typescript-eslint/recommended",
                "plugin:@typescript-eslint/recommended-requiring-type-checking"
            ],
        },
    },

Does anyone know how to solved?

@dilanx
Copy link
Owner

dilanx commented Jun 19, 2022

@andreperegrina can you share your package.json?

@andreperegrina
Copy link
Author

Sure, here is my package.json

{
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "craco start",
    "dev": "SET PORT=8080 && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "husky": {
    "hooks": {
      "pre-push": "node hooks/changelog.js"
    }
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/react": "^5.10.1",
    "@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
    "@reduxjs/toolkit": "^1.8.2",
    "@syncfusion/ej2-react-gantt": "^18.2.46",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "browserslist": "^4.12.0",
    "cleave.js": "^1.6.0",
    "compression-webpack-plugin": "^1.0.1",
    "css-loader": "^0.28.4",
    "dayjs": "^1.10.7",
    "decimal.js": "^10.0.1",
    "dotenv": "^6.2.0",
    "express": "^4.16.1",
    "file-saver": "^2.0.2",
    "formik": "^2.2.6",
    "highcharts": "^8.0.0",
    "highcharts-react-official": "^2.2.2",
    "history": "^4.9.0",
    "leaflet": "^1.7.1",
    "leaflet.markercluster": "^1.5.0",
    "lodash": "^4.17.11",
    "mathjs": "^5.5.0",
    "moment": "^2.24.0",
    "normalize.css": "^7.0.0",
    "postcss-preset-env": "^7.7.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.11.0",
    "raf": "^3.3.2",
    "react": "^18.1.0",
    "react-autosize-textarea": "^6.0.0",
    "react-csv": "^2.2.2",
    "react-datepicker": "^2.9.6",
    "react-dnd": "^7.0.2",
    "react-dnd-html5-backend": "^7.0.2",
    "react-dom": "^18.1.0",
    "react-dropzone": "^10.2.1",
    "react-hotkeys": "^2.0.0",
    "react-leaflet": "^4.0.0",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-mathjax2": "^0.0.2",
    "react-mentions": "^3.3.1",
    "react-number-format": "^4.4.1",
    "react-redux": "^8.0.2",
    "react-reflex": "^4.0.3",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.4.0",
    "react-select-virtualized": "^5.2.0",
    "react-table": "^7.2.1",
    "react-textarea-autosize": "^7.1.0",
    "react-toastify": "^4.5.2",
    "react-trello": "2.2.3",
    "react-virtualized": "^9.22.3",
    "redux": "^4.2.0",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^13.0.0",
    "semantic-ui-react": "2.1.2",
    "signature_pad": "^3.0.0-beta.4",
    "socket.io-client": "^2.1.1",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "uuid": "^3.3.3",
    "validator": "^11.1.0"
  },
  "devDependencies": {
    "@craco/craco": "^6.4.5",
    "@simbathesailor/babel-plugin-use-what-changed": "^0.1.15",
    "@simbathesailor/use-what-changed": "^0.1.21",
    "@types/leaflet": "^1.7.0",
    "@types/react-router-dom": "^5.3.3",
    "husky": "^4.2.5",
    "mini-css-extract-plugin": "^0.8.0",
    "node-fetch": "^2.2.1",
    "react-app-alias": "^2.2.0",
    "redux-devtools-extension": "^2.13.8",
    "sass": "^1.52.2",
    "source-map-explorer": "^2.5.2",
    "typescript": "^4.7.2",
    "webpack": "4.42.0",
    "webpack-bundle-analyzer": "^2.9.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

@dilanx
Copy link
Owner

dilanx commented Oct 2, 2022

@andreperegrina it looks like you're using CRA 5 with craco 6. CRA 5 requires craco 7. I hope to have a stable release available soon but until then you can try using the latest alpha (npm i @craco/craco@alpha).

@allens01
Copy link

Did you manage to resolve this problem? I am experiencing the same issue with a different plugin and I am using craco@7.0.0-alpha.8.

@dilanx
Copy link
Owner

dilanx commented Oct 21, 2022

@allens01 which plugin? Could you share your dependency list and the error you're getting?

@allens01
Copy link

allens01 commented Oct 21, 2022

Sure, the error I am getting is:

ERROR in [eslint] Failed to load plugin 'decorators-legacy' declared in 'BaseConfig': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''

My dependency list:

{
   "dependencies" : {
    "@apollo/client": "^3.4.10",
    "@craco/craco": "7.0.0-alpha.8",
    "@date-io/date-fns": "^2.10.6",
    "@formatjs/intl-listformat": "1.4.8",
    "@formatjs/intl-pluralrules": "1.3.5",
    "@formatjs/intl-relativetimeformat": "4.5.16",
    "@fortawesome/fontawesome-free": "5.15.2",
    "@heed/constants": "^3.70.0",
    "@heed/core-utils.constants": "^1.86.0",
    "@heed/feature-toggles-flags": "^3.45.0",
    "@heed/feature-toggles-react": "^3.20.1",
    "@heed/ui.components": "^3.8.14",
    "@mapbox/sanitize-caja": "^0.1.4",
    "@material-ui/core": "4.9.14",
    "@material-ui/icons": "4.9.1",
    "@material-ui/lab": "4.0.0-alpha.53",
    "@material-ui/pickers": "3.2.10",
    "@material-ui/styles": "4.9.14",
    "@reduxjs/toolkit": "^1.8.5",
    "@tanem/svg-injector": "8.0.50",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "alertify.js": "^1.0.12",
    "antd": "^4.23.6",
    "apexcharts": "^3.33.1",
    "apollo-client": "^2.6.10",
    "apollo-link-context": "^1.0.20",
    "axios": "^0.26.1",
    "bootstrap": "5.1.3",
    "brace": "^0.11.1",
    "case": "^1.6.3",
    "classnames": "^2.3.1",
    "clipboard-copy": "3.1.0",
    "connected-react-router": "^6.9.1",
    "craco-alias": "^3.0.1",
    "cron-parser": "^3.4.0",
    "env-cmd": "^10.1.0",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
    "formik": "^2.2.9",
    "graphql": "^15.5.3",
    "history": "^5.0.0",
    "html-react-parser": "^1.4.0",
    "human-interval": "^2.0.1",
    "immutable": "3.8.2",
    "install": "^0.13.0",
    "joi-browser": "9.0.4",
    "lodash": "^4.17.21",
    "lodash.difference": "^4.5.0",
    "lodash.get": "^4.4.2",
    "lodash.indexof": "^4.0.5",
    "lodash.intersection": "^4.4.0",
    "lodash.noop": "^3.0.1",
    "lodash.startcase": "^4.4.0",
    "moment": "^2.29.4",
    "normalizr": "^3.6.1",
    "object-path": "^0.11.8",
    "perfect-scrollbar": "1.5.0",
    "pluralize": "^8.0.0",
    "prop-types": "^15.7.2",
    "querystring": "^0.2.0",
    "react": "17.0.2",
    "react-ace": "6.6.0",
    "react-apexcharts": "^1.3.9",
    "react-apollo": "^3.1.5",
    "react-bootstrap": "^2.1.1",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-copy-to-clipboard": "^5.0.3",
    "react-date-range": "^1.4.0",
    "react-datepicker": "^4.2.1",
    "react-dnd": "^11.1.3",
    "react-dnd-cjs": "^9.5.1",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dnd-html5-backend-cjs": "^9.5.1",
    "react-dom": "^18.2.0",
    "react-dotdotdot": "^1.3.1",
    "react-final-form": "^6.5.2",
    "react-final-form-arrays": "^3.1.3",
    "react-inlinesvg": "1.2.0",
    "react-intl": "3.6.2",
    "react-json-view": "^1.21.3",
    "react-modal": "^3.13.1",
    "react-perfect-scrollbar": "1.5.8",
    "react-portal": "4.2.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "react-select": "^4.3.1",
    "react-simple-maps": "^3.0.0",
    "react-step-wizard": "^5.3.5",
    "react-text-marquee": "^1.0.1",
    "react-tooltip": "^4.2.21",
    "react-use-websocket": "^2.5.0",
    "react-waypoint": "^9.0.3",
    "react-xml-viewer": "^1.3.0",
    "recompose": "^0.30.0",
    "redux-fetch-resource": "^1.0.3",
    "redux-form": "8.2.6",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "socicon": "3.0.5",
    "socketcluster-client": "14.3.2",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.5",
    "types-joi": "^2.1.0",
    "url-parse": "^1.5.10",
    "uuid": "^8.3.2",
    "validator": "^13.5.2",
    "web-vitals": "^0.2.4"
  },
 "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.13.15",
    "@heed/test-utils-data-generation": "^3.45.0",
    "enzyme": "^3.11.0",
    "redux-mock-store": "^1.5.4",
    "sass": "^1.51.0",
    "sinon": "^10.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  }
}

Craco.config.js snippit

eslint: {
    configure: {    
      "parserOptions": {
         "ecmaFeatures": {
           "legacyDecorators": true
         }
       },
       plugins: [
        "decorators-legacy", 
        "decorators"
       ]
    }
  },

@kyleamazza-fq
Copy link

kyleamazza-fq commented Nov 28, 2022

I'm seeing this same (or similar) issue running craco@7 and react-scripts@5 with eslint when running through cypress.

Error:

ERROR in [eslint] Failed to load plugin 'react' declared in 'BaseConfig': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Referenced from: BaseConfig

Relevant config:

// relevant craco config
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        baseUrl: './src',
      },
    },
    {
      plugin: new NodePolyfillPlugin(),
    },
  ],
  jest: {
    configure: addAliases('jest'),
  },
  devServer: {
    allowedHosts: 'all',
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  eslint: {
    configure: () => eslintConfig,
  },
};
// eslint config
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:cypress/recommended',
    'plugin:import/recommended',
    'prettier',
  ],
  plugins: ['react', 'cypress'],
  rules: {
    // ...omitted for brevity
  },
  globals: {
    window: true,
    document: true,
    fetch: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      alias: {
        map: [['@', './src']],
      },
    },
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  overrides: [
    {
      files: '**/*.test.js',
      env: {
        jest: true,
      },
    },
    {
      extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
      files: ['./*.d.ts', './**/*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      rules: {},
    },
  ],
};

@CowDotDev
Copy link

CowDotDev commented Dec 14, 2022

I just ran into the same issue with @typescript-eslint, and while I can't explain the issue it did fix the build issue while retaining the config extension. Hopefully it can shed some light so it can be fixed.

The issue seems to revolve around the use of plugin: inside of the extends property. Even though my dependencies are installed correctly, just like those posting above, I was receiving the same error for every plugin:

The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''

When I updated my extends to reference the path to the Plugin's config file inside of node_modules the error went away.

Updated .eslintrc.js:

/* eslint-disable import/no-unused-modules */
module.exports = {
  extends: [
    'react-app',
    './node_modules/eslint-plugin-import/config/recommended.js',
    './node_modules/eslint-plugin-import/config/typescript.js',
    'prettier',
  ],
  overrides: [
    {
      files: ['src/**/*.test.*.*'],
      excludedFiles: ['cypress/**/*.*'],
      extends: 'react-app/jest',
    },
    {
      files: ['cypress/**/*.spec.*.*'],
      excludedFiles: ['src/**/*.*'],
      plugins: ['cypress'],
    },
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: './',
      },
    },
  },
  rules: {
    'no-unused-vars': 0,
    '@typescript-eslint/explicit-module-boundary-types': 0,
    '@typescript-eslint/no-unsafe-assignment': 0,
    '@typescript-eslint/no-unsafe-member-access': 0,
    '@typescript-eslint/no-unsafe-call': 0,
    '@typescript-eslint/no-unsafe-return': 0,
    '@typescript-eslint/no-unused-vars': 2,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/unbound-method': 0,
    'no-null/no-null': 0,
    'react-hooks/exhaustive-deps': 0,
    'import/order': [
      'error',
      {
        alphabetize: { order: 'asc', caseInsensitive: true },
        'newlines-between': 'always',
        warnOnUnassignedImports: true,
      },
    ],
  },
};

Old/Erroring .eslintrc.js

* eslint-disable import/no-unused-modules */
module.exports = {
  extends: [
    'react-app',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'prettier',
  ],
  overrides: [
    {
      files: ['src/**/*.test.*.*'],
      excludedFiles: ['cypress/**/*.*'],
      extends: 'react-app/jest',
    },
    {
      files: ['cypress/**/*.spec.*.*'],
      excludedFiles: ['src/**/*.*'],
      plugins: ['cypress'],
    },
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: './',
      },
    },
  },
  rules: {
    'no-unused-vars': 0,
    '@typescript-eslint/explicit-module-boundary-types': 0,
    '@typescript-eslint/no-unsafe-assignment': 0,
    '@typescript-eslint/no-unsafe-member-access': 0,
    '@typescript-eslint/no-unsafe-call': 0,
    '@typescript-eslint/no-unsafe-return': 0,
    '@typescript-eslint/no-unused-vars': 2,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/unbound-method': 0,
    'no-null/no-null': 0,
    'react-hooks/exhaustive-deps': 0,
    'import/order': [
      'error',
      {
        alphabetize: { order: 'asc', caseInsensitive: true },
        'newlines-between': 'always',
        warnOnUnassignedImports: true,
      },
    ],
  },
};

package.json

{
  "dependencies": {
    "@apollo/client": "3.5.8",
    "@auth0/auth0-react": "^1.11.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.5.0",
    "@mui/lab": "^5.0.0-alpha.79",
    "@mui/material": "^5.5.0",
    "@mui/styles": "^5.5.0",
    "@mui/x-data-grid-pro": "^5.2.2",
    "@mui/x-date-pickers": "^5.0.0-alpha.4",
    "@mui/x-date-pickers-pro": "^5.0.0-alpha.4",
    "@mui/x-license-pro": "^5.10.0",
    "@okta/okta-auth-js": "^6.7.2",
    "@okta/okta-react": "^6.6.0",
    "@thoughtspot/visual-embed-sdk": "^1.11.2",
    "apollo-link-error": "^1.1.13",
    "axios": "^0.27.2",
    "chart.js": "3.7.0",
    "chartjs-plugin-datalabels": "^2.0.0",
    "csstype": "^3.1.1",
    "date-fns": "^2.29.1",
    "dotenv": "^14.3.0",
    "express": "^4.17.2",
    "firebase": "^9.6.3",
    "formidable-serverless": "^1.1.1",
    "graphql": "^15.8.0",
    "heatmap.js": "^2.0.5",
    "history": "^5.2.0",
    "html-entities": "^2.3.3",
    "i18next": "^21.6.3",
    "jira.js": "^2.5.2",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "luxon": "^3.1.0",
    "polylabel": "^1.1.0",
    "react": "^17.0.2",
    "react-barcodes": "^1.2.0",
    "react-chartjs-2": "^4.0.0",
    "react-data-grid": "7.0.0-beta.7",
    "react-dom": "^17.0.2",
    "react-dropzone": "^12.0.4",
    "react-firebase-hooks": "^4.0.2",
    "react-helmet": "^6.1.0",
    "react-helmet-async": "^1.2.2",
    "react-hook-form": "^7.22.5",
    "react-i18next": "^11.15.1",
    "react-idle-timer": "^5.4.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.1",
    "react-table": "^7.7.0",
    "react-table-sticky": "^1.1.3",
    "recharts": "^2.1.8",
    "ts-node": "^10.4.0",
    "web-vitals": "^2.1.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@craco/craco": "7.0.0-alpha.0",
    "@google-cloud/secret-manager": "^4.0.0",
    "@graphql-codegen/cli": "2.3.1",
    "@graphql-codegen/introspection": "2.1.1",
    "@graphql-codegen/near-operation-file-preset": "^2.4.3",
    "@graphql-codegen/typescript": "2.4.2",
    "@graphql-codegen/typescript-operations": "2.2.2",
    "@graphql-codegen/typescript-react-apollo": "^3.2.3",
    "@testing-library/cypress": "^8.0.3",
    "@testing-library/dom": "^8.11.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/luxon": "^3.1.0",
    "@types/node": "^16.11.15",
    "@types/polylabel": "^1.0.5",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-table": "^7.7.9",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@typescript-eslint/eslint-plugin": "^5.46.1",
    "@typescript-eslint/parser": "^5.46.1",
    "casual": "^1.6.2",
    "craco-alias": "^3.0.1",
    "eslint": "^8.7.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-import": "^2.26.0",
    "faker": "^5.5.3",
    "husky": "^8.0.1",
    "lint-staged": "^12.1.3",
    "msw": "^0.36.8",
    "prettier": "2.5.1",
    "source-map-loader": "^3.0.1",
    "typescript": "^4.5.4",
    "uuid": "^8.3.2",
    "wait-on": "^6.0.0",
    "wildcard-mock-link": "^2.0.2"
  },
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Waiting
Development

No branches or pull requests

5 participants