How to import file from public folder in react application?

Question

I have a javascript file in the public folder and I want to import that file to components in the folder src/components.

projectFolder
  publicFolder
    index.html
    recorder.js
  srcFolder
    componentsFolder
       Speech.js
       Speech.css

But I can't do something like this in my component:

import Recorder from '../../public/recorder'

Because I get the following error:

Module not found: You attempted to import ../../public/recorder 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/.

As I've understood it's not allowed to import outside of /src directory, so I was wondering how I could "add a symlink" or if you know other ways to fix it.

Possible duplicate of [The create-react-app imports restriction outside of src directory](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory) — RobC, Jul 31 '19 at 11:05

score 1 · Accepted Answer · answered Sep 25 '18 at 09:57

1

I believe you are using create-react-app ... this is a feature included in the ModuleScopePlugin, and you can disable it by ejecting the app and editing your webpack configuration (as described in this answer).

But beware, the feature exists for a reason. The create-react-app build tool only processes the src/ directory, so for example your JavaScript outside of here will not be transpiled by Babel. Furthermore, you're typically trying to avoid polluting the global scope if you're using a bundler like Webpack. So unless you've got a really specific reason why you'd need to do this, I'd say try and move it.

answered Sep 25 '18 at 09:57

djfdev

5,747
3
19
38

I've moved the file js into src/ folder but now I'm getting the following errors: – Joe Sep 25 '18 at 14:12
./src/recorder.js Line 4: 'define' is not defined no-undef Line 5: 'define' is not defined no-undef Line 12: Unexpected use of 'self' no-restricted-globals Line 13: Unexpected use of 'self' no-restricted-globals Line 455: Unexpected use of 'self' no-restricted-globals Line 455: Unexpected use of 'self' no-restricted-globals Search for the keywords to learn more about each error. – Joe Sep 25 '18 at 14:12
and also the following lines: – Joe Sep 25 '18 at 14:23
index.js:2178 ./src/components/Speech.js Module not found: You attempted to import /recorder 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/. – Joe Sep 25 '18 at 14:23
Have you done anything to try and fix them? Sounds like the first one at least is pretty self-explanatory. The recorder.js file is causing your linter to fail. – djfdev Sep 25 '18 at 15:09
I've deleted the imports from Speech.js, the component where I want to import the recorder.js file and I've deleted the recorder.js script from index.html – Joe Sep 25 '18 at 15:14
https://github.com/w-okada/image-analyze-workers/blob/master/tfl001_google-meet-segmentation/public/index.html → The virtual background logic calls the js file in the public folder. They import js files from public folder in the same way as "declare function createTFLiteModule(): Promise;" But in JavaScript, that syntax doesn't work. Does anyone know how to import it if it's not typescript? – HellJosun Feb 06 '23 at 08:02

score 1 · Answer 2 · answered Jul 28 '19 at 14:24

You can modify the react-scripts config with the rescripts library

Create a file called .rescriptsrc.js in your root folder:

module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

score 0 · Answer 3 · answered Oct 15 '21 at 16:41

If you're ok not using the actual file in public and having a duplicate js file in the src directory there's a hacky but cool solution if you use vscode. This vscode extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave allows you to trigger a command on save (you can use regex to specify which file saves should trigger which commands) and you can specify a command to run on save as such:

{
    "match": "public\\\\recorder.js$",
    "cmd": "copy ${file} ${workspaceFolder}\\src\\recorder.js"
}

Now you can import from that duplicated file.

score -5 · Answer 4 · answered Sep 24 '18 at 20:40

-5

As i can see you want to import parent component in child component.

While defining path './' represents the current directory in which you are working so you can go one level up by following '../' for one level up and the same goes for the upper level directory.

So if you want to import from public folder inside Speech.js component you could do something like this.

// In Speech.js

import Recorder from './../../public/recorder';

Hope this will be useful to you.

answered Sep 24 '18 at 20:40

Alok Rai

75
9

1

`code` [Failed to compile. ./src/components/Speech.js Module not found: You attempted to import ./../../public/recorder 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/. `code` – Joe Sep 25 '18 at 07:42
Do you have any other idea about I could do it? – Joe Sep 25 '18 at 07:43

How to import file from public folder in react application?

4 Answers4

Linked