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

by

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.

There is no official way to disable this feature except using eject and modify webpack config.

But, most features and its updates are hidden into the internals of create-react-app system. If you make eject you will have no more new 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 assets to src or use based on public folder url without import.

However instead of eject there are much unofficial solutions, based on
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. ModuleScopePlugin is designed to support multiple folders.

The better way is to add fully working additional directories similar to src also protected by ModuleScopePlugin. This can be done using react-app-alias

Anyway do not import from public folder – that will be duplicated in the build folder and will be available by two different url (and 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.

More Related Contents:

  1. where is create-react-app webpack config and files?
  2. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  3. Trying to use fetch and pass in mode: no-cors
  4. Correct path for img on React.js
  5. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  6. ReactJS – Lifting state up vs keeping a local state
  7. npm start error with create-react-app
  8. How to load image files with webpack file-loader
  9. Development server of create-react-app does not auto refresh
  10. ES6 modules implementation, how to load a json file
  11. How to import image (.svg, .png ) in a React Component
  12. firebase.auth is not a function
  13. When should I use brackets with imports
  14. How to store Configuration file and read it using React
  15. Best way to polyfill ES6 features in React app that uses create-react-app
  16. Importing CSS files in Isomorphic React Components
  17. Is it possible to use dotenv in a react project?
  18. “You may need an additional loader to handle the result of these loaders.”
  19. Increase JavaScript Heap size in create-react-app project
  20. how to set up an inline svg with webpack
  21. Jest – SyntaxError: Cannot use import statement outside a module
  22. Electron IPC and nodeIntegration
  23. Webpack 5 – Uncaught ReferenceError: process is not defined
  24. Mock inner axios.create()
  25. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  26. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  27. how can I use top level “await” in typescript next.js
  28. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  29. create-react-app is showing all my code in production, how to hide it?
  30. How to dynamically import SVG and render it inline

Leave a Comment