javascript - ES6 Webpack Relative imports - Module not found: Error: Cannot resolve module - Stack Overflow

admin管理员组

文章数量:1390192

I'm trying to find some information about Webpack and relative imports when working with ES6 and Babel.

I have an import line in a simple entry point in my app:

// app.es6
import * as sayHello from 'sayHello';
console.log(sayHello());

sayHello.es6 is the same directory as app.es6. (The contents of sayHello.es6 is not significant).

When I run the Webpack piler via the mand line:

$ webpack

I get the following error:

ERROR in ./app/app.es6
Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app

This is solved by setting the path to relative:

// app.es6 - note the ./ in the import
import * as sayHello from './sayHello';
console.log(sayHello());

This is a bit of a pain because it's different to the example es6 code on Babel website under the Modules section.

Here is my Webpack config:

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

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.es6'
  ],
  output: {
      publicPath: '/',
      filename: './dist/app.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js|\.es6$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:
        {
          presets:['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.es6'],
  },
};

Question: Does any one know why there is this difference? Or where the relevant information regarding ES6 module imports is in the Webpack documentation?

I'm trying to find some information about Webpack and relative imports when working with ES6 and Babel.

I have an import line in a simple entry point in my app:

// app.es6
import * as sayHello from 'sayHello';
console.log(sayHello());

sayHello.es6 is the same directory as app.es6. (The contents of sayHello.es6 is not significant).

When I run the Webpack piler via the mand line:

$ webpack

I get the following error:

ERROR in ./app/app.es6
Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app

This is solved by setting the path to relative:

// app.es6 - note the ./ in the import
import * as sayHello from './sayHello';
console.log(sayHello());

This is a bit of a pain because it's different to the example es6 code on Babel website under the Modules section.

Here is my Webpack config:

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

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.es6'
  ],
  output: {
      publicPath: '/',
      filename: './dist/app.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js|\.es6$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:
        {
          presets:['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.es6'],
  },
};

Question: Does any one know why there is this difference? Or where the relevant information regarding ES6 module imports is in the Webpack documentation?

• javascript
• webpack
• ecmascript-6
• babeljs

Share Improve this question Follow edited Jan 22, 2017 at 12:55 d4nyll 12.7k66 gold badges5757 silver badges7070 bronze badges asked Sep 10, 2016 at 20:02 Richard FernandezRichard Fernandez 59922 gold badges88 silver badges1919 bronze badges 5

• So you want to get rid of ./ in import? – Andrew Li Commented Sep 10, 2016 at 20:06
• Basically, yeah. I was following the Babel module ES6 example and this one threw me. – Richard Fernandez Commented Sep 10, 2016 at 20:08
• Maybe use resolve.modules? Use path to resolve – Andrew Li Commented Sep 10, 2016 at 20:11
• Where is the example you're looking at that says to leave out the ./? Babel doesn't have any special logic here, it's the same as a require call. ./sayHello says to look for a file relative to the current one, sayHello says to load a module from node_modules called sayHello. The example is also wrong because with import * as sayHello from './sayHello'; sayHello can only ever be an object, there is no way it can be a function, in spec-pliant ES6. – loganfsmyth Commented Sep 10, 2016 at 20:48
• The example where I leave out the ./ is in the first example. Also, I didn't realise it can only be an object. (something new learnt.) – Richard Fernandez Commented Sep 10, 2016 at 23:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This is by design, without prefixing it indicates the module should be loaded from node_modules directory. You can set up an alias in your webpack config which would remove the need for relative module imports

resolve: {
  alias: { 
    sayHello: '/absolute/path/to/sayHello'
  },
  extensions: ['', '.js', '.es6']
}

Then Webpack would fill in the gaps in your import statements and allow you to omit the relative path and import * as sayHello from 'sayHello'; would work throughout your project

本文标签： javascriptES6 Webpack Relative importsModule not found Error Cannot resolve moduleStack Overflow