React: import local files from a dynamic location

Question

I'm using webpack, babel and react.

I have imports all throughout my react project that look something like

import Slideshow from './Slideshow.js'

I have multiple react projects that use the exact same component, so rather than have multiple versions of the same file I'm trying to move my standard components that I reuse into a standard directory such as

~/StandardComponents/Slideshow.js

To reduce the amount of places I would have to edit my code if this directory changes I would like to create a variable and import my modules like this

const standard = '~/StandardComponents'
import Slideshow from standard + '/Slideshow.js'

It looks like one option is maybe setting my node_path within package.json?

I don't really know anything about this, but I attempted it by changing my package.json from

"scripts": {
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  }

"scripts": {
    "dev": "NODE_PATH=./:/Users/Sam/Documents/Projects_and_Code/Code_Projects/Standard",
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  }

Some other solutions I looked at didn't really provide enough detail for me. The correct solution on this question is

System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});

And I don't really know what the 'then' is about, nor the function inside the then and why they have console.log(m) in there (I'm guessing the console.log(m) is just an example of some basic code, but why? What is it an example for?)

I'd very much prefer a solution that just adds something to my webpack.config.js, or package.json that is something like

SearchOnPath: 'currentDir:~/Standards'

or

Standards = '~/Standards'

score 1 · Answer 1 · answered Jul 29 '19 at 10:17

1

You can config alias in your webpack to achieve that https://webpack.js.org/configuration/resolve/.

For example

resolve: {
    alias: {
      StandardComponents: <path_to_your_standard_components>,
    }
  }

In your code

import Slideshow from 'StandardComponents/Slideshow.js'

answered Jul 29 '19 at 10:17

Tien Duong

2,517
1
10
27

I feel that this is most likely the solution I want. When I use it however I get some new problems so I'm not sure if it's correct yet. I posted the new problems to a new question because they were different enough, I'll most likely mark this correct once I get my code working https://stackoverflow.com/questions/57261894/creating-a-directory-of-imported-modules-for-react-using-webpack4-and-babel-htm – Sam Jul 29 '19 at 22:01

React: import local files from a dynamic location

1 Answers1