Module not found: You attempted to import FILEPATH which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[cliffordfajardo]

Description

Getting an error when I try to import files outside of the project src.

Module not found: You attempted to import /my-app/shared/src/utils which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Scenario

I've created a new create-react-app and am using craco. I'm working in a mono-repo style repository that looks like this:

root
    backend
        src
    shared
        src
    web
        src

Is there a way around this?

[Octopixell]

I've ran into the exact same issue unfortunately. Did you manage to find a solution for this @cliffordfajardo ?

[cliffordfajardo]

I ended up using react-app-rewire-alias

• https://www.npmjs.com/package/react-app-rewire-alias

My config-overrides.js file looks like this

```js /** * This file is required by `react-app-rewired` to override or make additions to webpack. * `react-app-rewired` allows us to make modifications & extend `create-react-app` without ejecting. * This allows us to get upstream updates, bug fixes, best practices baked in and improvements * from the react team & open source community. * - https://github.com/timarney/react-app-rewired/ */ const {aliasDangerous, configPaths} = require('react-app-rewire-alias/lib/aliasDangerous'); // const fs = require('fs'); useful for debugging; see commented out fs function call(s) below module.exports = { /** * @description * The Webpack config to use when compiling your react app for development or production * @param {Object} config * @param {string} env - the environment variable passed to node on start. * https://github.com/timarney/react-app-rewired#1-webpack-configuration---development--production */ webpack: function(config, env) { aliasDangerous({ ...configPaths('tsconfig.overrides.json'), })(config) // fs.writeFileSync('debug-config.json', JSON.stringify(config, null, 2)) Uncomment to view see the output for debugging return config; }, } ```

My ts-config-overrides.json file looks like this:

**ts-config-overrides.json** ```json { "extends": "../tsconfig.json", "compilerOptions": { "baseUrl": "./", "paths": { "theme": ["./src/theme/*"], "pages": ["./src/pages/*"], "lib": ["./src/lib/*"], "components": ["./src/components/*"], "@shared/*": ["../shared/src/*"] }, "isolatedModules": false }, "references": [ { "path": "../shared" } ] } ``` **tsconfig.json** ```json { "compilerOptions": { "module": "CommonJS", }, "exclude": ["**/node_modules/**"] } ```

[risen228]

Yeah, this is the CRA restriction. The plugin doesn't remove it; I'll think about adding this feature.

[risen228]

@cliffordfajardo @Octopixell check option unsafeAllowModulesOutsideOfSrc in release 3.0.0