I'm trying to use the aws-amplify node package in my mini-programs project. However, when I try to run import Amplify, {API} from 'aws-amplify, I get the following error:
Can't reexport the named export 'package_name' from non EcmaScript module (only default export is available)
I have tried to depreciate the npm package aws-amplify to a older version as Mini-Programs run on the previous version of NodeJS.
After doing some research on the issue, I found a solution that recommended to add the '.mjs' extension to the webpack.js config file. However, being sub-app on the VodaPay environment - I don't have access to the webpack.js file.
resolve: {
extensions: ['.mjs', '.js', '.jsx', '.css', '.scss'],
modules: [
path.resolve(__dirname, 'src'),
'node_modules',
],
},
Some npm packages are not compatible with mini programs due to them not having access to the DOM.
The AWS amplify package isn't compatible because of this. It makes use of the fetch() JavaScript function which isn't supported in the mini programs.
By just importing the package into an empty mini program I get this error in the console:
TypeError: Cannot read property 'fetch' of undefined
Related
I am building a Nuxt3 app and trying to integrate Cypress. As I'm aware Nuxt3 uses Vite instead and not babel, I was trying to instrument the project code using vite-plugin-istanbul npm package.
Here's my nuxt.config.ts after installing vite-plugin-istanbul package:
vite: {
vue: {
template: {
transformAssetUrls: true
}
},
plugins: [
istanbul({
exclude: ['node_modules', 'test/', 'coverage/'],
extension: [ '.js', '.ts', '.vue' ],
cypress: true
}),
]
},
When I'm trying to run the server using npm run dev and visit the localhost URL, the following error is thrown at terminal:
[nuxt] [request error] [unhandled] [500] window is not defined
at cov_1291n0zka8 (./.nuxt/dist/server/server.mjs:3623:191)
at $id_Sv05hbOoTf (./.nuxt/dist/server/server.mjs:3624:75)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:40418:3)
It seems the plugin is instrumenting the server-side rendered code and window object isn't defined there. I need to have SSR enabled in my app and I'm not sure of how to handle this error.
This issue has been resolved by the plugin authors.
TLDR version
Just update the vite-plugin-istanbul package to the latest version and the issue should get resolved.
Long version
There are two parts to this error:
The package was originally configured to transform all the files. The plugin authors have now added a condition that checks whether the SSR has been enabled or not. This is done via options.ssr property within the transform function. Please upgrade to the latest version of vite-plugin-istanbul. The plugin no longer instruments the SSR files, hence the window object error no longer exists in there. Follow this thread if you need more details.
After getting this error resolved, I was still facing another issue where the code instrumentation was impacting the proper app compilation and throwing a hydration mismatch error. The plugin authors came to the rescue again and fixed this error. Please upgrade to the latest version of vite-plugin-istanbul. Follow this GitHub thread if you need more details.
The package authors are really awesome and helpful. It's great to see such people in the open source community!
I am trying to setup socket.io-client inside a svelte component.
The docs say that I can do import { io } from 'socket.io-client'.
But when I try to run the app using the serve target, the command fails with the following logs:
Bundle complete. Watching for file changes...
Bundling...
'bufferutil' is imported by bufferutil?commonjs-external, but could not be resolved – treating it as an external dependency
'utf-8-validate' is imported by utf-8-validate?commonjs-external, but could not be resolved – treating it as an external dependency
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> node_modules\util\util.js
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> C:\Users\munda\Documents\upwork\upwork-gameshow\node_modules\util\util.js?commonjs-proxy -> node_modules\util\util.js
#rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
No name was provided for external module 'tty' in output.globals – guessing 'tty'
No name was provided for external module 'os' in output.globals – guessing 'os'
No name was provided for external module 'fs' in output.globals – guessing 'fs'
No name was provided for external module 'child_process' in output.globals – guessing 'require$$0'
No name was provided for external module 'http' in output.globals – guessing 'require$$1'
No name was provided for external module 'https' in output.globals – guessing 'require$$2'
No name was provided for external module 'net' in output.globals – guessing 'net'
No name was provided for external module 'tls' in output.globals – guessing 'tls'
No name was provided for external module 'crypto' in output.globals – guessing 'require$$0$3'
No name was provided for external module 'zlib' in output.globals – guessing 'zlib'
No name was provided for external module 'bufferutil' in output.globals – guessing 'require$$1$1'
No name was provided for external module 'stream' in output.globals – guessing 'require$$0$2'
No name was provided for external module 'utf-8-validate' in output.globals – guessing 'require$$0$1'
Creating a browser bundle that depends on Node.js built-in modules ("tty", "os", "http", "https", "zlib" and "stream"). You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
Steps I took to generate the app:
Initiate an nx-workspace using yarn create nx-workspace
Install the svelte generators using yarn add #nxext/svelte, link: https://nx.dev/community#:~:text=the%20Nx%20workflow-,%40nxext/svelte,-Nx%20plugin%20to
Generate a svelte application using the installed generator.
Add the socket.io client side code in the component (basic socket initialisation as mentioned in docs).
Since my server and client are not going to be hosted on the same domain, add the import { io } from 'socket.io-client' and initialize the socket using const socket = io(SERVER_URL)(in my case this was http://localhost:3000)
Install socket.io client using yarn socket.io-client.
Run the serve target using nx run-many --target=serve --all --parallel, fingers crossed.
Result: The above mentioned log.
What am I missing?
I needed to install the following missing dependencies:
bufferutil
utf-8-validate
A simple yarn add bufferutil utf-8-validate fixed it for me. This is mentioned in docs for socket.io-client package or socket.io official documentation website.
This did fix builds on my PC (windows) but I could not get the same thing running on mac. I tried deleting node_modules and yarn.lock, re-running yarn.
Finally I had to go through the CDN route.
This is how I did it:
Move the socket initialisation logic in a function.
<script>
...
const initialiseSocket = () => {
socket = io('http://localhost:3000');
socket.on('messages', (data) => {
//...
});
}
</script>
Add a svelte:head tag to load the socket-io.client from CDN and pass the function to this script's on:load.
<svelte:head>
<script
src="https://cdn.socket.io/4.2.0/socket.io.min.js"
integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
crossorigin="anonymous"
on:load={initialiseSocket}></script>
</svelte:head>
By default Storybook uses babel-loader, but the current version of babel-loader is incompatible to the one Storybook requires. So I decided to use awesome-typescript-loader instead. That is, my project uses babel-loader and Storybook uses awesome-typescript-loader.
I added the webpack.config.js file:
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
but Storybook still insist to load babel-loader.
ERR! Error: Cannot find module 'babel-loader'
How can I set up an alternative loader?
Try with #next version, there was a fix 5 days ago that solves it by skipping babel loader check.
This is how to run the init command with the #next version:
npx -p #storybook/cli#next sb init
Additionally, if you haven't already, clean up babel-loader from package.json, remove npm lock file, and re-run npm install.
Be aware #next is not the stable version, and this is not completely ideal, but if you are interested keep following the conversation
I'm building an internal tool in Laravel and I need a datetime picker for part of the interface. My research has suggested that Tempus Dominus is the solution most people use to solve this.
I've installed Tempus Dominus and Moment (through Node) and added them both to my app.js file. However when I try to compile the JS I get the following warning:
WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
# ./node_modules/moment/min/moment.min.js
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/sass/app.scss
This is how I'm importing them in the app.js file:
require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');
What am I missing?
The official Tempus Dominus Bootstrap plugin is unmaintained and is kinda buggy when it comes to ES6 and module bundlers.
I strongly advise you to install these two forks instead:
https://www.npmjs.com/package/tempusdominus
https://www.npmjs.com/package/tempusdominus-bootstrap
npm i tempusdominus tempusdominus-bootstrap
If you wanna make it work, you should inject/provide moment and jquery imports in the final build of your application (1st option), or make them globally available (2nd option).
1st option
What is your module bundler?
E.g., if you are using Rollup, you can configure the build like this using the Rollup's #rollup/plugin-inject plugin:
// Your imported plugins...
import inject from "#rollup/plugin-inject";
export default {
input: "src/index.js",
output: [
// You outputs...
],
plugins: [
inject({
$: "jquery",
jQuery: "jquery",
moment: "moment",
exclude: "src/**",
}),
// Your other Rollup plugins here...
],
};
For Webpack, you'd need to use the ProvidePlugin:
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
moment: 'moment'
})
]
};
2nd option
The other option would be to make moment and jQuery globally available in your app by adding the following lines to your index.js main entry point file:
import moment from "moment";
import $ from "jquery";
window.$ = window.jQuery = $;
window.moment = moment;
// Your other imports (tempusdominus-bootstrap as well) go here...
Though I didn't test, both options should work (let me know if not).
Of course, the preferred one would be to use a module bundler (1st option) and not to expose jQuery and/or moment to window.
And if you are using React, I advise you to use this library here instead (demo here). But that's another story.
I'm trying to use:
Svelte (https://github.com/sveltejs/template) and
Svelte-Apollo (https://github.com/timhall/svelte-apollo).
Using Rollup (https://github.com/sveltejs/template/blob/master/rollup.config.js) for the final bundle when compiling (npm run build) I got this error:
Error: "Subcription is not exported by node_modules/subscriptions-transport-ws/dist/index.js"
So I thought of solving with (https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports):
commonjs({
namedExports: {
'./node_modules/subscriptions-transport-ws/dist/index.js': ['SubscriptionClient']
}
}),
Now Rollup says:
index.js → public/bundle.js...
(!) Mixing named and default exports
Consumers of your bundle will have to use bundle['default'] to access the default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events', 'https', 'http', 'url', 'zlib' and 'stream'. You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
events (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, commonjs-external-events)
crypto (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, node_modules\ws\lib\sender.js, commonjs-external-crypto)
https (imported by node_modules\ws\lib\websocket.js, commonjs-external-https)
net (imported by node_modules\ws\lib\websocket.js, commonjs-external-net)
http (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, commonjs-external-http)
tls (imported by node_modules\ws\lib\websocket.js, commonjs-external-tls)
url (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, commonjs-external-url)
stream (imported by node_modules\ws\lib\receiver.js, commonjs-external-stream)
zlib (imported by node_modules\ws\lib\permessage-deflate.js, commonjs-external-zlib)
bufferutil (imported by node_modules\ws\lib\buffer-util.js, commonjs-external-bufferutil)
utf-8-validate (imported by node_modules\ws\lib\validation.js, commonjs-external-utf-8-validate)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events')
crypto (guessing 'crypto')
https (guessing 'https')
http (guessing 'http')
net (guessing 'net')
tls (guessing 'tls')
url (guessing 'url')
zlib (guessing 'zlib')
bufferutil (guessing 'bufferutil')
stream (guessing 'stream')
utf-8-validate (guessing 'utf8Validate')
created public/bundle.js in 13.8s
What a mess. I'm just using web oriented libraries, why it complains about nodejs dependencies?!
So I added these lines in rollup.config.js:
import builtins from 'rollup-plugin-node-builtins'
import globals from 'rollup-plugin-node-globals'
...
plugins: [
globals(),
builtins(),
and all the previous errors are gone.
But now in browser I get:
Uncaught ReferenceError: exports is not defined
at client.js:45
It complains about this line (I think):
Object.defineProperty(exports, "__esModule", { value: true });
I'm totally lost.
I created a simple repo: https://codesandbox.io/s/zn1mnon8jl.
If you open it in codesandbox it works! Miracle! But if you download as a .zip and execute npm i && npm run dev you can see the problem.
What to do now?
Try adding this inline rollup plugin before the nodeResolve plugin
{
// needed to specifically use the browser bundle for subscriptions-transport-ws
name: 'use-browser-for-subscriptions-transport-ws',
resolveId(id) {
if (id === 'subscriptions-transport-ws')
return path.resolve('node_modules/subscriptions-transport-ws/dist/client.js');
},
},