profile
viewpoint
Arif Yayalar (@ayayalar) ayayalar Microsoft Seattle/WA www.arifyayalar.me Senior Software Engineer (Microsoft)

ayayalar/DotNetRuleEngine 27

.net standard v2

ayayalar/poolproc 1

Pool of workers based on the Registry module introduced in elixir v1.4

ayayalar/elixir-school 0

Lessons about the Elixir programming language

ayayalar/functmetal 0

functional meta language

ayayalar/functmetalnet 0

FunctMetaL C# Project

ayayalar/IdServerDemo 0

Identity Server, API, and Client

startedAzure/portaldocs

started time in 18 days

startedSitePen/dts-generator

started time in a month

startedconfluentinc/confluent-kafka-dotnet

started time in 2 months

startedfacebookexperimental/Recoil

started time in 2 months

startedbvaughn/react-error-boundary

started time in 2 months

issue closedfacebook/react

Bug: React Context API is not working from custom NPM library

I have total of three npm packages:

  1. Custom Hook: custom hook wraps useContext
  2. Provider: uses custom hook to Provide Context
  3. Consumer: uses custom hook to Retrieve Context

If I have these components in a single app, everything works as expected. However, if I separate them to their own npm packages, the state is no longer retrievable by the consumer.

React version: 16.13.1

Steps To Reproduce

  1. Since it involves creating three different npm packages to repro, I've created a github repo that demonstrates the problem. Included all source code along with it. a) Repo: https://github.com/ayayalar/ReactContextAPIDefect
  2. Kept the example extremely simple to keep the focus on the problem.

Link to code example: https://github.com/ayayalar/ReactContextAPIDefect

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

The context state is not retrievable by the consumer.

The expected behavior

The context state should be retrievable by the consumer.

closed time in 3 months

ayayalar

issue commentfacebook/react

Bug: React Context API is not working from custom NPM library

OK, figured it out. It was an issue in webpack configuration. I will share the resolution steps here, so if anyone runs into this kind of a problem, they know what the issue is.

Here is a simple webpack configuration that I am using for both the consumer and the provider.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './lib'),
    filename: 'index.js',
    library: 'consumer',
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@ayayalar/context-hook': path.resolve(
        path.join(__dirname, 'node_modules', '@ayayalar/context-hook')
      ),
    },
  },
  mode: 'development',
  devtool: 'source-map',
  externals: {
    react: 'commonjs2 react',
    'react-dom': 'commonjs2 react-dom',
  },
};

and the package.json snippet

  "devDependencies": {
    "@ayayalar/context-hook": "file:../npm/ayayalar-context-hook-1.0.9.tgz",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  },
  "peerDependencies": {
    "@ayayalar/context-hook": "^1.0.9",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "dependencies": {},

Notice, the @ayayalar/context-hook` as a peer dependency. My assumption here was, this package would not get bundled.

That assumption turns out to be wrong.

To remove it from the final bundle, I needed to add it to the externals in my webpack configuration. Which I already have with react and react-dom packages.

Updating the section of externals to the following, removed the hook from the bundle as expected.

  externals: {
    react: 'commonjs2 react',
    'react-dom': 'commonjs2 react-dom',
    '@ayayalar/context-hook': 'commonjs2 @ayayalar/context-hook',
  },

At this point, in my app, I only have a single instance of the hook npm package. And everything works as expected. @vkurchatkin, thank you for pointing me in the right direction.

ayayalar

comment created time in 3 months

issue commentfacebook/react

Bug: React Context API is not working from custom NPM library

I am definitely on the same page. However, when I debug I see the context is only getting created once. That tells me, they must point to the same object.

ayayalar

comment created time in 3 months

issue commentfacebook/react

Bug: React Context API is not working from custom NPM library

Yes, I thought that might be a problem. However, the build configuration is quite simple. There is nothing special about it. Can you elaborate how did you come to your conclusion?

ayayalar

comment created time in 3 months

starteddai-shi/use-context-selector

started time in 3 months

issue openedfacebook/react

Bug: React Context API is not working from custom NPM library

I have total of three npm packages:

  1. Custom Hook: custom hook wraps useContext
  2. Provider: uses Hooks to Provide Context
  3. Consumer: uses Hooks to Retrieve Context

If I have these components in a single app, everything works as ecpected. However, if I separate them to their own npm packages, the state is no longer retrievable by the consumer.

React version: 16.13.1

Steps To Reproduce

  1. Since it involves creating three different npm packages to repro, I've created a github repo that demonstrates the problem. Included all source code along with it. a) Repo: https://github.com/ayayalar/ReactContextAPIDefect
  2. Kept the example extremely simple to keep the focus on the problem.

Link to code example: https://github.com/ayayalar/ReactContextAPIDefect

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

The context state is not retrievable by the consumer.

The expected behavior

The context state should be retrievable by the consumer.

created time in 3 months

push eventayayalar/ReactContextAPIDefect

Arif Yayalar

commit sha ae33b361c420612bece136684342834e4fc9b339

init

view details

push time in 3 months

create barnchayayalar/ReactContextAPIDefect

branch : master

created branch time in 3 months

created repositoryayayalar/ReactContextAPIDefect

created time in 3 months

issue commentmicrosoft/ApplicationInsights-JS

withAITracking reports Object prototype may only be an Object or null: undefined

Initially, I was testing it in the code sandbox and ran into this problem. Locally, I never experienced it. I figured it is the sandbox environment that might have an issue. I didn’t further research.

ayayalar

comment created time in 3 months

issue commentmicrosoft/fluentui

npm Error@uifabric/set-version@^7.0.10 not found

The issue has been resolved now

EmadKhella

comment created time in 3 months

issue commentmicrosoft/fluentui

npm Error@uifabric/set-version@^7.0.10 not found

As of this afternoon. I couldn’t install @fluentui/react or any version specific package. Frustrating thinking that I must’ve broken something until I found this issue. I hope it gets fixed asap.

On Apr 15, 2020, at 8:22 PM, brycepolly notifications@github.com wrote:

Same here, they must have pulled the version? This was working fine a few hours ago.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

EmadKhella

comment created time in 3 months

issue commentmicrosoft/fluentui

npm Error@uifabric/set-version@^7.0.10 not found

I have the same problem. As of this afternoon

EmadKhella

comment created time in 3 months

more