froala/aurelia-froala-editor

Build issue with webpack

frakevich opened this issue · 4 comments

frakevich commented

Hi, I have been trying to figure it out for some time. Maybe you can point me in the right direction.
I have included this plugin in the aurelia with webpack project. I get the following build warning, that then results in a client-side error:
WARNING in ./src ^./.$
Module not found: Error: Can't resolve 'aurelia-froala-editor' in 'C:\projects\Filipp\AuTest\news\src'
@ ./src ^./.$
@ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
@ multi aurelia-modules

Below is my webpack.config file. I appreciate any help.
Thank you!

` const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const AureliaWebpackPlugin = require('aurelia-webpack-plugin');
const project = require('./package.json');

const title = 'News SPA';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const aureliaBootstrap = [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal-browser',
    'regenerator-runtime',
];

const aureliaModules = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-') && !dep.startsWith('aurelia-froala'));

module.exports = {
    entry: {
        'app': [], // <-- this array will be filled by the aurelia-webpack-plugin
        'aurelia-bootstrap': aureliaBootstrap,
        'aurelia-modules': aureliaModules.filter(pkg => aureliaBootstrap.indexOf(pkg) === -1)
        //'aurelia': Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'))
    },
    output: {
        path: path.resolve('dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['babel-preset-es2015', 'babel-preset-stage-1'].map(require.resolve),
                    plugins: ['transform-decorators-legacy']
                }
            },
            {
                test: /\.html$/,
                exclude: /index\.html$/, // index.html will be taken care by HtmlWebpackPlugin
                use: 'html-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)$/,
                use: 'url-loader'
            }
        ],
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // include: path.resolve('src'),
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'stage-1'],
                    plugins: ['transform-decorators-legacy']
                }
            }, {
                test: /\.html$/,
                exclude: /index\.html$/,
                loader: 'html-loader'
            }, {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)(\?\S*)?$/,
                loader: 'url-loader?limit=100000&name=[name].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            regeneratorRuntime: 'regenerator-runtime', // to support await/async syntax
            Promise: 'bluebird', // because Edge browser has slow native Promise object
            $: 'jquery', // because 'bootstrap' by Twitter depends on this
            jQuery: 'jquery', // just an alias
        }),
         new HtmlWebpackPlugin({
            title: title,
            template: 'index.html',
            chunksSortMode: 'dependency'
        }),
        new AureliaWebpackPlugin({
            root: rootDir,
            src: srcDir,
            title: title,
            baseUrl: baseUrl
        }),
        new CopyWebpackPlugin([{
            from: 'favicon.ico',
            to: 'favicon.ico'
        }]),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['aurelia-modules', 'aurelia-bootstrap']//aurelia
        }),
    ]
};

`

allencoded commented

I am getting the same error so I did as the tutorial states in the readme:

main.js:

import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css';

.plugin('aurelia-froala-editor', config => {
        config.setLicense('');
      })

Error: Cannot find module './aurelia-froala-editor/froala-editor'.

All my other modules work fine except this one. Did you ever figure it out @frakevich ?

m-andrew-albright commented

@frakevich @allencoded

In your package.json, add:

  "aurelia": {
    "build": {
      "resources": [
        "aurelia-froala-editor/froala-editor"
      ]
    }
  }
sboyd commented

@m-andrew-albright thanks!! That fixed the issue for me as well after trying a bunch of other things. How'd you learn that that was the fix? I was looking at the read me for aurelia-webpack-plugin and it also mentioned adding items to the resources array.

Thanks again --Steve