I am working on a Next.js project that uses Firebase. I'm trying to make a simple query with Firestore and I'm getting the following error:
SyntaxError: The requested module '#grpc/grpc-js' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from '#grpc/grpc-js';
const { credentials, loadPackageDefinition, Metadata } = pkg;
It seems like Firebase library wouldn't work with '#grpc/grpc-js' in Next.js asks the same question, but I'm not sure what Node version to upgrade or downgrade to.
Related
I'm working in mono-repo environment so I created package which i can share between my frontend and backend services.
I have generated react app through CRA with typescript template, I can import typescript files with typescript syntax totally fine when files are located in my frontend app.
But when I try to import typescript file from custom library I created, I get the following error
Module parse failed: Unexpected token (16:10)
File was processed with these loaders:
* ../../node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
> const test: number = 0
When I remove typescript syntax from file the import works.
I tried using tsc to transpile typescript into javascript. Importing javascript files also works
I ran create-react-app.
Made no changes and ran the tests.
The tests failed straight away.
Error: Failed to initialize watch plugin "node_modules/jest-watch-typeahead/filename.js":
● Test suite failed to run
file:///C:/_Projects/my-app/node_modules/jest-watch-typeahead/build/file_name_plugin/prompt.js:4
import { PatternPrompt, printPatternCaret, printRestoredPatternCaret } from 'jest-watcher';
^^^^^^^^^^^^^
SyntaxError: The requested module 'jest-watcher' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'jest-watcher';
const { PatternPrompt, printPatternCaret, printRestoredPatternCaret } = pkg;
at async requireOrImportModule (node_modules/jest-util/build/requireOrImportModule.js:65:32)
at async watch (node_modules/#jest/core/build/watch.js:337:34)
at async _run10000 (node_modules/#jest/core/build/cli/index.js:311:7)
What the deuce?
Can anyone please help?
This is a known issue and is related to the version of node you are using. Check out https://github.com/facebook/create-react-app/issues/11792.
Resolve it by upgrading to the latest node version >16. This worked for me. https://nodejs.org/en/download/
I created react by create-react-app my-app --typescript.
And then I installed typescript module in local.
../typescript-module/A.ts
export default class A {
}
App.ts
import A from 'typescript-module/A';
console.log(A);
I try to import typescript module to my react app.
But it show error like under.
./node_modules/typescript-module/A.ts
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
How can I set installing local typescript module ?
If I am understanding correctly, you are trying to import a local custom made React component. If you use an absolute path for your import, it will try to find it in the node_modules. You should use relative paths for local modules/components.
import 'typescript-module/A' -> import './typescript-module/A'
Note: The relative path depends on where you are importing it from
I'm trying to use google maps api in my react app using webpack and typescript.
i've tried installing this package:
npm install googlemaps
npm install #types/googlemaps
Then in my app
import * as GoogleMapsAPI from 'googlemaps';
I get the following error
[ts] File 'c:/MyAppFolder/node_modules/#types/GoogleMaps/index.d.ts' is not a module.
Not sure what I'm doing wrong
You don't need to import from "googlemaps". google.maps is a global variable declared in googlemaps/index.d.ts. So you can use google.maps in your code right away.
For example
const point = new google.maps.Point(0,0);
For more info about typescript module and namespace. You can follow this link
I am working on an isomorphic react project and am attempting to use the Stripe node SDK (vs their REST API) within a Redux module. When Webpack builds the project I get the error: Module not found: Error: Cannot resolve module 'child_process'. I know this is a node only module, so I cannot use it on the browser (I only want Stripe API calls to originate on the server-side), I just don't know how to ensure that the Stripe node_module is not packaged in to the browser app.js file.
While I am importing the stripe module in the redux module, on the JSX side, I am only importing the IStripe interface from the stripe.model and the getPlansList dispatcher from my stripe redux module.
So my question is how does one use node-only modules within an isomorphic React project? Do I need to run a separate server-only node process that handles my Stripe calls? Or is it possible to contain this functionality within my isomorphic app?
Thanks!
Look at the issue, you should not run stripe-node in browser.
You can setup alias in webpack config:
{
resolve: {
alias: {
'stripe': './src/stripe-browser'
}
}
}
If you don't need to use Stripe in browser, you can just create an empty file stripe-browser as a stub for API.
If you are going to use API in browser, you have to create an adapter to Stripe.js client-side library.