react-script compatibility issue with third party node module - reactjs

I am working with react-script 2.1.8 version. I have got an issue while integrating third party node-module as it throws syntax(babel) related error.
react-script is no config library which means i can't define plugin/preset for bable(.babelrc and webpack config does not work.)
please suggest me some solution which can resolve babel issue by defining config or suggest some other way to integrate this library with my project
I've tried to resolve the issue with 'react-app-rewired'and for configuration 'arackaf/customize-cra'. but still errors persist.
import React from 'react';
import ReactDOM from 'react-dom';
import Vr from './vr/Vr.jsx';
const MOUNT_NODE = document.getElementById('root');
const render = () => {
ReactDOM.render(
<div/>,
MOUNT_NODE
);
};
export Vr from './vr/Vr.jsx';
render();
ERROR 1:
Unexpected token (10:3)
ReactDOM.render(
<div/>,
^
MOUNT_NODE
);
};
ERROR 2:
};
export Vr from './vr/Vr.jsx';
^
render();
Add #babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
Note: this error is related to react preset and babel plugin respectively . But somehow babel config is not working with this third party module(node-module).

Related

How to React Typescript Functional Component Library?

I hope someone can tell me where I am going wrong in trying to get usable libraries
I have created a NPM project using create-react-app --format typescript, I then created the following structure:
|->tsconfig.json
|->package.json
|->config
|->tsconfig.base.json
|->tsconfig.cjs.json
|->tsconfig.esm.json
|->src
|->index.tsx
|->components
|->index.ts
|->ExampleComponent
|->ExampleComponent.component.tsx
|->ExampleComponent.stories.tsx
|->ExampleComponent.types.ts
|->index.ts
In this example the Example Component looks something like the following:
|->tscon
import React, { FC } from 'react';
// Contact specific icons
import Container from 'react-bootstrap/Container';
// Footer Properties
import { ExampleProperties } from './ExampleComponent.types';
export const ExampleComponent: FC<ExampleProperties> = ({ text }) => {
return (<Container fluid>{text}</Container>);
};
for the tsconfig files in 'config' I've lifted the Synk recommendation directly, while tsconfig.json is fairly simple like so:
{
"extends": "./configs/tsconfig.esm.json",
}
If I start the application via 'npm start' I get a website and the component correctly appears, but the issue is trying to import into another project.
I using npm link and npm link #Example/ExampleProject to bring the project in to another website and the index.tsx of that project looks like so:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ExampleComponent } from '#Example/ExampleProject';
const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element') const root = createRoot(container);
root.render(
<React.StrictMode>
<main role={"main"} >
<ExampleComponent/>
</main>
</React.StrictMode> );
But when it starts I am getting this error:
Module not found: Error: Can't resolve './ExampleComponent/index' in '/home/user/IdeaProjects/ExampleProject/dist/esm' Did you mean 'index.mjs'? BREAKING CHANGE: The request './Common/index' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
The only thing I can think is tsc generates src/components/index.ts as a /src/component/index.js (which I rename). But ExampleComponent has .js and .mjs files within its directory

Could not find module in path: 'react-native/Libraries/Utilities/Platform'

I'm trying to use react native navigation in my app, but get odd error. I'm using online platform Code Sandbox with React Native template.
Dependencies:
#react-native-material/core 1.3.7
#react-navigation/native 6.1.2
#react-navigation/native-stack 6.9.8
react 17.0.* (17.0.2)
react-dom 17.0.* (17.0.2)
react-native 0.71.1
react-native-safe-area-context 4.5.0
react-native-screens 3.19.0
react-native-web 0.18.* (0.18.12)
react-scripts 3.4.1
import React from "react"
import { Text } from "#react-native-material/core"
import { NavigationContainer } from "#react-navigation/native"
import { createNativeStackNavigator } from "#react-navigation/native-stack"
/* ^^^ problem line ^^^ */
const Stack = createNativeStackNavigator()
function App() {
return <Text>Example text</Text>
}
export default App
Error:
ModuleNotFoundError
Could not find module in path: 'react-native/Libraries/Utilities/Platform'
relative to '/node_modules/react-native/Libraries/StyleSheet/processColor.js'
I tried delete and re-add react-native dependency as well as recreate the sandbox, but the problem hasn't gone.

In webpack 5 what all plugins are inbuilt part from terser plugin.How to remove consoles from output bundle with webpack?

In webpack 5 what all plugins are in built apart from terser plugin.How to remove consoles from output bundle with webpack
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './styles/main.scss'
// replace console.* for disable log on production
if (process.env.NODE_ENV === 'production') {
console.log = () => {}
}
ReactDOM.render(<App />, document.getElementById('root'))
Using this code i have removed my consoles in production.
All supported plugin list is given below in webpack 5:
https://webpack.js.org/plugins/
But still not sure apart from terser plugin what all are in built plugins.

Webpack fails to transpile CRA app, trying to import firebase from URL

I've got a simple create-react-app going, have firebase (^9.1.1) npm package installed, and am trying to get up and running (this is my first go with Firebase - I have no idea what I'm doing...)
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
const config = {
...
}
export const firestoreApp = initializeApp(config)
export const db = getFirestore(firestoreApp)
console.log(db.name)
When webpack works its magic, I get the following error
Failed to compile.
./node_modules/firebase/firebase-firestore.js
Module not found: Can't resolve 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js' in '/Users/<user>/git/<project>/node_modules/firebase'
Looking at the file, the top has an import from a URL import { _registerComponent, registerVersion, _getProvider, getApp, _removeServiceInstance, SDK_VERSION } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js';
Is this normal? I've never seen an import from a URL like this (but I'm also not a native JS dev) Is this a webpack issue and I'm just a dunce? A bug?
Yep, It's a bug. I had the same problem. Fixed it downgrading to the version before 9.1.1:
npm install firebase#9.1.0

jest test cannot import cesium using create react app and craco

I am using create react app with craco, and craco-cesium to load cesium into my project. I am trying to setup jest to start creating tests but the issue is Cesium is using requireJS.
I added the following to my package.json
// package.json
...
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts"
],
"globalSetup": "<rootDir>/setupTests.js"
}
...
based on the ticket opened up here: https://github.com/facebook/jest/issues/1914
I setup the setupTests.js with the following code:
// setupTests.js
module.exports = async () => {
var cesium = require('cesium');
process.$Cesium = cesium
};
and I have the first basic test for valid rendering:
// App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
however I get the error in one of my view inside <App /> component with the following code:
import Cesium from "cesium";
...
TypeError: Cannot read property 'Ion' of undefined
...
Cesium.Ion.defaultAccessToken = '...';
reporting Cesium as undefined when calling it's functions. I tried to use jest.config.js for jest to pick up the configuration from there with the following code:
// jest.config.js
const { createJestConfig } = require("#craco/craco");
const cracoConfig = require("../craco.config.js");
const jestConfig = createJestConfig(cracoConfig);
module.exports = jestConfig;
but create react app doesn't pick up this file so I cannot try this to verify if this would work.
encoutered the same problem.
Upgrading react-scripts to version 4.0.1 and #craco/craco# to version 6.0.0, seemed to solve these problems, and jest now recognizes all imports from cesium. No other configuration files were needed.

Resources