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

[djbushby]

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

[djbushby]

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.

[branflake2267]

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

[djbushby]

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

[branflake2267]

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.

[djbushby]

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

[branflake2267]

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

[djbushby]

'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'
}
}
})
}

[branflake2267]

Good point, I'll aim to add a webpack reference, or better docs around this. I'm slotting some updates.

[djbushby]

Good point, I'll aim to add a webpack reference, or better docs around this. I'm slotting some updates.

How about fixing the Ext.xPackage = requires('package'); bug?