Using redux-promise-middleware with web component tester - javascript

I have an import called redux-scripts
<link rel="import" href="../config.html">
<script src="../../node_modules/redux/dist/redux.min.js"></script>
<script src="../../bower_components/amazon-cognito-identity-js/dist/aws-cognito-sdk.min.js"></script>
<script src="../../bower_components/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-promise-middleware/4.4.1/redux-promise-middleware.min.js"></script>
<script src="./redux-promises.js"></script>
Which I import at the top of redux-mixin.html
<link rel="import" href="../../bower_components/polymer-redux/polymer-redux.html">
<script src="../../bower_components/aws-sdk/dist/aws-sdk.min.js"></script>
<link rel="import" href="redux-scripts.html">
<script type="module" src="./index.js"></script>
<script nomodule src="./bundle.js"></script>
Runs like a charm in Chrome and firefox, but when it comes to web component tester:
redux-store.js:22 Uncaught ReferenceError: ReduxPromiseMiddleware is not defined
at redux-store.js:22
Which is referring to
import programs from './programs/programsReducer.js';
import videos from './videos/videosReducer.js';
import video from './video/videoReducer.js';
const rootReducer = Redux.combineReducers({
programs,
videos,
video,
});
// Setup a Redux store
const initialState = {
viewSpecificToolbar: 'videos',
};
const store = Redux.createStore(
rootReducer,
initialState,
// The best part 8)
Redux.compose(
Redux.applyMiddleware(ReduxPromiseMiddleware.default()),
window.devToolsExtension ? window.devToolsExtension() : (v) => v
)
);
export {store};
I've implemented a partial workaround by adding this to the top of redux-store.js
const scripts = Polymer.ResolveUrl.resolveUrl('./redux-scripts.html');
Polymer.importHref(scripts, null, null, false);
But it's not super satisfying, as it causes many errors when running tests, and not all of the test suites run.

Another solution was to add the redux-scripts.html import to all test files, however, a better solution was attained by altering the redux-promise-middleware library. In version 4.4.2, the import statement in index.js now points to the relative path ./isPromise.js with file extension. With that in place, I can import promiseMiddleware from '../../node_modules/redux-promise-middleware/dist/es/index.js' in redux-store.js and we're golden.

Related

Javascript: import another javascript file

I have an xState State Machine defined in a MYSM.js. I would like to try importing this javascript file in my app.js file. I have tried every solution and I can't get it to work.
MYSM.js
const { createMachine, actions, interpret, assign, interface } = XState;
export interface MYSMContext {
returnCode: undefined, errorMessage: undefined
}
export const mySM = createMachine({/* code here */});
app.js
import {mySM} from './MYSM.js'
const newContext = {returnCode: 0; errorMessage: ''};
const dynamicSM = mySM.withContext(newContext);
const myService = interpret(dynamicSM).start();
index.html
<!-- xState State Machine-->
<script type="module" src="https://unpkg.com/xstate#4/dist/xstate.js"></script>
<script type="module" src="https://unpkg.com/xstate#4/dist/xstate.web.js"></script>
<script type="module" src="~/js/MYSM.js"></script>
<script type="text/javascript" src="~/js/app.js"></script>
In my browser, I'm getting the 'SyntaxError: Cannot use import statement outside a module'
How do I import MYSM.js into app.js?
The error should be taken quite literally:
SyntaxError: Cannot use import statement outside a module
You are using import statement import {mySM} from './MYSM.js' inside app.js, which is not a module. But the rule is clear: you cannot use import statement, if it is not inside a module. Change app.js to module by changing type attribute:
<script type="module" src="~/js/app.js"></script>
Additional notes:
You can also remove this line of code
<script type="module" src="~/js/MYSM.js"></script>
since you are already importing mySM inside app.js.

How to get Pyodide to work in a React component?

I am trying to make my own Python fundamentals tutorial that's similar to the interactive editor that codecademy.com has. However, I'm struggling to make Pyodide work with React.
Using the very basic getting started example, I can make the following work in index.html of my create-react-app app:
<!-- PYODIDE -->
<script src="https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
async function main() {
let pyodide = await loadPyodide();
console.log(pyodide.runPython(`
import sys
sys.version
`));
pyodide.runPython("print(1 + 2)");
}
main();
</script>
.....
</body>
However, when I try to move the same code into a separate component, it says 'loadPyodide' is not defined
import React from 'react'
const Task1 = ({ replNum, task }) => {
async function main() {
let pyodide = await loadPyodide();
console.log(pyodide.runPython(`
import sys
sys.version
`));
pyodide.runPython("print(1 + 2)");
}
main();
return (
SOME CODE
)
Why is this?
Try using window.loadPyodide instead of loadPyodide. React uses modules where 'use strict' is set, so undeclared global variables are not allowed.

What is the correct way of importing React Component in non-React build website?

I built a site with Node, Express and want to add a page which is built with React and JSX.
I've installed Babel as npm package and added React as a script like this into index.html:
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
and Main module
<script src="./js/Main.js"></script>
My question is how to properly import a Child Component into a Parent Component.
Lets say I want to import './components/Message.js'
into 'Main.js' like this
function Main() {
return (
<div>
<h1>Hello World</h1>
<Message />
</div>
)
}
const renderDiv = document.getElementById('chat-module')
ReactDOM.render(<Main />, renderDiv)
to do this I need to import Message.js into Main.js but
import Message from 'components/Message'
gives Uncaught SyntaxError: Cannot use import statement outside a module error.
The only solution I have found so far is to add Message.js as a script into index.html and call it from Main.js as window.Message
Is this the only available solution or is there more proper and efficient way to connect these components?
Note: As a reminder Im not using npx create-react-app. This is an existing app built with express.
Did you try <script type="module" src="./js/Main.js">?
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Can't require node modules in JS files in svelte electron

I'm using electron with svelte as my frontend framework.
I have JS files that contain functions used by my svelte components.
When I try to import a node module using require - it returns an empty object.
When I use require inside a svelte component it works fine. (I've set nodeIntegration: true in my electron.js file).
How could I fix this?
EDIT: An example:
<!--SvelteComponent.svelte-->
<script>
import {func} from "./jsFile";
</script>
//jsFile.js
const fs = require("fs"); // This require returns an empty object
export function func {...}
I also get a Rollup warning: (!) Plugin node-resolve: preferring built-in module 'fs' over local alternative at 'fs', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
It turns out I should have used window.require instead of require
Here's a fragment of a working svelte component from my application. All imported or required objects just work fine.
<script>
import '../../../node_modules/materialize-css/dist/css/materialize.css';
import '../../../css/material-icons-svelte.css'; // we'd have to adjust the font paths!! check extra.css
import '../../../node_modules/codemirror/lib/codemirror.css';
import '../../../node_modules/materialize-css/dist/js/materialize.js';
const {getState, getStore} = require('../../../dist/store/store.renderer');
const {ipcRenderer} = require('electron');
const _ = require('lodash');
Edit
I added this to my App.svelte component, that I use on a svelte app with electron and, well, it works. Prints the fs object to the console and it's not empty
const fs = require('fs')
console.log(fs);
nodeIntegration is set to true, this my index.html:
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' href='../../../css/global.css'>
<link rel='stylesheet' href='../../../dist/app/myapp/extra.css'>
<link rel='stylesheet' href='../../../dist/app/myapp/bundle.css'>
</head>
<body class="grey lighten-4">
<script src='../../../dist/app/myapp/bundle.js'></script>
</body>
</html>
And I'm on electron 8.2.5

import statement gives a syntax error saying "Cannot use import statement outside a module"

I am new to web development, This is just a simple code i created to test a new text editor I installed, I got this error while trying to import react because I was getting some other errors like; TypeError: Cannot read property 'createElement' of undefined
Please, how can i resolve this? is the import statement wrong?
import React, { Fragment } from 'react';
console.log("Testing");
var document;//made this declaration because I got a document undefined error
document.createElement("p"):
const p = document.createElement("p")
p.innerHTML = "This is to test the javascript";
const body = document.querySelector("body");
body.insertBefore(p,body.childNode[-1]);
<!DOCTYPE html>
<html>
<head>
<title>Testing vs code</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>Testing the vscode html preview package</h1>
<h2>Hello</h2>
<script type="module" src="js-prac.js"></script>
</body>
</html>
As per https://reactjs.org/docs/add-react-to-a-website.html, you need to add these two lines to your HTML file before importing your script:
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
I'm not sure that module loading is going to work the way you intend without using something like Create React App. You can remove the import statements and you can still reference React and ReactDOM in your script.
e.g.
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
I Understand you want to create a simple application with React. I would recommend you to read this first https://kentcdodds.com/blog/how-to-react and then this one: https://reactjs.org/tutorial/tutorial.html
A react application can be created by importing script as you have started, but it is not the recommended way to build a react app.
Once you go through the above post, find a good tutorial of your choice on platforms of your choice be it blog or video based. I can name a few like udemy, frontend masters, pluralsight, and there are many more.
Take a look at ReactJS website.
You should create React app using Node package manager
npx create-react-app appName
or should link react scripts to your html
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
Also you can't redefine document object. This references your web page and you can access to element or DOM (Document Object Model) using document object.

Categories