Webpacking npm module and using its files

[kkotwal94]

I'm a little confused on how webpack is grabbing npm modules and including them.

For example:

loaders: commonLoaders.concat([
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap&outputStyle=expanded" +
            "&includePaths[]=" + (path.resolve(__dirname, "./bower_components")) +
            "&includePaths[]=" + (path.resolve(__dirname, "./node_modules")))
        }
      ])

i Know this includes our node_modules path, but what if im using a library, and I want to link its css and js files to my basehtml, then I would go to helmconfig.js right? Then add the link href to the links. But would it be something like this?

{ "rel": "stylesheet", "href": "../../node_modules/alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css"}

and the js file would I just include it <script></script> tags in the basehtml? Or is everything in the npm modules already applied?

I should just require("") it right?

[psimyn]

you should be able to just require('alloy-editor') where you need it in particular components - if the path doesn't resolve you can potentially add a alias to the resolve section of webpack config.

For the css, right way is still being decided.. If you are using current master, you should be able to include in main.scss, but you'll need to resolve the path relative to node_modules. For example

@include "alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css";

otherwise you can add part/all of that path to the includePaths in webpack config, e.g.:

 { test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css?module&localIdentName=[local]__[hash:base64:5]' +
      '&sourceMap!sass?sourceMap&outputStyle=expanded' +
      '&includePaths[]=' + (path.resolve(__dirname, './node_modules')) +
      '&includePaths[]=' + (path.resolve(__dirname, './node_modules/alloyeditor/dist/alloy-editor/assets')))
  }

will allow you to just @include "alloy-editor-ocean-min.css"

This will slightly change after #35, but it's probably worth thinking about how we want to handle external style deps.

@choonkending thoughts?

[choonkending]

@psimyn Good analysis.

I think having your first @include "alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css"; is neater, especially if you are debugging and looking through the scss/css, it won't be immediately apparent that it belongs from a node module if we do it @include "alloy-editor-ocean-min.css".

[kkotwal94]

I'm not using the current master probably the version before react-hot-loader was added. Well in this case if I wanted to use AlloyEditor,it would be import * from 'alloy-editor' (ES6) in the component I'm using it at right? Also can you explain the alias for the for the resolve part of the webpack.config file a bit more. Thanks btw I really appreciate it.

[choonkending]

@kkotwal94 Yes you can import it that way.

As for the resolve part of the webpack config, you can read more here.

 resolve: {
      extensions: ['', '.react.js', '.js', '.jsx', '.scss'],
      modulesDirectories: [
        "app", "node_modules"
      ]
    },

This tells webpack to search through those directories (besides the current directory) when it encounters a file/module with those extensions.

The resident webpack expert here is @psimyn, was that correct? Gimme a 👍

[kkotwal94]

resolve: {
      extensions: ['', '.react.js', '.js', '.jsx', '.scss', '.css'],
      modulesDirectories: [
        "app", "node_modules"
      ],
      alias: {
      alloyeditor : '../../node_modules/alloyeditor/dist/alloy-editor/alloy-editor-all.js'
      }
    },

After looking at the documentation and trying this, hitting npm runscript start or watch, both tell me that it still can't resolve the module.

[choonkending]

If your alias is alloyeditor, did you import alloyeditor or alloy-editor.

Otherwise check the path for alloyeditor, whether it really is the correct
directory. It'll be helpful if you paste your webpack config + what error
is thrown here if the above suggestions don't work out :)

On Tue, 28 Jul 2015 01:57 kkotwal94 notifications@github.com wrote:

resolve: {
extensions: ['', '.react.js', '.js', '.jsx', '.scss', '.css'],
modulesDirectories: [
"app", "node_modules"
],
alias: {
alloyeditor : '../../node_modules/alloyeditor/dist/alloy-editor/alloy-editor-all.js'
},
},

After looking at the documentation and trying this, hitting npm runscript
start or watch, both tell me that it still can't resolve the module.

—
Reply to this email directly or view it on GitHub
#43 (comment)
.

[kkotwal94]

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");

var assetsPath = path.join(__dirname, "public", "assets");
var publicPath = "assets/";

var commonLoaders = [
  {
    /*
     * TC39 categorises proposals for babel in 4 stages
     * Read more http://babeljs.io/docs/usage/experimental/
     */
    test: /\.jsx$/, loader: "babel-loader?stage=0"
  },
  {
    test: /\.js$/,
    loader: "babel-loader?stage=0",
    include: path.join(__dirname, "app")
  },
  { test: /\.png$/, loader: "url-loader" },
  { test: /\.jpg$/, loader: "file-loader" },
  { test: /\.html$/, loader: "html-loader" }
];

module.exports = [
  {
    // The configuration for the client
    name: "browser",
    /* The entry point of the bundle
     * Entry points for multi page app could be more complex
     * A good example of entry points would be:
     * entry: {
     *   pageA: "./pageA",
     *   pageB: "./pageB",
     *   pageC: "./pageC",
     *   adminPageA: "./adminPageA",
     *   adminPageB: "./adminPageB",
     *   adminPageC: "./adminPageC"
     * }
     *
     * We can then proceed to optimize what are the common chunks
     * plugins: [
     *  new CommonsChunkPlugin("admin-commons.js", ["adminPageA", "adminPageB"]),
     *  new CommonsChunkPlugin("common.js", ["pageA", "pageB", "admin-commons.js"], 2),
     *  new CommonsChunkPlugin("c-commons.js", ["pageC", "adminPageC"]);
     * ]
     */
    context: path.join(__dirname, "app"),
    entry: {
      app: "./app"
    },
    output: {
      // The output directory as absolute path
      path: assetsPath,
      // The filename of the entry chunk as relative path inside the output.path directory
      filename: "[name].js",
      // The output path from the view of the Javascript
      publicPath: publicPath

    },
    module: {
      preLoaders: [{
        test: /\.js$|.jsx$/,
        exclude: /node_modules/,
        loaders: ["eslint"]
      }],
      loaders: commonLoaders.concat([
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap&outputStyle=expanded" +
            "&includePaths[]=" + (path.resolve(__dirname, "./bower_components")) +
            "&includePaths[]=" + (path.resolve(__dirname, "./node_modules")) +
            '&includePaths[]=' + (path.resolve(__dirname, './node_modules/alloyeditor/dist/alloy-editor/assets')))
        }
      ])
    },
    resolve: {
      extensions: ['', '.react.js', '.js', '.jsx', '.scss', '.css'],
      modulesDirectories: [
        "app", "node_modules"
      ],
      alias: {
      alloyeditor : '../../node_modules/alloyeditor/dist/alloy-editor/alloy-editor-no-react.js'
      }
    },
    plugins: [
        // extract inline css from modules into separate files
        new ExtractTextPlugin("styles/main.css")
    ]
  }, {
    // The configuration for the server-side rendering
    name: "server-side rendering",
    context: path.join(__dirname, "app"),
    entry: {
      app: "./app",
      header: "./elements/Header.react"
    },
    target: "node",
    output: {
      // The output directory as absolute path
      path: assetsPath,
      // The filename of the entry chunk as relative path inside the output.path directory
      filename: "[name].server.js",
      // The output path from the view of the Javascript
      publicPath: publicPath,
      libraryTarget: "commonjs2"
    },
    externals: /^[a-z\-0-9]+$/,
    module: {
      loaders: commonLoaders
    },
    resolve: {
      extensions: ['', '.react.js', '.js', '.jsx', '.scss'],
      modulesDirectories: [
        "app", "node_modules"
      ],
alias: {
      alloyeditor : '../../node_modules/alloyeditor/dist/alloy-editor/alloy-editor-no-react.js'
      }
    },
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/\.(css|scss)$/, "node-noop")
    ]
  }
];

As for importing it, i tried 3 ways.

import * from alloyeditor;
import * as alloy from alloyeditor;
require("alloyeditor");

My file structure is here : https://github.com/kkotwal94/IsoReportProcessor

as for the error it is

ERROR in ./components/NewReport.js
Module not found: Error: Cannot resolve module 'alloy-editor' in /home/karan/Documents/IsoReportProcessor/app/components
 @ ./components/NewReport.js 33:19-42

when importing * as alloy from alloyeditor

and

Cannot find module 'alloyeditor'

when hitting npm start (running server.js) however webpack does not spit and issues if I change it during it is watching.

I also tried finding the path from the directory, and it still gives me the same issue.

[choonkending]

@kkotwal94 No luck on my end.

Not sure about how alloyeditor is meant to be used. I tried npm installing the package, and I added a "main": "dist/alloy-editor/alloy-editor-all-min.js", into the package.json for alloyeditor.

Then I could import * from alloyeditor, but I set it up as an entry point only for the browser so the server won't throw an error. (There were certain window checks in alloyeditor).

// Browser 
    entry: {
      app: "./app",
      test: "./components/Test"
    },

I required that <script type="text/javascript" charset="utf-8" src="/assets/test.js"></script> in my base.html just to test it out. Not sure how it s meant to be used. Perhaps you could create an issue in alloyeditor and get some clarification.

[kkotwal94]

gotchya, well I guess i'll be back with a solution. Perhaps maybe you know any wysiwyg that works with requirejs/commonjs/amd loaders? Alloy-editor was the nicest/cleanest one I knew and it looks like they are working on it. They didn't write alloy-editor to be used in global environments like this from what I figured out.

EDIT: liferay/alloy-editor#304
looks like someone already opened a issue for it a couple hours ago!

[choonkending]

@kkotwal94 Good work!!

[choonkending]

@kkotwal94 Will close unless you have more questions :)