My Angular storybook was working perfectly fine, but i added a compoenent, tried to re-generate storybook and started getting followoing error
info => Loading presets
info => Loading 1 config file in "C:\code\libs\lib-core\.storybook"
info => Loading 8 other files in "C:\code\libs\lib-core\.storybook"
info => Adding stories defined in "C:\code\libs\lib-core\.storybook\main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "lib-core:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
Broken build, fix the error above.
You may need to refresh the browser.
———————————————————————————————————————————————
> NX
Failed tasks:
Hint: run the command with --verbose for more details.
To fix the issue, i had to add a property tsConfig under architect --> build --> options, and try to re-run storybook
I updated my packages by running yarn (or npm install) and it worked for me.
Related
I have a gatsby.js application with mapbox-gl and it all worked successfully until I tried to include the mapbox-gl-geocoder package to add search functionality.
I have installed it using npm as the following:
npm install mapbox/mapbox-gl-geocoder --save
then, added it to the React component:
import '#mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
import MapboxGeocoder from '#mapbox/mapbox-gl-geocoder';
and inside a useEffect hook:
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
zoom: 20,
placeholder: 'Enter City',
mapboxgl: mapboxgl
}), 'top-left'
);
locally, when I run gatsby develop it works as it should, but when I deploy it with Netlify, I get the following error:
:24:21 PM: error Generating SSR bundle failed
1:24:21 PM: Can't resolve 'electron' in '/opt/build/repo/node_modules/#mapbox/mapbox-sdk/node_modules/got'
1:24:21 PM: If you're trying to use a package make sure that 'electron' is installed. If you're trying to use a local file make sure that the path is correct.
it seems that mapbox-gl-geocoder has a dependency to #mapbox/mapbox-sdk and the mapbox-sdk has a dependency to got that somehow needs electron ?
The only thing i can read about electron in the got npm page is the following:
Electron support has been removed
The Electron net module is not consistent with the Node.js http module. See #899 for more info.
In any way, I tried to install electron with npm to see if the errors are gone, and the build started to fail with new error indicating that the window object is not available.
10:35:45 AM: error "window" is not available during server side rendering.
Googling that error led me to some answers about not loading the packages in gatsby-node.js but that didn't help either.
When dealing with third-party modules that use window in Gatsby you need to add a null loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser while gatsby build occurs in the Node server where obviously there isn't a window or other global objects.
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /#mapbox/,
use: loaders.null(),
},
],
},
})
}
}
Keep in mind that the test value is a regular expression that will match a folder under node_modules so, ensure that the /#mapbox/ is the right name.
Using a patch-package may work but keep in mind that you are adding another package, another bundled files which may have a performance effect. The proposed snippet is a built-in solution that happens when you build your application.
I am having problems to start a new Electron + Ionic project.
I have followed this tutorial:
https://www.9lessons.info/2018/10/ionic-electron-desktop-app.html
But when I run the project with the command:
npm run electron-serve
I get this errors on dev-tools console and the screen is white:
runtime-es2015.33b5e618b3baf74c7138.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
main-es2015.64da9645e917002baf25.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills-es2015.1b94da7ab13e05353bf7.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
/Users/myuser/ionic/Frontend/myproject/src/myproject/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/security-warnings.js:145 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) # /Users/myuser/ionic/Frontend/myproject/src/myproject/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/security-warnings.js:145
What would be doing wrong?
Easy, Just go to src/tsconfig.json -> change the line "target" : "es2015" into "target" : "es5" then re-run "npm run electron-serve" on the terminal and the app should work.
This works for Windows 10, Ionic 5.2.7, Electron 6.0.10
For someone with the same problem:
Is not really a Capacitor bug, but a build problem in your part related to the Angular 8 build settings not being compatible with electron.
Changing the target in tsconfig.json from es2015 to es5, or add
"browserslist": [
"> 5%"
]
in the package.json
Related
Solves the problem
Currently getting this error when i try to run eslint locally:
Error: Cannot find module 'escope'
at Function.Module._resolveFilename (module.js:455:15)
at monkeypatch (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:53:26)
at Object.exports.parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:358:5)
at parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:671:23)
at Linter.verify (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:806:27)
at processText (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:278:31)
at processFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:320:18)
at executeOnFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:655:25)
at fileList.forEach.fileInfo (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:693:13)
at Array.forEach (native)
What's weird is that im using the same linting configuration with another project, and i had no issues at all.
I'm using:
babel-eslint#7.1.1
eslint#4.0.0-beta.0
Any ideas ?
Even though I had same package.json, babel-eslint was set as "7.1.1" in one and "^7.1.1" in the other.
Basically ESLint v4 uses a new fork of escope, which was then updated on version 7.2.3 of babel-eslint.
So, adding the little ^ to my configuration fixed my problem.
Upon installing ember-cli i wanted to install the coffeescript add on using:
ember install ember-cli-coffeescript
as shown in the documentation but I get the error:
WARNING: Skipping npm install: package.json not found
package.json not found
Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
at Class.run (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/tasks/addon-install.js:43:7)
at Class.run (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/commands/install.js:39:25)
at Class.<anonymous> (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/models/command.js:241:20)
at initializePromise (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:588:5)
at PromiseExt.Promise (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1076:31)
at new PromiseExt (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/ext/promise.js:32:8)
at Class.validateAndRun (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/models/command.js:195:12)
at /home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/lib/cli/cli.js:130:22
at tryCatch (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:538:12)
at invokeCallback (/home/daniel/.nvm/versions/node/v7.6.0/lib/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:553:13)
I don't understand what this means. I have seen this question asked in different contexts for Angular.js but those questions are related to peoples code. This question is related to the installation itself. this is a brandnew project and install.
Any ideas?
package.json file usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies.
Make sure you have a proper inited Ember project. If you do not have a package.json file. Try to re-init your project using Ember init inside your project folder.
Attention: the init process may overwrite the existing files in your project. Backup if it is important.
Have you tried adding a package.json file? Easily done by running npm init
I've tried everything, but cannot seem to get it working. I've done the following:
1.Remove the plugins with the variables via the config designer.
2.Update to Cordova 5.0.0 via the config designer (Platforms > Cordova CLI)
3.From the command line: 1.Go to your project directory.
2.Type the following substituting the plugin name for the plugin you wish to add:
3.npm install -g cordova
4.cordova plugin add nl.x-services.plugins.launchmyapp --variable URL_SCHEME=myscheme
But I still cannot build. Here is the detailed output from MSBUILD :
http://pastebin.com/7enSzCxs
And a highlight of some of the errors I'm getting
1> BUILD FAILED
1> C:\Users\Adam\AppData\Local\Android\android-sdk\tools\ant\build.xml:601: The following error occurred while executing this line:
1> F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\com.phonegap.plugins.facebookconnect\myapp2568ddfac877478fb806edc911cff37e-FacebookLib\custom_rules.xml:4: F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\com.phonegap.plugins.facebookconnect\myapp2568ddfac877478fb806edc911cff37e-FacebookLib\ant-build does not exist.
And
1> BUILD FAILED
1> C:\Users\Adam\AppData\Local\Android\android-sdk\tools\ant\build.xml:470: The following error occurred while executing this line:
1> C:\Users\Adam\AppData\Local\Android\android-sdk\tools\ant\build.xml:441: Unable to delete directory F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\com.phonegap.plugins.facebookconnect\myapp2568ddfac877478fb806edc911cff37e-FacebookLib\bin
And finally
1>
1> F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\cordova\node_modules\q\q.js:126
1> throw e;
1> ^
1> Error code 1 for command: cmd with args: /s /c "ant debug -f F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\build.xml"
1> Command finished with error code 8: F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\cordova\build.bat --debug,--ant,
1>MDAVSCLI : error : F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\cordova\build.bat: Command failed with exit code 8
1>Done executing task "MdaVsCli" -- FAILED.
1>Done building target "BuildMDA" in project "fbtest.jsproj" -- FAILED.
1>Build FAILED.
Any ideas at all? Using a fresh install of VS2015 with the tools for cordova, trying to build for android.
EDIT:
So after taking the advice of Kamil Pajdzik below, I used build.bat to compile it and found some issues with my path being waaay to long. I mapped a drive to cut down the length and it will now build AOK from the build.bat.
Still no dice in Visual studio though (I assume this is difference between build.bat using gradle and vs using ant).
My only error now is :
1> -code-gen:
1> [mergemanifest] Merging AndroidManifest files into one.
1> [mergemanifest] Manifest merger disabled. Using project manifest only.
1> [echo] Handling aidl files...
1> [aidl] No AIDL files to compile.
1> [echo] ----------
1> [echo] Handling RenderScript files...
1> [echo] ----------
1> [echo] Handling Resources...
1> [aapt] Generating resource IDs...
1> [aapt] Z:\fbtest\platforms\android\bin\AndroidManifest.xml:14: error: Error: No resource found that matches the given name (at 'value' with value '#string/fb_app_id').
1> [aapt]
1> [aapt] Z:\fbtest\platforms\android\bin\AndroidManifest.xml:15: error: Error: No resource found that matches the given name (at 'label' with value '#string/fb_app_name').
1> [aapt]
1>
1> BUILD FAILED
1> C:\Users\Adam\AppData\Local\Android\android-sdk\tools\ant\build.xml:653: The following error occurred while executing this line:
1> C:\Users\Adam\AppData\Local\Android\android-sdk\tools\ant\build.xml:698: null returned: 1
1>
Okay, this appears to be the issue. There are two problems. The first is a max path size issue on Windows. The issue is that it the plugin uses part of the the app's ID to create a folder, and VS by default uses a random identifier that is fairly long so this exacerbates the issue.
To resolve:
Update the ID for your project to something short (com.myproject.short)
Move the project to the root of your drive
Go to the project folder and re-add the android platform. From the command line:
cordova platform remove android
cordova platform add android
The second issue that then remains is an "Ant" build seems to be missing a folder which likely is a bug. If you add the "ant-build" folder in the location it complains about the build succeeds.
Also - Be sure plugins/fetch.json is included in your checkins since this is where your plugin variables are stored. If that file is deleted, you'll need to remove and re-add the plugin again. From your update it sounds like either VS is still set to use Cordova 4.3.0 and/or plugins/fetch.json does not contain your plugin variables. You should see something like this if the plugin was added using Cordova 5.0.0:
{
"com.phonegap.plugins.facebookconnect": {
"source": {
"type": "registry",
"id": "com.phonegap.plugins.facebookconnect"
},
"is_top_level": true,
"variables": {
"APP_ID": "123",
"APP_NAME": "nbaer"
}
}
}
The "variables" section is what may be missing.
Try running F:\GIT\CordovaFb\BlankCordovaApp1\fbtest\platforms\android\cordova\build.bat from a command line. It usually gives more information.
Cordova 5.0.0 requires Android SDK in version 22. You can check if you have that installed via SDK manager.
This particular plugin appears to have some challenges with Cordova 5.0.0. Android underwent significant changes in this release that may be causing issues.
https://github.com/Wizcorp/phonegap-facebook-plugin/issues/1010
I am seeing failures if you build either with Ant or Gradle using a pure Cordova command line interface project. Likely a plugin fix is required to resolve the issue. I reccomend adding comments to this defect to help the plugin author resolve the issue.
So thanks to Chucks help, I managed to get a build working. It was indeed a combination of path length exceeding 260 characters (which I solved by mapping my solution directory to a drive) and a couple of folders not being created.
They were in my case :
F:\Git\CordovaFb\FBTest\platforms\android\com.phonegap.plugins.facebookconnect\myapp7a29c6c80cee4b2aa0dc8a70dc57527d-FacebookLib\bin\classes
and
F:\Git\CordovaFb\FBTest\platforms\android\com.phonegap.plugins.facebookconnect\myapp7a29c6c80cee4b2aa0dc8a70dc57527d-FacebookLib\ant-build
I seem to have to manually recreate these from time to time as they get deleted on some builds...
So the full process is as follows (for others who have the same issue)
1) Create your solution in as short a path as possible (map a drive if you need to)
2) Add your cordova project to the solution, double click config.xml, goto platforms and change the CLI version to 5.0.0
3) Fire up a command prompt in the solutions root
4) Type the following cordova plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="00000000" --variable APP_NAME="My App"
5) When its done you'll have the plugin in the plugins dir and the fetch.json file should contain the variables you entered for appid and appname
6) Do a full build and you'll get some errors (Exit code 8)
7) Manually create the following :
[Solution Route]\platforms\android\com.phonegap.plugins.facebookconnect\myapp7a29c6c80cee4b2aa0dc8a70dc57527d-FacebookLib\bin\classes`
and
[Solution Route]\platforms\android\com.phonegap.plugins.facebookconnect\myapp7a29c6c80cee4b2aa0dc8a70dc57527d-FacebookLib\bin\classes`
8) Your build should succeed! Check periodically if those paths still exist.
This should get you by until the next release of the cordova tools for VS (if they fix it)
platforms\android\AndroidManifest.xml
just change android:minSdkVersion="14" to android:minSdkVersion="15"