18

I am getting a webpack TypeError when I am trying to simplify an import. The following code works without any issues. Here I am importing a React Higher-Order-Component (HOC) called smartForm from core/components/form/index.js.

core/components/form/index.js (does a named export of smartForm)

export smartForm from './smart-form';

login-form.jsx (imports and uses smartForm)

import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm);

However, I want to simplify the import to just import { smartForm } from 'core'. So I re-exported smart-form in core/index.js and imported it from core. See the code below:

core/index.js (does a named export of smartForm)

export { smartForm } from './components/form';
// export smartForm from './components/form';  <--- Also tried this

login-form.jsx (imports and uses smartForm)

import { smartForm } from 'core';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm); // <--- Runtime exception here

This code compiles without any issues, but I am getting the following runtime exception at the line export default smartForm(LoginForm);:

login-form.jsx:83 Uncaught TypeError: webpack_require.i(...) is not a function(…)

What am I missing?

P.S. Here are the Bable and plugin versions that I am using:

"babel-core": "^6.18.2",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
Naresh
  • 23,937
  • 33
  • 132
  • 204

4 Answers4

17

tl;dr

  • For the questioner: Add this to your webpack.config.js:

    resolve: {
  alias: {
    core: path.join(__dirname, 'core'),
  },
},

  • For the general audience: Make sure the thing you try to import is indeed exists in that package.

Explanation

Questioner's problem: importing own code like npm modules

You try to import your module's exports in the same fashion how you import something from an npm package from the node_modules folder: import { something } from 'packagename';. The problem with this is that doesn't work out of the box. The Node.js docs give the answer on why:

Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.

So you either has to do what Waldo Jeffers and Spain Train suggested and write import { smartForm } from './core', or you can configure webpack so it can resolve your import path via its aliases which are created to solve this exact problem.

Debugging the error message in general

This error can arise if you try to import something from an existing npm package (in node_modules) but the imported thing doesn't exist in the exports. In this case, make sure there were no typos and that the given thing you try to import is indeed in that package. Nowadays it is trendy to break libraries into multiple npm packages, you might be trying to import from a wrong package.

So if you get something like this:

TypeError: __webpack_require__.i(...) is not a function  
   at /home/user/code/test/index.js:165080:81  
   at Layer.handle [as handle_request] (/home/user/code/test/index.js:49645:5)

To get more information on what import you should check, just open the output file generated by webpack and go to the line marked by the topmost line in the error stack (165080 in this case). You should see something like: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). This tells us that there is no match export (or there is but it isn't a function) in react-router-dom, so we need to check our stuff around that import.

totymedli
  • 29,531
  • 22
  • 131
  • 165
2

Since core is a folder of your app and not an npm module, Webpack can not understand which file you want to load. You must use a correct path pointing to a file. You have to replace import { smartForm } from 'core'; by import { smartForm } from './core/index.js

Waldo Jeffers
  • 2,289
  • 1
  • 15
  • 19
  • 2
    `import { smartForm } from './core'` is sufficient. The node module system will load `index.js` automatically when given a dir. (https://nodejs.org/api/modules.html#modules_folders_as_modules) – Spain Train Jul 18 '17 at 16:22
0

This error will occur by many reasons. Once I encountered this error when I add js in file-loader then when I removed it start to work correctly.

 {
     test: /\.(ttf|eot|svg|gif|jpg|png|js)(\?[\s\S]+)?$/,
     use: 'file-loader'
 },

When I remove |js it works

 {
     test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
     use: 'file-loader'
 },
Abdulhakim Zeinu
  • 3,333
  • 1
  • 30
  • 37
0

Just remove these 2 line from config const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);

Ravishankar
  • 470
  • 4
  • 9