craco
craco copied to clipboard
Published
20 hours ago •
dilanx
dilanx
The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
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?
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"
]
}
@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).
Did you manage to resolve this problem? I am experiencing the same issue with a different plugin and I am using [email protected].
@allens01 which plugin? Could you share your dependency list and the error you're getting?
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"
]
}
},
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: {},
},
],
};
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"
},
}
