search

dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.42k stars 501 forks source link

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

Open andreperegrina opened 2 years ago

andreperegrina commented 2 years ago

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 commented 2 years ago

@andreperegrina can you share your package.json?

andreperegrina commented 2 years ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

allens01 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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"
  },
}