Serviceworker and cannot use import statement outside a module - reactjs

I have an react-example of a service worker, with import statements.
Like:
import { clientsClaim } from 'workbox-core';
If I use this code (react) in my service-worker, I get the message:
Uncaught SyntaxError: Cannot use import statement outside a module (at service-worker.js:1:1)
Where is the mistake?


You need to bundle a service worker file that uses ES module imports, as they are not supported in all service worker runtime environments at the moment.
The Workbox documentation has some more examples of this usage. Any bundler that supports ES modules should work; I tend to use esbuild nowadays.

Related

Mocking TypeScript imports for Storybook

I am attempting to mock the import of a module for use in Storybook but I can only do it with JavaScript and CJS imports, not TypeScript and ESM. My current webpackFinal contains this
config.resolve.alias['moduleToMock'] = require.resolve('../src/mocks/mockModule')
return config;
This current config doesn't work with TypeScript and will throw an error saying that the mock module can't be found. How can I configure this to work with TypeScript?

In general TypeScript only throws errors when you try to compile the code. If you encounter an error on code execution this is very likely more related to your code rewrite. If the webpackFinal of the Storybook already supports ESM and you need to import the module synchronously then you can create a replacement for the require function like this:
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
...
config.resolve.alias['moduleToMock'] = require.resolve('../src/mocks/mockModule')
Hope it helps.

web3.js to use with web development

I want to use web3.js together with my web page but the require function is not working for me. I have tried using browserify , importing instead of declaring as const but none worked, one problem solution lead to another problem. I tried to bundle these but web3 module has also some js inside which uses import statement so I am getting error to bundle them as well.
issue while using web3js with require
simple js code
issue while using web3js with import
simple js code

The import you wrote is wrong. Here are a few examples:
import {
Keypair,
AccountMeta,
Connection,
PublicKey,
Transaction,
TransactionInstruction,
sendAndConfirmTransaction,
} from "#solana/web3.js";
Or
import web3 = require('#solana/web3.js');

Trouble-shooting "Cannot use import statement outside a module"

I am trying to use puppeteer for e2e testing on a react app. I'd prefer to use TypeScript, so I've tried to start with a file that begins with:
import puppeteer, { Browser, Page } from "puppeteer";
I can't seem to resolve this error, though:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import puppeteer from "puppeteer";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1350:14)
I'm eager to learn, but not sure how to trouble-shoot this.

I don't think Jest supports ES6.
Have you checked Jest docs for support -> https://jestjs.io/docs/ecmascript-modules

How to import React from global variable?

I have a special scenario. One web application is built upon React. Another JavaScript utility is on React, but that utility is loaded by script tag. So, the application and the utility is built isolatedly. As a result, both the web application bundle file and utility bundle file have React built inside.
Now, we want to make them share one copy of React. It is preferred to export React as global variable in web application code(e.g. global.React) so that the utility can use it directly.
The code in utility is still like below. Hopefully, webpack can ignore it and import React from global.React.
import React from 'react';
import ReactDOM from 'react-dom';
The question is: how to config webpack to tell the utiltiy not to bundle React?

Tested with some non-React application:
in index.html import React from CDN, this will define global React.
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
somewhere in application doing as below, resolves to React instance:
declare var React;
console.log('React is ', React);
So if your first bundle, registers React globally, you may use it.
Just keep in mind, that it considered as bad practice to import from global like this. It beats whole concept of webpack's modularity. For instance, if your first module, upgrades to some backward incompatible version of React, your second module will break eventually as well.
For small projects, might be ok.

How to import angular library in reactjs?

I am trying to use a style library from work for building an application for internal use. I am building the application with React, but the only one I can access is an AngularJs library starting with '#SomeStyle'. Is there any way to use the AngularJs library in React?
I tried simply use 'import' in react, the code compiles, but the browser respond with error Uncaught SyntaxError: Unexpected token import.
I use babel loader, which transpile the 'import' syntax in my js file. The project runs, but it crashes when I import the angular style library.
The error comes from the code I imported from angular library, which is added to the bundle.js automatically (I think it is similar to C++ include). From my dev tool I see this line import { CommonModule } from '#angular/common' cause an error.

Resources