Comments (11)
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?
from reactgo.
@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"
.
from reactgo.
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.
from reactgo.
@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 π
from reactgo.
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.
from reactgo.
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 [email protected] 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)
.
from reactgo.
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.
from reactgo.
@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.
from reactgo.
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!
from reactgo.
@kkotwal94 Good work!!
from reactgo.
@kkotwal94 Will close unless you have more questions :)
from reactgo.
Related Issues (20)
- webpack config file preload all different environment configs.
- Failed to serialize user into session when using MYSQL with Node and Passport. URGENT
- Easy deployment question HOT 4
- Postgres DB on port other than 5432 HOT 2
- New release / update changelog and publish to npm
- Remove usage of css @apply HOT 2
- Consider bundle size limits for vendor packages
- Close / Update old / rotten PRs
- Update all npm packages HOT 2
- Please re-install nodemon HOT 1
- Use hooks HOT 2
- Consider using easy-peasy on top of Redux HOT 1
- Do not bundle server application (Using Node.JS v. 9 with modules support) HOT 1
- [QUESTION] Where I can find the CI service? HOT 2
- Signup error when using CORS HOT 2
- Introducing immer
- Introducting TypeScript
- postcss-cssnext deprecated HOT 1
- Use react-router v5
- leadme νκΈ κ³΅μλ¬Έμ λ§ν¬
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactgo.