We Keep Coding

Once msw-storybook-addon added, I get Unexpected charachter '#' in node_modules/../Emitter.js

I want to use my mock servers for my stories. The Storybook runs perfectly. Once I go through the steps of adding msw-storybook-addon and set up my preview.js from here and here (preview.js is different in these two resources, I tried both), and I run
start-storybook -p 9009 -s public
I get the error below:
ERROR in ./node_modules/strict-event-emitter/lib/Emitter.js 14:4
Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class Emitter {
> #events;
| #maxListeners;
| #hasWarnedAboutPotentialMemortyLeak;
# ./node_modules/strict-event-emitter/lib/index.js 17:13-33
# ./node_modules/msw/lib/index.js
# ./src/mocks/browser.ts
# ./.storybook/preview.js
# ./.storybook/preview.js-generated-config-entry.js
# multi ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/#storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/#storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/#storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/strict-event-emitter/lib/MemoryLeakError.js 5:11
Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
> emitter;
| type;
| count;
# ./node_modules/strict-event-emitter/lib/index.js 18:13-41
# ./node_modules/msw/lib/index.js
# ./src/mocks/browser.ts
# ./.storybook/preview.js
# ./.storybook/preview.js-generated-config-entry.js
# multi ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/#storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/#storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/#storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.25 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/#storybook/core-common/templates/index.ejs] 2.04 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class Emitter {
> #events;
| #maxListeners;
| #hasWarnedAboutPotentialMemortyLeak;
at handleParseError (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
> emitter;
| type;
| count;
at handleParseError (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/#storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
info => Loading presets
error Command failed with exit code 1.
I realized from this error that the file Emmiter.js is using es6 syntax and for some reason, my webpack config doesn't have that loader. So I searched for how to override my webpack config without ejecting from here. I also looked for the loader that can interpret es6, and I found this. So I added the code below to my config-override.js
module.exports = function override(config, env) {
config.module.rules[1].oneOf = config.module.rules[1].oneOf
.map((one) => {
if (one.options && one.options.name && one.exclude) {
one.exclude = [/\.(mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.pdf$/];
}
return one;
})
.concat([
{
test: /\.js$/,
loader: "babel-loader",
options: { presets: ["es2015"] },
},
]);
return config;
};
And updated my scripts on package.json
yarn start gets stuck on Starting the development server...
I'm not even sure if this is the right solution.
Any ideas what the problem is and what I should do here?

Adding these packages to my package.json:
"#storybook/builder-webpack5": "6.5.16",
"#storybook/manager-webpack5": "6.5.16",
"webpack" : "5"
And these lines to my main.ts inside module.export
core: {
builder: "#storybook/builder-webpack5"
},
docs: {
autodocs: true
}
resolved the issue.

ReactJs Failed to compile

./src/index.js 1:72
Module parse failed: Unexpected token (1:72)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('C:/Users/fujitsu/Desktop/Odin Project/WHERE'S WALDO/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

Extracting terraform resource changes with github-script#v5 action

I have a github workflow where I want to filter the terraform destroy changes from the terraform plan file and post that as comment in the PR.
- name: Terraform Plan
id: plan_json
run: |
terraform plan -out planfile 2>error.log
terraform show -json planfile > plan.json
continue-on-error: true
- uses: actions/github-script#v5
id: message
if: ${{ always() }}
with:
result-encoding: string
script: |
const fs = require('fs');
const report = JSON.parse(fs.readFileSync('./plan.json'));
var message = '';
for (const changes in report.resource_changes) {
message += `${changes.change.actions[0]} ${changes.name} (${changes.type})\n`
};
console.log('Message: ', message);
return message;
When I run the workflow it gives this error:
SyntaxError: Unexpected token c in JSON at position 1
at JSON.parse (<anonymous>)
at eval (eval at callAsyncFunction (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:4942:56), <anonymous>:4:21)
at callAsyncFunction (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:4943:12)
Error: Unhandled error: SyntaxError: Unexpected token c in JSON at position 1
at main (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:4997:26)
at Module.272 (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:4981:1)
at __webpack_require__ (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:24:31)
at startup (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:43:19)
at /home/runner/work/_actions/actions/github-script/v5/dist/index.js:49:18
at Object.<anonymous> (/home/runner/work/_actions/actions/github-script/v5/dist/index.js:52:10)
at Module._compile (internal/modules/cjs/loader.js:959:30)
I don't have any nodejs/javascript experience so I have no clue what I am doing wrong here.
The actual plan file can be found here.
When I run the nodejs script locally it works.
❯ node tfplan.js
Message: create, rg (azurerm_resource_group)
create, rg-name (random_pet)

- uses: hashicorp/setup-terraform#v1
with:
terraform_wrapper: false
terraform_wrapper: false had to be added to the terraform setup task.
For more info check this.

Error running react native project using async storage on web platform

I am trying to run a React Native test app on a web platform.
I have installed #react-native-community/async-storage dependency.
It generates the following error:
ERROR in ./node_modules/#react-native-community/async-storage/lib/AsyncStorage.js 40:5
Module parse failed: Unexpected token (40:5)
You may need an appropriate loader to handle this file type.
| }
|
type ReadOnlyArrayString = $ReadOnlyArray;
|
| type MultiGetCallbackFunction = (
# ./node_modules/#react-native-community/async-storage/lib/index.js 5:0-42 7:15-27
# ./src/app.js
# ./index.web.js
# multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./index.web.js
ERROR in ./node_modules/#react-native-community/async-storage/lib/hooks.js 7:5
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| import AsyncStorage from './AsyncStorage';
|
type AsyncStorageHook = {
| getItem: (
| callback?: ?(error: ?Error, result: string | null) => void,
# ./node_modules/#react-native-community/async-storage/lib/index.js 8:0-40 8:0-40
# ./src/app.js
# ./index.web.js
# multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./index.web.js
Note: Code is running on Android, but it is not running on Web.

resolve: {
alias: {
'#react-native-community/async-storage': 'react-native-web'
}
}
create a resolve alias in your webpack.config.json.
This might help you

Cannot Require Popper with Webpack

I'm attempting to move my javascript files to Webpack. I'm not very familiar with Webpack so I am not sure that I have coded any of this correctly. I am trying to load jquery-ui, popper, and bootstrap 4. However, I am getting an error when requiring Popper. Please note that I am using the Wepacker gem for Ruby on Rails.
I have included the following code in my environment.js file to include jQuery automatically in each file.
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
This part works. So, from there I ran yarn add jquery-ui.
Then in my /pack/application.js file I included require('jquery-ui').
From my js file the following code prints to my console:
$(document).ready(function(){
if (jQuery.ui) {
console.log("loaded");
}
});
After this I tried installing and requiring popper with yarn add popper.
Then calling popper from inside my document.ready function I get an error:
$(document).ready(function(){
console.log(window.Popper)
});
The error:
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)
30 | if (_path.posix) {
31 | module.exports = _path;
32 | return;
| ^
33 | }
34 |
35 | // resolves . and .. elements in a path array with directory names there
at Parser.raise (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:6420)
at Parser.parseReturnStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10370)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10057)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseBlock (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10556)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10085)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseIfStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10363)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10054)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/#babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)
Here is my pack/application.js file
require("#rails/ujs").start()
require("#rails/activestorage").start()
require('jquery-ui')
require('popper')

I just did the same thing, then realized what the issue was. popper is some kind of advanced browser testing library in Node. Bootstrap depends on popper.js , which is a tooltip popup library for the browser.
So to fix this, you'll want to:
yarn remove popper
yarn add popper.js