Results 1 to 8 of 8

Thread: 7.1 Froala npm sample 'no matches' --> will not run

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    506

    Default 7.1 Froala npm sample 'no matches' --> will not run

    app.json
    "requires": [
    "font-awesome",
    "calendar",
    "froala-editor"
    ],

    package.json
    "dependencies": {
    "@sencha/ext": "~7.1.0",
    "@sencha/ext-calendar": "^7.1.0",
    "@sencha/ext-froala-editor": "^7.1.0",
    "@sencha/ext-modern": "~7.1.0",
    "@sencha/ext-modern-theme-material": "~7.1.0"


    Webstorm or Windows Command Prompt '
    sencha app build'
    Sencha Cmd v7.1.0.15
    [INF] Processing Build Descriptor : desktop (development environment)
    [ERR] Cannot satisfy requirements for "froala-editor"!
    [ERR] The following versions cannot be satisfied:
    [ERR] MyApp1: froala-editor (No matches!)
    [ERR] Cannot resolve package requirements

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    506

    Default

    Tried again today without success.
    https://docs-devel.sencha.com/extjs/..._with_npm.html

    Even tried mistyping froala-editor in hope of stumbling on a typo that works.

  3. #3
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,176

    Default

    Thanks for the report. I've sent in a request to fix the naming to @sencha/ext-froala-editor.

    https://sencha.jira.com/browse/DOCS-707

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    506

    Default

    Thanks, looking forward to getting froala working in ExtJS via npm.

  5. #5
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,176

    Default

    I did some testing and I can get froala to work. I did some testing and found it works in a basic project. So I may need to know more about your issue. Which version of the Ext JS? Could you send me a project example?

    https://docs.sencha.com/extjs/7.1.0/...ts/froala.html - I've updated the docs too here. I tuned the getting started steps some.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    506

    Default instructions to see npm froala fail in ExtJS 7.1

    Windows 10 Pro, i7-34770 CPU @ 3.40 GHz, 16.0 GB, 64-bit, x64


    Windows Command Prompt


    c:\CB\apps\71>npm login --registry=https://npm.sencha.com [email protected]
    Username: djbushby
    Password:
    Email: (this IS public) [email protected]
    Logged in as djbushby to scope @sencha on https://npm.sencha.com/.


    (https://docs.sencha.com/extjs/7.1.0/..._with_npm.html)
    c:\CB\apps\71>ext-gen app -i
    ? would you like to see the defaults for package.json? (y/N)y
    ? Would you like to create a package.json file with defaults? (Y/n)y
    ? What would you like to name your Ext JS app? MyApp9
    > make a selection from a list
    > universalmodern
    ? Would you like to generate the Ext JS npm project with above config now? (Y/n) y


    found 1 moderate severity vulnerability
    run `npm audit fix` to fix them, or `npm audit` for details
    i [ext]: ext-gen: npm install -s completed for my-app-9
    i [ext]: ext-gen: Your Ext JS project is ready


    type "cd my-app-9" then "npm start" or "npm run desktop" or "npm run phone"
    to run the development build and open your new application in a web browser




    c:\CB\apps\71>
    c:\CB\apps\71>cd my-app-9
    c:\CB\apps\71\my-app-9>npm install @sencha/ext-froala-editor
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


    + @sencha/[email protected]
    added 1 package from 1 contributor, removed 25 packages and audited 15433 packages in 9.761s


    22 packages are looking for funding
    run `npm fund` for details


    found 1 moderate severity vulnerability
    run `npm audit fix` to fix them, or `npm audit` for details


    c:\CB\apps\71\my-app-9>


    -----------------------------------
    Webstorm 2019.3.2, Build #WS-193.6015.40, built on January 21, 2020
    Sencha App Watch, C:/CB/apps/71/my-app-9, C:\CB\Sencha\Cmd\7.1.0.15, desktop


    Run --> okay


    modify app.json
    ...
    "requires": [
    "font-awesome",
    "froala-editor"
    ],
    ...


    Run -->
    Sencha Cmd v7.1.0.15
    [INF] Processing Build Descriptor : desktop (development environment)
    [ERR] Cannot satisfy requirements for "froala-editor"!
    [ERR] The following versions cannot be satisfied:
    [ERR] MyApp9: froala-editor (No matches!)
    [ERR] Cannot resolve package requirements

  7. #7
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,176

    Default

    I see, you're using the ext-gen to generate a project which means there's a webpack config. Could I see your webpack config file? In the Sencha webpack config, do you have froala-editor declared as one of the packages?

    https://docs.sencha.com/extwebcompon..._configuration

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    506

    Default

    'froala' is not in my webpack config. The documentation (https://docs-devel.sencha.com/extjs/..._with_npm.html) does not discuss webpack.

    Is ExtJS being deprecated to ExtWebComponents?

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
    const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');
    const portfinder = require('portfinder');
    const replace = require("replace");


    module.exports = async function (env) {
    function get(it, val) {if(env == undefined) {return val} else if(env[it] == undefined) {return val} else {return env[it]}}


    //******* */
    var framework = get('framework', 'extjs')
    var contextFolder = get('contextFolder', './')
    var entryFile = get('entryFile', './index.js')
    var outputFolder = get('outputFolder', './')
    const rules =[
    //{ test: /.(js|jsx)$/, exclude: /node_modules/ }
    { test: /.(js)$/, use: ['babel-loader'] }
    ]
    const resolve = {
    }
    //******* */


    var toolkit = get('toolkit', 'modern')
    var theme = get('theme', 'theme-material')
    var packages = get('packages', ['treegrid'])
    var script = get('script', '')
    var emit = get('emit', 'yes')
    var profile = get('profile', '')
    var environment = get('environment', 'development')
    var treeshake = get('treeshake', 'no')
    var browser = get('browser', 'yes')
    var watch = get('watch', 'yes')
    var verbose = get('verbose', 'no')
    var basehref = get('basehref', '/')
    var isProd = false;

    if (environment === 'production') { isProd = true; }

    if(isProd) {
    replace({
    regex: '<script.+?(?=src)src="main.js[^<]+</script>',
    replacement: "",
    paths: ['index.html']
    });
    }


    portfinder.basePort = (env && env.port) || 1962
    return portfinder.getPortPromise().then(port => {
    const plugins = [
    new HtmlWebpackPlugin({ template: "index.html", hash: false, inject: "body" }),
    new BaseHrefWebpackPlugin({ baseHref: basehref }),
    new ExtWebpackPlugin({
    framework: framework,
    toolkit: toolkit,
    theme: theme,
    packages: packages,
    script: script,
    emit: emit,
    port: port,
    profile: profile,
    environment: environment,
    treeshake: treeshake,
    browser: browser,
    watch: watch,
    verbose: verbose
    })
    ]


    return {
    mode: environment,
    devtool: (environment === 'development') ? 'inline-source-map' : false,
    context: path.join(__dirname, contextFolder),
    entry: entryFile,
    output: {
    path: path.join(__dirname, outputFolder),
    filename: "[name].js"
    },
    plugins: plugins,
    module: {
    rules: rules
    },
    resolve: resolve,
    performance: { hints: false },
    stats: 'none',
    optimization: { noEmitOnErrors: true },
    node: false,
    devServer: {
    contentBase: outputFolder,
    hot: isProd,
    historyApiFallback: true,
    host: '0.0.0.0',
    port: port,
    disableHostCheck: false,
    compress: isProd,
    inline:!isProd,
    stats: 'none'
    }
    }
    })
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •