CODEWITHSUNDEEP
javascriptnode.jsecmascript-6webpackbabeljs
Peter Perot
Peter Perot

Reputation: 1003

webpack: 'import' not working whereas 'require' works okay

I have a strange issue using webpack.

This my webpack.config.js:

import webpack from "webpack";
import path from "path";

//not working: import ExtractTextPlugin from "extract-text-webpack-plugin";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const GLOBALS = {
    "process.env.NODE_ENV": JSON.stringify("production"),
    __DEV__: false
};

export default {
    debug: true,
    devtool: "source-map",
    noInfo: true,
    entry: "./src/bootstrap",
    target: "web",
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/",
        filename: "bundle.js"
    },
    resolve: {
        root: path.resolve(__dirname),
        alias: {
            "~": "src"
        },
        extensions: ["", ".js", ".jsx"]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DefinePlugin(GLOBALS),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
        loaders: [
            { test: /\.jsx?$/, include: path.join(__dirname, "src"), loaders: ["babel"] },
            { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader: "file-loader?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: "file-loader?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: "file-loader?limit=10000&mimetype=image/svg+xml" },
            { test: /\.(jpe?g|png|gif)$/i, loaders: ["file"] },
            { test: /\.ico$/, loader: "file-loader?name=[name].[ext]" },
            {
                test: /(\.css|\.scss)$/,
                loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap")
            }
        ]
    }
};

As you can see: I set up an alias "~" pointing to my "src" directory.

According to webpack documentation I should be able to import modules this way:

import { ServiceStub } from "~/utilities/service-stub";

HINT: File service-stub.js sits here: [__dirname]/src/utilities/service-stub.js.

However, this does not work since webpack is throwing an error ("Path not found.").

When I userequire instead of import, everything works fine:

const { ServiceStub } = require("~/utilities/service-stub");

The same issue is in webpack.config.js itself:

import webpack from "webpack";
import path from "path";

//not working: import ExtractTextPlugin from "extract-text-webpack-plugin";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

Here some modules import well with import (modules webpack and path), some do not (module extract-text-webpack-plugin).

I worked through dozens of forums, but found no solution yet.

Upvotes: 0

Views: 3860

Answers (1)

Peter Perot
Peter Perot

Reputation: 1003

The problem is ESLint - not webpack.

When you are using aliases in webpack like this

resolve: {
    root: path.resolve(__dirname),
    alias: {
        "~": "src"
    },
    extensions: ["", ".js", ".jsx"]
}

and you are importing this way

import { ServiceStub } from "~/services/service-stub";

ESLint cannot resolve the alias and reports an error.

To get it work you must tell ESLint to ignore some rule with "import/no-unresolved": 0. This seems to be okay because if an imported file is actually missing, webpack reports an error itself.

Upvotes: 2

Related Questions