We Keep Coding

Problem When Deploying Sveltekit Project to Vercel

So I Was trying to deploy my Sveltekit app with Vercel but this happened:
Cloning completed: 221.226ms
Previous build cache not available
Using prebuilt build artifacts...
Error: Config file was not found at "/vercel/path0/.vercel/output/config.json"
at P8 (/var/task/sandbox.js:315:2645)
My svelte.config.js file:
import vercel from '#sveltejs/adapter-vercel'
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: vercel()
}
};
export default config;
As you can see I do have the adapter for Vercel imported and in use. So what is the Problem Here? I can figure it out
My build command is: pnpm run build
My output directory is: .svelte-kit
My install command is: pnpm install

Your output directory should be left blank (or set to .), not .svelte-kit — that's a place for SvelteKit to do its work, it's of no concern to Vercel.

Is there a way to integrate stencil components into frameworks locally without publishing to NPM?

I am currently testing stencil js. For now I want to write stencil components and include them within a VUE/React project. The official website of stencil already shows how to integrate them within a framework (https://stenciljs.com/docs/overview). But they assume that your own stencil component library has already been published to npm.
Is there a way to integrate stencil components locally into a framework to test them without publishing them first?

Yes, you can use npm-link for that.
cd my-component-lib
npm link
cd ../my-app
npm link my-component-lib # or whatever you have named the project in package.json
If you have any problems with that (e. g. with paths not resolving properly), you can also try to pack your package and install the packed version instead, using npm-pack:
cd my-component-lib
npm pack
cd ../my-app
npm install ../my-component-lib/my-component-lib-1.0.0.tgz
Linking is preferable though because changes to your component library will be reflected immediately (after a rebuild), whereas with packing you'd have to re-pack and re-install it after every change to your lib.

Instead of publishing or packing your packages, you could utilize TypeScript's path mapping feature.
This allows you to write your import statements just as you would with a published package, but behind the scenes TypeScript maps the imports to their given source code location.
Here's an example of a tsconfig.json with path mapping added to the compiler options:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"ui-components": ["libs/ui-components"],
"ui-components/loader": ["libs/ui-components/dist/loader/index.cjs.js"],
"ui-components-react": ["generated/ui-components-react/src/components.ts"]
},
...
As you can see, it has 3 mappings: the path to the core Stencil components ui-components, the path to the generated React components which are exposed as ui-components-react, as well as the generated loader ui-components/loader which provides the bridge between the Custom elements and the React wrappers.
I created a full working example for Stencil Web Components with generated bindings and wrappers for React that comes without the need of publishing any package: Nx Stencil React.
Please note that this answer is based on #stencil/core 1.14.0 or below. Future versions may have a different approach on generating the framework integrations.

I've had quite a bit of trouble with this myself so will provide an answer specifically for Vue 3 as Stencil's Framework Integrations guide seems to refer only to Vue 2.
Starting Projects
Stencil Component
Following the Getting Started guide run npm init stencil. Choose the component option.
There was a bug in v2.7.0 so I update to v2.8.0 with npm i #stencil/core#latest --save-exact
Build the project with npm run build
Optional
By default, the stencil project configures multiple build targets, to make it easier to see what build files are being used you can edit the stencil config to only include the custom elements bundle:
\\ stencil.config.ts
outputTargets: [
{
type: 'dist-custom-elements-bundle',
},
{
type: 'dist',
esmLoaderPath: '../loader',
},
],
You also need the 'dist' type for the .d.ts typings file to be generated with your custom-elements (not sure why).
Vue 3 App
Using a globally installed Vue CLI #vue/cli#4.5.13 create a new Vue 3 default project.
Using Stencil in Vue 3
Install your stencil component project
npm install --save ../<path>/stencil-component as a dependency of your vue app.
Fixing NPM Module Resolution
Following the Vue CLI - Troubleshooting guide add a vue.config.js file to the root of your Vue 3 project with the line config.resolve.symlinks(false),
Skipping Component Resolution
In the same file we need to configure Using Custom Elements in View
\\ vue.config.js
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false),
config.module
.rule("vue")
.use("vue-loader")
.tap((options) => ({
...options,
compilerOptions: {
isCustomElement: (tag) => tag.includes("my-"),
},
}));
},
};
Framework Integration
Now we can declare the custom elements, but in the Vue 3 way
\\ main.js
import { createApp } from 'vue'
import App from './App.vue'
import { defineCustomElements } from "stencil-component";
defineCustomElements();
createApp(App).mount('#app');
You can now use your custom component as normal. Here's what my App.vue file looked like after hacking the example starter code:
<template>
<my-component first="Andy" middle="2K" last="11"></my-component>
</template>
<script>
import { MyComponent } from "stencil-component";
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
Errors
No ESLint Config
No ESLint configuration found in /<path>/stencil-component/dist/custom-elements.
Fixed by telling webpack not to resolve symlinks in vue.config.js
Uncaught TypeError: class constructors must be invoked with 'new'
This error occurs in the browser after a successful compilation.
Resolved by telling webpack / vue not to resolve your custom components
Custom Component Not Visible
There are no errors and your component is showing in the DOM inspector but not appearing on the page.
You need to defineCustomElements() in main.js.
Component not found
I've had some variation of this error when trying to import and use my component but haven't been able to reproduce it just now. Doing all of the above and restarting the dev server works fine for me.

For local integration, you can reference the esm.js file inside www/build folder which can be used in the head tag of the Vue/React project.
For eg if you have the below 2 apps
stencil-components - stencil components
stencil-react - sample react app which will consume the components.
Once you run stencil-components by npm run start it will be hosted at 3333 (by default).
Including below line in head ofindex.html of stencil-react will integrate components with live reloading on change.
<script type="module" src="http://localhost:3333/build/stencil-components.esm.js"></script>

ReactJS [issue on production] - TypeError: (void 0) is not a function

I'm facing the above error on production build, not even getting the issue reference...
your help will really be appreciated, Thanks in advance.
Note - on local, it works fine - development mode, but the same code won't work on a production.
React js version is - 16.12.0, and webpack version - 4.41.6

I had this issue when working with team and we don't have git ignore for ios project so the core files doesn't belong to the same compiler , i managed to resolve this issue by first deleting ios folder (if you use pod copy podfile)
then
react-native upgrade --legacy true
copy your pod file again to the new ios folder
cd ios pod install cd -
open your project in xcode and build
select schema to release then build again
Don't forget to have git ignore as follow

Facing this issue when trying to import something that is not exported from a module. I'm sure this is the case only for PRODUCTION build, not for development.
Probably, this error is only applicable for Webpack 4 and has been fixed in Webpack 5.
In my case:
index.js of a module:
export {
foo,
} from './utils';
Your file:
import * as Utils from 'utils';
Utils.bar(); // bar is not exported!
Production bundle contains: (void 0)() // crashes!
Development bundle contains user friendly comment:
/* Cannot get final name for export "bar" in
"./node_modules/utils/index.js" (known exports: foo) */
undefined();
and fails silently 🤷🏼‍♂️

React Native: process.env has only NODE_ENV

I'm setting an environment variable while building my react-native app (on windows):
SET APP_ENV=dev & react-native run-android
echo %APP_ENV% returns 'dev'
But when I log process.env object in my JS file, I only get:
{
NODE_ENV: "development"
}
Is there a different way to access environment variables set through command prompt?

It's important to know that the React-Native app is running on a device (or emulator) in an environment more like a browser, not a Node.js process.
For cross-compatibility with Node.js libraries that relies on process.env.NODE_ENV to perform optimizations, React-Native adds the process global variable with env.NODE_ENV.
If you want to pass custom constants to React-Native, you can use: https://github.com/luggit/react-native-config

You should install this plugin babel plugin
npm install babel-plugin-transform-inline-environment-variables --save-dev
Then add it to your babel config (.babelrc, babel.config.js) in the plugin section
{
"plugins": [
["transform-inline-environment-variables", {
"include": [
"NODE_ENV"
]
}]
]
}
Then when you pass the variable through the inline like
API_KEY=dev && react-native run-android
You should get it through
process.env.API_KEY
And the value will be dev
This work for me on Mac terminal, Hope it answer your question
EDIT:
I added a double "&" because only one doesn't work.

Nothing worked out from these answers here, as well as React Native Expo Environment Variables, but I've found react-native-dotenv.
It did the trick:
Terminal: yarn add react-native-dotenv --dev
In babel.config.js (or .babelrc): add "module:react-native-dotenv" to plugins
In your component, import { REST_API_KEY } from "#env"; at the top
In your component, use as alert(REST_API_KEY);
Of course, with the alert, that's a dummy example :)

The easiest way I found to solve this problem is by using the react-native-config library that you can have a look at here.
Install the library:
$ yarn add react-native-config
Create your .env file with your content. For example:
GOOGLE_MAPS_API_KEY=abcdefgh
Import Config from react-native-config and use your variables.
import Config from "react-native-config";
...
console.log('ENV:', Config.GOOGLE_MAPS_API_KEY); // ENV: abcdefgh
P.S.: After installing the package you need to run npx pod-install to auto-link it or if your React Native version is older than 0.60, link it manually following the instructions on the library.

add babel-plugin-transform-inline-environment-variables
npm install babel-plugin-transform-inline-environment-variables --save-dev
babel.config.js:
{
"plugins": [
["transform-inline-environment-variables"],
]
}
do not add "include": ["NODE_ENV"]
then run API_KEY=testKey && react-native start
and then you can use API_KEY via process.env.API_KEY,
but it is weird that console.log(process.env) only show a {NODE_ENV: "development"},do not contain API_KEY

Adding chai-as-promised to an Ember app

I'm finding myself in an Ember-based app and are having a little trouble understanding how I should add the chai-as-promised helper library to it. I'm running this version:
$ ember --version
version: 2.4.2
node: 5.8.0
os: darwin x64
I started by installing via npm i chai-as-promised --save-dev. The library was then importable via Node. Then I have tried adding it to the ember-cli-build.js file using two different approaches:
As a file via .import(), after creating the EmberApp:
module.exports = function(defaults) {
var app = new EmberApp([...]);
app.import('./node_modules/chai-as-promised/lib/chai-as-promised.js');
Via EmberApp.toTree() to chai-as-promised's top directory:
return app.toTree('./node_modules/ember-cli-blueprint-test-helpers/');
And descending into the lib/ subdirectory of chai-as-promised:
return app.toTree('./node_modules/chai-as-promised/lib');
I also tried installing via Bower and changing the above node_modules/ based paths to bower_components ones, but still with the same result.
Am I importing it wrong? Or is there somewhere else I should import?

You need to tell ember-cli to add it to the test tree like this:
app.import("bower_components/chai-as-promised/lib/chai-as-promised.js",
{ type: 'test' });
otherwise it isn't available in the test suite but in the app. I got this to work in combination with ember-cli-mocha.
You can see how it works here: https://github.com/albertjan/ember-cli-chai-as-promised