How would I import a module within an npm package subfolder with webpack?

Question

Lets say theres a package in node_modules called foo and I want to import a module within a library such as foo/module via webpack & babel...

import Foo from 'foo'; works

import SomeOtherModule from 'foo/module'; fails with the following:

Module not found: Error: Cannot resolve module 'foo/module' in /Users/x/Desktop/someproject/js

Which makes make it seem like webpack is looking for the file in the wrong place instead of node_modules

My webpack.config looks like this:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: ['babel-polyfill','./js/script.js'],
    output: {
        path: __dirname,
        filename: './build/script.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015']
                }
            }
        ],
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        colors: true
    },
    devtool: 'source-map'

};

Show file and folder structure for foo module, please – Dmitry Yaremenko Jan 16 '16 at 18:44 — Dmitry Yaremenko, Jan 16 '16 at 18:44

score 33 · Accepted Answer · answered Jan 16 '16 at 19:02

33

It should work with import 'foo/module';. It will resolve file ./node_modules/foo/module.js or ./node_modules/foo/module/index.js and not something like ./node_modules/foo/node_modules/module/index.js if it expected (in that case you better to install module via npm).

answered Jan 16 '16 at 19:02

Dmitry Yaremenko

2,542
20
31

2

structure for the module is `./node_modules/foo/module/index.js` which doesnt resolve – glued Jan 16 '16 at 19:19
2

I checked in test project and it worked, when I rename ./node_modules/foo/module/index.js to ./node_modules/foo/module/index1.js , run webpack, it says "Cannot resolve module 'foo/module' in /home/user/www/so-2/js". So, maybe you have typo in filename? – Dmitry Yaremenko Jan 16 '16 at 19:30
3

oh you're right, the module foo has a folder `src` so `import from foo/src/module` worked thanks – glued Jan 16 '16 at 19:37
1

@DmitryYaremenko Is there a way to import via `import 'foo/module';` a `module.js`file if the file itself has the following path: `foo/src/module.js`? I don't want the `src/` subdirectory to be in the path when importing... – tonix Dec 26 '19 at 09:08
1

@tonix You can try to add alias: https://webpack.js.org/configuration/resolve/ , something like `foo: "foo/src"` – Dmitry Yaremenko Dec 26 '19 at 11:04
Will check it out. Thanks! – tonix Dec 26 '19 at 15:45
for me worked `const { ValidationError } = require('graphql-schema-linter/lib/validation_error')` – Antti Jun 23 '22 at 11:18

score 1 · Answer 2 · answered Feb 04 '20 at 23:13

1

You can define a custom path using the module attribute in your package.json. Example:

{
  ...
  "module": "dist/mylib.min.js",
  ...
}

See What is the "module" package.json field for?

answered Feb 04 '20 at 23:13

Javier S

379
3
13

"... Node.js ignored (and still ignores) the top-level "module" field." (source:https://nodejs.org/api/esm.html#esm_dual_commonjs_es_module_packages) - they very much seem to not want to support this additional field inside package.json – Lajos Mészáros Jun 13 '20 at 17:13

How would I import a module within an npm package subfolder with webpack?

2 Answers2

Linked