Emoji dictionary cant find modules ./emojis - javascript

I'm currently trying to use emoji-dictionary on my project but it fails to run!
I'm receive the index.js:2 Uncaught Error: Cannot find module "./emojis" error!

Since the reactjs tag appears, I speculate you use Webpack and you didn't set up the json-loader. emojis.json is a file from the emojilib package which is a dependency of emoji-dictionary.
Install json-loader:
npm install --save-dev json-loader
And then configure it:
module.exports = {
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
}
}
Check out json-loader on GitHub for more information.
If this is not solving the issue, you may need to explain a little bit the context. It seems to not be related to the package itself because •it's working on my machine•. 😅

Related

After upgrading Angular, webpack module source-map-loader is throwing "this.getOptions is not a function"

I am currently building my angular project via webpack with source-map-loader to extract source maps, like so:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
This works fine with my Angular 11 build.
Once I upgrade my angular packages to Angular 12, I begin to get the following error:
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (./node_modules/source-map-loader/dist/index.js:21:24)
Removing this section from my webpack module allows the build to succeed but I am no longer extracting the source maps, causing my bundle to increase in size.
I have tried upgrading source-map-loader to latest version and did not change the error.
I have dug into the node_module and it is complaining about this section of code:
async function loader(input, inputMap) {
const options = this.getOptions(_options.default);
I have seen may other questions on here in regards to sass-loader and other style loaders for Vue but this is for Angular and is mad about extracting source maps.
There are some breaking changes when going to Angular 12 but upgrading to webpack 5.0.0 did not seem to make a difference
What are some other things I can do to debug this?
By looking at the source code v1.1.3 we do see
import { getOptions } from "loader-utils";
But after v2.0 or even v3.0, this import was deleted.
It came from the library loader-utils
Since v2.0, package.json doesn't import it anymore.
Looks like it has been deprecated, getOptions should be use from Webpack type instead of loader-utils.
Maybe your error come from a conflict with an old dependencie from your node_modules, you should remove the old one from your directory and try again
rm -rf node_modules/#types/loader-utils
rm -rf node_modules/loader-utils

Module not found: Error: You attempted to import babel-preset which falls outside of the project src/ directory

I'm developing an application created using create-react-app
But then I needed to use mediainfojs library, this library requires wasm files, and based on what I understood I couldn't add it using create-react-app, I had to eject it.
After ejecting it, I went to mediainfo information on how to add the wasm on the webpack
They use the CopyPlugin, but then when I tried to do that it complained about the versions of my webpack (4) and the CopyPlugin.... so, I decided to migrate to webpack 5
That is when the pain starts... after follow their migration tutorial and do a bunch of modifications on my webpack.config I got to the following error while runing yarn build:
Module not found: Error: You attempted to import /MyWorkspace/project/node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/asyncToGenerator which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
The only place calling this babel-preset-react-app are in the configuation
Here:
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve(
"babel-preset-react-app/webpack-overrides"
),
And here:
{
test: /\.(js|mjs)$/,
exclude: /#babel(?:\/|\\{1,2})runtime/,
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve("babel-preset-react-app/dependencies"),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
I have looked into similar issues reported here, but mostly of them seem to be related to either static files being dynamically imported or imports referencing ".." dir after the project directory
The full webpack config file is here
I'm probably missing something very silly, I'd be glad if someone can point it out.
I had a similar challenge and I was able to fix this by adding these definitions at the top of my webpack.config file
const babelRuntimeEntry = require.resolve('babel-preset-react-app');
const babelRuntimeEntryHelpers = require.resolve(
'#babel/runtime/helpers/esm/assertThisInitialized',
{ paths: [babelRuntimeEntry] }
);
const babelRuntimeRegenerator = require.resolve('#babel/runtime/regenerator', {
paths: [babelRuntimeEntry]
});
Then where you have the ModuleScopePlugin in the resolve.plugins
update it to be
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
babelRuntimeEntry,
babelRuntimeEntryHelpers,
babelRuntimeRegenerator])
I'm also attempting to upgrade an ejected CRA project to Webpack 5. I was able to move forward using babel-preset-react-app-webpack-5, only to encounter the next CRA-related issue.
Be sure to replace calls like require.resolve("babel-preset-react-app/dependencies") with require.resolve("babel-preset-react-app-webpack-5/dependencies").
Also, be aware the package does not appear to be production-ready, but my own project is still in early development.
I had this issue with a few other babel packages after trying to upgrade an ejected CRA app to webpack v5. I tried many different approaches some of which worked in dev but not in prod and vice versa. I found this comment in the storybook github and it was the only thing that that seemed to work in all scenarios for me.
It's kinda annoying, but by simply moving the offending packages from devDependencies in my package.json to dependencies, it seems to fix the issue. I could spend more time trying to figure out why that fixes it, but I'll leave that to someone with more free time. :)

Webpack 5 Receiving a Polyfill Error?!?! My JavaScript React project is receiving a polyfill error while trying to compile my webpack.config.js file

I am taking a course on Udemy (it is Brad Schiff's React for the Rest of Us course here) that is based on React and I am receiving an error related to webpack which is keeping it from compiling.
I am getting the following error as I am trying to compile my webpack file from a Udemy course I am taking... here is a picture of the error I am receiving on my terminal:
please view it here
Here is the text of the error but please view the link for more details as a screenshot nonetheless:
Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
# ./node_modules/webpack/lib/CleanPlugin.js 12:17-37
# ./node_modules/webpack/lib/index.js 115:9-33
# ./node_modules/dotenv-webpack/dist/index.js 12:15-33
# ./node_modules/dotenv-webpack/browser.js 1:13-38
# ./app/components/HomeGuest.js 5:15-40
# ./app/Main.js 8:0-47 38:96-105
Run npm install node-polyfill-webpack-plugin in your terminal`
go to your webpack.config.js and paste this:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
new NodePolyfillPlugin()
]}
this should fix it, they removed automatic polyfills in webpack 5 that's why downgrading web3 version will fix it too
They have removed automatic polyfills in webpack 5. We have to include them ourselves.
More info here
By looking at the error stack, we see that ./app/components/HomeGuest.js line 15 requires the path module.
If you really need the path module on the client side, you have to add this in the webpack config file:
module.exports = {
// ... your config
resolve: {
fallback: {
path: require.resolve("path-browserify")
}
}
}
And also, install the path-browserify module (npm install path-browserify).
However, you may not need this module on the client side, and then the fix is to edit the HomeGuest.js file line 15 in such a way that the path module is not required.

How to use web worker on a npm module

I'm writing a JavaScript library and I'm using a web worker. I'm using webpack (with worker-loader) to create my build.
Everything is working fine on the library.
webpack.config.js
{
test: /app.worker.ts$/,
include: [
path.resolve(__dirname, 'src/')
],
use: [
{
loader: 'babel-loader',
},
{
loader: 'worker-loader',
options: {
name: 'app.worker.js',
}
}
]
}
That generate :
/dist/app.bundle.js // my main library build
/dist/app.worker.js // my worker build
When I try to import my library on a react-application, my library try yo load the worker like this:
http://localhost:3000/dist/app.worker.js.
which obviously fail because it's located in node_modules/.../dist/app.worker.js.
I probably don't use worker-loader correctly.
Thanks for your help
ok, I just found the problem.
I don't know why but the issue is related to yarn link. If I replace the link: with file: in my package.json, I don't have the problem anymore.
Another (non optimal) solution is to use inline:true.
Anyone know a solution or a workaround with yarn link ?
Thanks !

Webpack build fails with es6 react.js

I use React.js, Webpack, ...props syntax, arrow functions.
When I run "npm run build", I get this error:
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [bundle.js:77854,15]
Here is my debug.log
My webpack.config
How to run build successfully?
I found the line which causes the bug, here it is:
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
I don't know why. :(
Without it, all my ES6 syntax works and compiled without any errors.
Any Help please
This error happens if you use have an npm dependency that has ES6 syntax. It happended to me, too, with Preact (see https://github.com/developit/preact-compat/issues/155).
You can fix it by adding the dependency explicitly to the modules that are loaded through babel, like so:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [
srcPath,
// we need to include preact-compat
// otherwise uglify will fail
// #see https://github.com/developit/preact-compat/issues/155
path.resolve(__dirname, '../../../node_modules/preact-compat/src')
]
}
]
}
In bundle.js, line 77854, character 15, there is a parenthese after a object properties name, instead of a :.
There must be something like :
{property () {}}
instead of
{property : function () {}}
Edit (thanks to #handoncloud): The first is valid ES6, and is a shorthand for the second, that is the equivalent in ES5.
The problem is, that the build does not fully support ES6.
Found it.
React-Bootstrap-Table have a dependency named React-Modal.
I installed React Modal by npm install react-modal without --save or --save-dev. So React-Modal wasn't not listed in my package.json.
Now everything is ok.
SOLUTION : npm install react-modal --save

Categories