search

risen228 / craco-alias

A craco plugin for automatic aliases generation for Webpack and Jest
MIT License
109 stars 11 forks source link

TypeError: Cannot add property paths, object is not extensible #21

Closed abbasegbeyemi closed 3 years ago

abbasegbeyemi commented 3 years ago

I don't understand why issues relating to this were closed. But I am facing the same error.

package.json

{
  "name": "aster-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.8.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "@theme-ui/color": "^0.3.3",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.7",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.9",
    "@types/react-redux": "^7.1.11",
    "@types/theme-ui": "^0.3.7",
    "@types/yup": "^0.29.9",
    "@visx/text": "^1.1.0",
    "axios": "^0.21.0",
    "formik": "^2.2.5",
    "history": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "theme-ui": "^0.3.3",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4",
    "yup": "^0.29.3"
  },
  "scripts": {
    "start": "craco start --verbose",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.7.0",
    "@typescript-eslint/parser": "^4.7.0",
    "craco-alias": "^2.1.1",
    "eslint": "^7.13.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "prettier": "^2.1.2"
  }
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@": [
        "/"
      ],
      "@slices": [
        "./store/slices/"
      ],
      "@components": [
        "./components"
      ]
    }
  }
}

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es6",
    "skipDefaultLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts"
  ]
}

craco.config.json

// eslint-disable-next-line @typescript-eslint/no-var-requires
const CracoAlias = require("craco-alias");

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                baseUrl: "./",
                tsConfigPath: "./tsconfig.paths.json",
                debug: true,
            },
        },
    ],
};

I have followed the instruction to a T, I still get the error from react scripts. Please what am I missing?

 $ craco start --verbose
craco:  Project root path resolved to:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend
craco:  Config file path resolved to:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/craco.config.js
craco:  Override started with arguments:  [
  '/Users/abbasegbeyemi/.asdf/installs/nodejs/14.8.0/bin/node',
  '/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/@craco/craco/scripts/start.js',
  '--verbose'
]
craco:  For environment:  development
craco:  Found craco config file at:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/craco.config.js
craco:  Overrided craco config with plugin.
craco:  Applied craco config plugins.
craco:  Found Webpack dev config at:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/config/webpack.config.js
craco:  *** Cannot find ESLint loader (eslint-loader). ***
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
Initial options:

{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true
}

Aliases:

{
  "@": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/",
  "@slices": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/store/slices",
  "@components": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/components"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "@": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/",
  "@slices": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/store/slices",
  "@components": "/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/components"
}

craco:  Applied webpack config plugins.
craco:  Overrided require cache for module: /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/config/webpack.config.js
craco:  Overrided Webpack dev config.
craco:  Found dev server config at:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/config/webpackDevServer.config.js
craco:  Overrided require cache for module: /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/config/webpackDevServer.config.js
craco:  Overrided dev server config provider.
craco:  Starting CRA at:  /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/scripts/start.js
/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

TypeError: Cannot add property paths, object is not extensible
    at verifyTypeScriptSetup (/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at start (/Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/@craco/craco/lib/cra.js:202:5)
    at /Users/abbasegbeyemi/Programming/Aare Tech/aster-frontend/node_modules/@craco/craco/scripts/start.js:27:5
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1
abbasegbeyemi commented 3 years ago

I have come back here because it is just good etiquette to provide feedback when a solution is found. It turns out that react scripts 4.0.0 does not support craco alias as at the time of writing.

I downgraded react scripts to 3.4.3, and it works now.

This is what my package.json looks like now.

{
  "name": "aster-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.8.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "@theme-ui/color": "^0.3.3",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.7",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.9",
    "@types/react-redux": "^7.1.11",
    "@types/theme-ui": "^0.3.7",
    "@types/yup": "^0.29.9",
    "@visx/text": "^1.1.0",
    "axios": "^0.21.0",
    "formik": "^2.2.5",
    "history": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "theme-ui": "^0.3.3",
    "typescript": "4.0.5",
    "web-vitals": "^0.2.4",
    "yup": "^0.29.3"
  },
  "scripts": {
    "start": "craco start --verbose",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.7.0",
    "@typescript-eslint/parser": "^4.7.0",
    "craco-alias": "^2.1.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "prettier": "^2.1.2"
  }
}

craco.config.js

const CracoAlias = require("craco-alias");

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                baseUrl: "./src",
                tsConfigPath: "./tsconfig.paths.json",
            },
        },
    ],
};

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es6",
    "skipDefaultLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts",
    "./node_modules/@theme-ui/core/dist/index.d.ts"
  ]
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@root": [
        "./"
      ],
      "@root/*": [
        "./*"
      ]
    }
  }
}

All the credit goes to @risenforces with the demo he provided here

Thank you.