Importing self-created libraries in reactjs

Question

I'm using React and ES6 using babel and webpack. I am very new to this ecosystem.

I am trying to import some common utility functions into my jsx file but react is unable to find the file

homepage.jsx

var pathToRoot = './../..'; import path from 'path'; import React from 'react'; import ReactDOM from 'react-dom'; var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex; //some react/JSX code

utils.js

var nextWrappedIndex = function(dataArray) { //some plain js code return newIndex; } exports.nextWrappedIndex = nextWrappedIndex;

Directory structure is as follows:

src |--app.js |--components | |--homepage | |--homepage.jsx | |--lib | |--utils.js

I am on a windows 10 machine and was facing issues during compilation providing the path by any other means. Using path.join solved compilation issue but the browser while rendering throws this error Uncaught Error: Cannot find module '../../lib/utils.js'.

How do I accomplish this?

Also, is this the best way to do it(if altogether it is way it is supposed to be done in such ecosystem)?

Kev · Accepted Answer · 2020-09-11 14:26:01Z

One of the best and easiest way I have found in such a setup is to use Webpack aliases.

Webpack aliases will simply associate an absolute path to a name that you can use to import the aliased module from anywhere. No need to count "../" anymore.

How to create an alias?

Let's imagine that your Webpack config is in the parent folder of your src folder.

You would add the following resolve section in your config.

const SRC_FOLDER = path.join(__dirname, 'src') resolve: { alias: { 'my-utils': path.join(SRC_FOLDER, 'lib', 'utils') } }

Now, anywhere in your app, in any of your modules or React component you can do the following:

import utils from 'my-utils' class MyComponent extends React.component { render () { utils.doSomething() } }

Small note about this method. If you run unit tests with a tool like enzyme and you don't run the component tested through Webpack, you will need to use the babel-plugin-webpack-alias.

More info on Webpack website: Webpack aliases

petert · Accepted Answer · 2016-11-20 12:18:36Z

I solved this by replacing

var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;

with

import nextWrappedIndex from './../../lib/utils.js';

I would like to use a variable rather than directly hardcoding such paths

Community · Accepted Answer · 2017-05-23 12:30:20Z

I tried to reproduce your code and Webpack printed me the following error:

WARNING in ./app/components/homepage/homepage.jsx Critical dependencies: 50:0-45 the request of a dependency is an expression @ ./app/components/homepage/homepage.jsx 50:0-45

It means that Webpack couldn't recognize your require() expression because it works only with static paths. So, it discourages the way you are doing.

If you would like to avoid long relative paths in your import, I'd recommend you to set up Webpack.

First, you can set up aliases per Amida's answer.

Also, you can set up an extra module root via resolve.modules to make webpack look into your src folder, when you are importing something absolute, like lib/utils.js

Collectives™ on Stack Overflow

Importing self-created libraries in reactjs

3 Answers 3

How to create an alias?

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

How to create an alias?

1 Comment

1 Comment

Comments

Related