Dynamic import from node_modules in react

Question

I want to import a component from node_modules like this. But it not working.

( created project by create-react-app )

import React from 'react';
const a = '@sarin/coral-button';
import(a);

This is an error message.

This is an error message.

This is an error message.

and I have tried to config webpackAlias with customize-cra and react-app-rewired like this in

"config-overides.js" but i still got the same error as before.

module.exports = override( 
addWebpackAlias({
  ["@sarin/coral-button"]: path.resolve(__dirname, "node_modules/@sarin/coral-button"),
}),

but if i import statically it will working.

import React from 'react';
import('@sarin/coral-button');

Answer 1

Webpack does not try to find the variables inside your javascript file. In your case, you have defined some variable a with the path. Then you are using dynamic import. While building, webpack will only perform static analyze. It will not try to find the variable a inside your javascript file. so the correct way is to specify your path directly inside your dynamic import statement.

import(/* webpackChunkName: "user-defined" */'@sarin/coral-button');

Answer 2

From the document of dynamic import is explained

Here specifier will be interpreted the same way as in an import declaration (ie, the same strings will work in both places). However, while specifier is a string it is not necessarily a string literal; thus code like import( ./language-packs/${navigator.language}.js ) will work—something impossible to accomplish with the usual import declarations.

So, Let's change your code to use template string.

import React from 'react';
const a = '@sarin/coral-button';
import(`${a}`);

I have been tested from the latest create-react-app with below code and it work correctly

import React from 'react';
import logo from './logo.svg';
import './App.css';

const a = './hello'
import(`${a}`).then(hello => console.log('HELLO', hello.default))

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

and change code style to use async/await it work correctly too.

import React from 'react';
import logo from './logo.svg';
import './App.css';

(async () => {
  const a = './hello';
  const b = await import(`${a}`);
  console.log(b.default)
})()


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;