5

I am in the process of updating a react-app from polkadot.js api: 6.9.2 -> 7.12.1. Following some advice in the docs: https://polkadot.js.org/docs/usage/FAQ/, I updated my customize-cra application with some babel plugins and webpack loaders. I am running import { u8aToHex } from '@polkadot/util' in a web worker. I am wondering if something is wrong with my configuration.

After upgrading and adding the babel plugins and webpack loaders, I hit the following error. The code does not hit this issue in polkadot 6.9.2.

Uncaught ReferenceError: window is not defined
getAbsoluteUrl  @   packageInfo.js:8
../../node_modules/@polkadot/x-global/packageInfo.js    @   packageInfo.js:24
__webpack_require__ @   bootstrap:167
(anonymous) @   index.js:1
../../node_modules/@polkadot/x-global/index.js  @   index.js:17
__webpack_require__ @   bootstrap:167
../../node_modules/@polkadot/x-textdecoder/browser.js   @   browser.js:1
__webpack_require__ @   bootstrap:167
../../node_modules/@polkadot/util/detectOther.js    @   detectOther.js:1
__webpack_require__ @   bootstrap:167
../../node_modules/@polkadot/util/detectPackage.js  @   detectPackage.js:1
__webpack_require__ @   bootstrap:167
../../node_modules/@polkadot/util/index.js  @   index.js:1
__webpack_require__ @   bootstrap:167

Babel plugins and webpack loaders:

  removeBuiltInBabelConfig,
  ...addBabelPresets(
    '@babel/preset-typescript',
    ['@babel/preset-react', { development: false, runtime: 'automatic' }],
    ['@babel/preset-env', { loose: true, modules: 'commonjs', targets: { browsers: '>0.25% and last 2 versions and not ie 11 and not OperaMini all', node: '12' } }]
  ),
  addBabelPlugin('@babel/plugin-proposal-nullish-coalescing-operator'),
  addBabelPlugin('@babel/plugin-proposal-numeric-separator'),
  addBabelPlugin('@babel/plugin-proposal-optional-chaining'),
  addBabelPlugin(['@babel/plugin-transform-runtime', { "useESModules": false }]),
  addBabelPlugin('@babel/plugin-syntax-bigint'),
  addBabelPlugin('@babel/plugin-transform-react-jsx'),
  addBabelPlugin('@babel/plugin-syntax-top-level-await'),
  addBabelPlugin('babel-plugin-styled-components'),
  addBabelPlugin(['@babel/plugin-proposal-class-properties', { "loose": true }]),
  addBabelPlugin(['@babel/plugin-proposal-private-methods', { "loose": true }]),
  addBabelPlugin(['@babel/plugin-proposal-private-property-in-object', { "loose": true }]),
  addExternalBabelPlugin(['@babel/plugin-proposal-class-properties', { "loose": true }]),
  addExternalBabelPlugin(['@babel/plugin-proposal-private-methods', { "loose": true }]),
  addExternalBabelPlugin(['@babel/plugin-proposal-private-property-in-object', { "loose": true }]),

-----

config.module.rules.push({
      test: /\.js$/,
      loader: require.resolve('@open-wc/webpack-import-meta-loader'),
    })
1
  • I faced a similar issue but I do not remember if it was the one you mention. I added import "@polkadot/api-augment" where the API was used but seems irrelevant to window not defined. Can you please provide some more details or maybe a repo that I can have a look at the code?
    – Nikos
    Mar 22, 2022 at 12:33

1 Answer 1

5

The error above stems from the usage of import.meta.url.

WP4 does not have support for this (unlike WP5), so an extra import loader is needed as per the polkadot-js docs https://polkadot.js.org/docs/usage/FAQ#on-webpack-4-i-have-a-parse-error-on-importmetaurl mentioned in your post.

The error is caused by this loader inside a webworker.

The loader creates a getAbsoluteUrl function that emulates the import.meta.url and this function itself refers to window.location. Since webworkers doesn't have the window object, only making self available, this process fails with the above error.

There doesn't seem to be a workaround for this, apart from upgrading to WP5 or bypassing it altogether.

Some additional ideas may be gleamed from looking at the actual injected loader support code, specifically https://github.com/polkadot-js/common/issues/1435#issuecomment-1072052502

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.