The create-react-app imports restriction outside of src directory

Question

I am using create-react-app  I am trying to call an image from my public folder from a file inside my src components  I am receiving this error message        src components website index js Module not found  You attempted to   import       public images logo WC-BlackonWhite jpg which falls   outside of the project src  directory  Relative imports outside of   src  are not supported  You can either move it inside src   or add a   symlink to it from project s node modules     import logo from        public images logo 2016 png    lt img className  Header-logo  src  logo  alt  Logo    gt   I have read many things saying you can do an import to the path but that is still not working for me  Any help would be greatly appreciated  I know there are many questions like this but they are all telling me to import logo or image so clearly I am missing something in the big picture

User · Answer

There are a few answers that provide solutions with react-app-rewired, but customize-cra exposes a special removeModuleScopePlugin() API which is a bit more elegant. (It's the same solution, but abstracted away by the customize-cra package.)

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

User · Answer

This is special restriction added by developers of create-react-app  It is implemented in ModuleScopePlugin to ensure files reside in src   That plugin ensures that relative imports from app s source directory don t reach outside of it  You can disable this feature  one of the ways  by eject operation of create-react-app project  Most features and its updates are hidden into the internals of create-react-app system  If you make eject you will no more have some features and its update  So if you are not ready to manage and configure application included to configure webpack and so on - do not do eject operation  Play by the existing rules  move to src   But now you can know how to remove restriction  do eject and remove ModuleScopePlugin from webpack configuration file   Instead of eject there are intermediate solutions  like rewire which allows you to programmatically modify the webpack config without eject  But removing the ModuleScopePlugin plugin is not good - this loses some protection and does not adds some features available in src  The better way is to add fully working additional directories similar to src  This can be done using react-app-rewire-alias  Do not import from public folder - that will be duplicated in the build folder and will be available by two different url  or with different ways to load   which ultimately worsen the package download size  Importing from the src folder is preferable and has advantages  Everything will be packed by webpack to the bundle with chunks optimal size and for best loading efficiency

User · Answer

I have had to overcome this same issue in Truffle  The solution was as follows  ince Create-React-App s default behavior disallows importing files from outside of the src folder  we need to bring the contracts in our build folder inside src  We can copy and paste them every time we compile our contracts  but a better way is to simply configure Truffle to put the files there  In the truffle-config js file  replace the contents with the following  const path   require  quot path quot     module exports       contracts build directory  path join   dirname   quot client src contracts quot       I don t know if this helps you  but I know I found your question when I had the same issue in Truffle  and this might help someone else

User · Answer

The package react-app-rewired can be used to remove the plugin  This way you do not have to eject   Follow the steps on the npm package page  install the package and flip the calls in the package json file  and use a config-overrides js file similar to this one   const ModuleScopePlugin   require  react-dev-utils ModuleScopePlugin     module exports   function override config  env        config resolve plugins   config resolve plugins filter plugin   gt    plugin instanceof ModuleScopePlugin         return config       This will remove the ModuleScopePlugin from the used WebPack plugins  but leave the rest as it was and removes the necessity to eject

User · Answer

This restriction makes sure all files or modules  exports  are inside src  directory  the implementation is in   node modules react-dev-utils ModuleScopePlugin js  in following lines of code     Resolve the issuer from our appSrc and make sure it s one of our files    Maybe an indexOf     0 would be better       const relative   path relative appSrc  request context issuer      If it s not in src  or a subdirectory  not our request       if  relative startsWith           relative startsWith                    return callback             You can remove this restriction by  either changing this piece of code  not recommended  or do eject then remove ModuleScopePlugin js from the directory  or comment remove const ModuleScopePlugin   require  react-dev-utils ModuleScopePlugin    from   node modules react-scripts config webpack config dev js  PS  beware of the consequences of eject

User · Answer

To offer a little bit more information to other s answers  You have two options regarding how to deliver the  png file to the user  The file structure should conform to the method you choose  The two options are    Use the module system  import x from y  provided with react-create-app and bundle it with your JS  Place the image inside the src folder  Serve it from the public folder and let Node serve the file  create-react-app also apparently comes with an environment variable e g   lt img src  process env PUBLIC URL     img logo png     gt    This means you can reference it in your React app but still have it served through Node  with your browser asking for it separately in a normal GET request    Source  create-react-app

User · Answer

I think Lukas Bach solution to use react-app-rewired in order to modify webpack config is a good way to go  however  I wouldn t exclude the whole ModuleScopePlugin but instead whitelist the specific file that can be imported outside of src   config-overrides js  const ModuleScopePlugin   require  react-dev-utils ModuleScopePlugin    const path   require  path     module exports   function override config      config resolve plugins forEach plugin   gt        if  plugin instanceof ModuleScopePlugin          plugin allowedFiles add path resolve    config json                    return config

User · Answer

Adding to Bartek Maciejiczek s answer  this is how it looks with Craco      const ModuleScopePlugin   require  quot react-dev-utils ModuleScopePlugin quot        const path   require  quot path quot         module exports           webpack            configure  webpackConfig   gt              webpackConfig resolve plugins forEach plugin   gt                if  plugin instanceof ModuleScopePlugin                  plugin allowedFiles add path resolve  quot   config json quot                                           return webpackConfig

User · Answer

If your images are in the public folder then you should use     images logo 2016 png    in your  lt img gt  src instead of importing         public images logo 2016 png      This will work   lt img className  Header-logo  src   images logo 2016 png  alt  Logo    gt

User · Answer

You don t need to eject  you can modify the react-scripts config with the rescripts library  This would work then   module exports   config   gt      const scopePluginIndex   config resolve plugins findIndex         constructor      gt  constructor  amp  amp  constructor name      ModuleScopePlugin          config resolve plugins splice scopePluginIndex  1      return config

User · Answer

Remove it using Craco   module exports       webpack        configure  webpackConfig   gt          const scopePluginIndex   webpackConfig resolve plugins findIndex             constructor      gt  constructor  amp  amp  constructor name      ModuleScopePlugin                  webpackConfig resolve plugins splice scopePluginIndex  1         return webpackConfig

User · Answer

You need to move WC-BlackonWhite jpg into your src directory  The public directory is for static files that s going to be linked directly in the HTML  such as the favicon   not stuff that you re going to import directly into your bundle

User · Answer

If you need multiple modifications  like when using ant design  you can combine multiple functions like this    const     override    removeModuleScopePlugin    fixBabelImports      require  customize-cra     module exports   override    fixBabelImports  import         libraryName   antd       libraryDirectory   es       style   css           removeModuleScopePlugin

User · Answer

install these two packages  npm i --save-dev react-app-rewired customize-cra   package json   scripts         -  start    react-scripts start         start    react-app-rewired start       config-overrides js  const   removeModuleScopePlugin     require  customize-cra     module exports   function override config  env        if   config plugins            config plugins                 removeModuleScopePlugin   config        return config

User · Answer

Image inside public folder    use image inside html extension    lt img src   PUBLIC URL  resumepic png   gt     use image inside  js extension    lt img src  process env PUBLIC URL   resumepic png    gt     use image inside js Extension

User · Answer

the best solution is to fork react-scripts  this is actually mentioned in the official documentation  see  Alternatives to Ejecting

User · Answer

If you only need to import a single file  such as README md or package json  then this can be explicitly added to ModuleScopePlugin     config paths js  const resolveApp   relativePath   gt  path resolve appDirectory  relativePath   module exports       appPackageJson  resolveApp  package json      appReadmeMD     resolveApp  README md         config webpack config dev js   config webpack config prod js  module exports       resolve        plugins             Prevents users from importing files from outside of src   or node modules             This often causes confusion because we only process files within src  with babel           To fix this  we prevent you from importing files out of src  -- if you d like to           please link the files into your node modules  and let module-resolution kick in           Make sure your source files are compiled  as they will not be processed in any way        new ModuleScopePlugin paths appSrc              paths appPackageJson            paths appReadmeMD            README md lives outside of   src  so needs to be explicitly included in ModuleScopePlugin

User · Answer

You can try using simlinks  but in reverse  React won t follow simlinks  but you can move something to the source directory  and create a simlink to it  In the root of my project  I had a node server directory that had several schema files in it  I wanted to use them on the frontend  so I   moved the files  src in the termal  I cd ed into where the schema files belonged in server ln -s SRC PATH OF SCHEMA FILE  This gave react what it was looking for  and node was perfectly happy including files through simlinks

[javascript] The create-react-app imports restriction outside of src directory

package.json

config-overrides.js

Examples related to javascript

Examples related to reactjs

Examples related to webpack

Examples related to create-react-app