Cannot import extract-text-webpack-plugin

[peter-perot]

Node version: 4.4.4

npm version: 3.9.5

Operating system: Windows 8.1

Command line used: npm run build

When I'm running the above command I'm getting the follwing error:

V:\webpack.config.prod.js (1/0)
?  4:31  Unable to resolve path to module 'extract-text-webpack-plugin'
import/no-unresolved

There are two ways to solve this error:

1st solution:

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

// -- not working --
//import ExtractTextPlugin from "extract-text-webpack-plugin";

// working
import ExtractTextPlugin from "./node_modules/extract-text-webpack-plugin";

2nd solution:

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

// -- not working --
//import ExtractTextPlugin from "extract-text-webpack-plugin";

// working
const ExtractTextPlugin = require("extract-text-webpack-plugin");

Why is the import syntax working with webpack, but not with the plugin?

[coryhouse]

Odd. Can you try upgrading to Node 5.11.1 and report back? Others on
Windows are running fine with that version.
On Jun 15, 2016 3:10 AM, "peter-perot" notifications@github.com wrote:

Node version: 4.4.4

npm version: 3.9.5

Operating system: Windows 8.1

Command line used: npm run build

When I'm running the above command I'm getting the follwing error:

V:\webpack.config.prod.js (1/0)
? 4:31 Unable to resolve path to module 'extract-text-webpack-plugin'
import/no-unresolved

There are two ways to solve this error:

1st solution:

import webpack from "webpack";import path from "path";
// -- not working --//import ExtractTextPlugin from "extract-text-webpack-plugin";
// workingimport ExtractTextPlugin from "./node_modules/extract-text-webpack-plugin";

2nd solution:

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

Why is the import syntax working with webpack, but not with the plugin?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#164, or mute the
thread
https://github.com/notifications/unsubscribe/ABnFpR-x6ZEWm2GyebmQxNDshb3xPSD_ks5qL6V2gaJpZM4I2D0N
.

[peter-perot]

UPDATE: The problem is not restricted to the plugin - IMHO it has to do with ES6-import keyword. I filed a question here: http://stackoverflow.com/questions/37833128/webpack-import-not-working-whereas-require-works-okay.

[peter-perot]

@coryhouse: Okay, I'll update node.

[peter-perot]

@coryhouse: Updated node to v6.2.1, but the issue still exists.

However, I found the problem (which should not be a problem anyway):

I'm working with a mapped drive "V" where my project is located at the root ("V:"). When running npm from "V:", the build fails when including the webpack plugin. When I switch to the actual drive and path ("D:\Projects\ReactRedux"), it works!

Seems that node has either a problem with mapped drives ("subst" command in windows) or with projects located at the root of a drive.

What I still did not get to work is the issue I filed here: http://stackoverflow.com/questions/37833128/webpack-import-not-working-whereas-require-works-okay. Aliasing pathes with webpack does not work when using "ES6-import" (but works with "require").

[coryhouse]

@peter-perot Thanks for the update. I'm currently stumped on why import isn't working for you on extract-text-webpack-plugin. You're the first to report this, and this code has had heavy usage for months. Might try installing Node 5.11.1 just to see if anything changes.

[peter-perot]

Issue solved. It was ESLint.

Solution:

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.

@coryhouse, if you know how to configure ESLint to resolve those aliases - feel free to improve my solution.

[coryhouse]

So why are you using ~ in your paths? Why not specify relative paths as I do throughout the example app?

[peter-perot]

Your virginal boilerplate code works okay now. But I used it to start some larger project. There I have some library source code modules which are located at "%project_root%/src/lib/". To reference them from other modules which are located deeper in the directory structure I have to write e.g. import Ajax from "../../../lib/ajax";. If I move the referencing components up in the structure, I also have to adjust the paths.

So I read about webpack aliases to avoid chains of "../ and that people use it to shortcut there library pathes, e.g. aliasing "%project_root/src/lib" with "~lib" and "%project_root/src" with "~".

Just a personal preference.

[coryhouse]

Ah, gotcha. Thanks for clarifying.