Develop Reference

Error: Cannot find module 'src/entities/Post'

so i am creating a graphQL server using type-graph and mikro-orm
everything was fine till i got this error that says => Error: Cannot find module 'src/entities/Post' and that module exists as you can see in this picture:
folder structure
and this is what the error looks like int the terminal: error in the terminal
by the way i am using script called watch: "tsc -w" to convert typescript into javascript.
this is a code example of my postResolver:
import { Post } from './src/entities/Post';
import { MyContext } from 'src/types';
import {Ctx, Query, Resolver} from 'type-graphql';
#Resolver()
export class postResolver {
#Query(()=> [Post])
posts(#Ctx() {em}: MyContext) : Promise<Post[]>{
return em.find(Post, {})
}
}
it says that the module ./src/entities/Post does not exist while it exists and i really don't know why

Fastest way to solve it would be using relative imports (import { Post } from '../entities/Post') instead of absolute like you did.
Another way to satisfy node to keep using absolute paths, is adding the following to your tsconfig file. Note that you will need to add a path for every directory at 'src' level, you want to import.
"compilerOptions": {
"baseUrl": "src",
"paths": {
"src/*": ["src/*"],
"entities/*": ["src/entities/*"],
"resolvers/*": ["src/resolvers/*"]
...
},
...
}
Or you could use a package like this one installed to your devDependecies

How to setup source map on Sentry

I'm using Sentry for error reporting on the React app that I created.
The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:
I'm using Laravel mix for compiling. The webpack.mix.js looks like this:
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.version();
I tried using sourceMaps() like so:
const productionSourceMaps = true;
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.react("resources/js/checkout/DonationRoot.js", "public/js")
.version()
.sourceMaps(productionSourceMaps, "source-map")
But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:
//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600
But when I pretty print it still results in the same gibberish:
I'm expecting to see it point out to the component file I'm working on locally. Is that possible?
Update
I tried installing Sentry's webpack plugin:
const SentryWebpackPlugin = require("#sentry/webpack-plugin");
let config = {
output: {
publicPath: "/",
chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
},
plugins: [
new SentryWebpackPlugin({
// sentry-cli configuration
authToken: "MY_AUTH_TOKEN",
org: "MY_ORG",
project: "MY_PROJECT",
release: "MY_RELEASE",
include: ".",
ignore: ["node_modules", "webpack.config.js"],
}),
],
};
Used the same release when initializing Sentry on my source file:
Sentry.init({
dsn: "MY_DSN",
release: "testing",
});
Put some failing code:
useEffect(() => {
console.bog("MY_RELEASE");
}, []);
Then compiled like usual:
npm run production
I triggered the error on the browser and I got the expected file in there (MobilePayment.js):
But from Sentry, all I get is this:
I would expect to find MobilePayment.js in there but there's none.
When compiling, I got this:
So I assume it uploaded the sources to Sentry.
I even tried the same thing using Sentry-cli:
sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js
And it pretty much did the same thing:
I then triggered the same error. But I still got the same output from Sentry dashboard. Please help.

I've run into this before.
IIRC the trick was finding the correct devtool WebPack option.
I can't remember exactly, but I think I used eval-cheap-module-source-map or eval-source-map.

How to debug Rollup build output with a massive encoding log?

I recently built a library with Rollup that has a few non-usual bits. That includes for instance, loading up a wasm module, workers with importScripts and a few occurences of eval() in the global scope.
Now I used the rollup-starter-app to create a demonstrator and client app for that library. The repo is https://github.com/frantic0/sema-engine-rollup
I managed to get everything working, after hitting a few walls and adding the following rollup plugins
import { wasm } from "#rollup/plugin-wasm";
import workerLoader from "rollup-plugin-web-worker-loader";
import dynamicImportVars from "#rollup/plugin-dynamic-import-vars";
import copy from "rollup-plugin-copy";
However, in the build output, I'm getting this massive log of what seems to be some encoding...
I'm not sure where this log is coming from and it is so massive that it clears out all the information of the build in the terminal...
What is the best way to tackle this issue and how to debug it effectively?

based on the suggestion #lukastaegert on the rollup issues, one solution is to redirect stderr into a file to read the log.
To do that you can add the following to your rollup command
"rollup -cw 2>err.log 1>out.log"
this allows to further inspect the build log but doesn't solve the error
[EDIT]
After a bit of peeking around Rollup's github issues and source, I found the warning categories and how to deactivate warnings.
Basically, we need to add a function onwarn to rollup.config.js. The first code section below shows the function. The second one show where we should add it on the rollup.config.js
const onwarn = (warning) => {
// Silence warning
if (
warning.code === 'CIRCULAR_DEPENDENCY' ||
warning.code === 'EVAL'
) {
return
}
console.warn(`(!) ${warning.message}`)
}
export default {= {
inlineDynamicImports: !dynamicImports,
preserveEntrySignatures: false,
onwarn,
input: `src/main.js`,
output: {

ES6 Dynamic Imports using Webpack and Babel

I've been using Webpack for my ES6 JS project and has been going well until I started to play with dynamic imports.
What I had that worked (router.js):
import { navigo } from "Navigo"; // router
import { clients } from "Controllers/clients.js";
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
clients.init();
}
});
But the more pages/routes I add, the more imports get stacked up in the head of the module. This is a relatively large app and I have a lot of pages/routes to add and therefore I need to load them dynamically to reduce the size of the initial page load.
So, following Webpack's documentation for dynamic imports, I tried the following which loads the controller module only when the relative route is called:
import { navigo } from "Navigo"; // router
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
import("Controllers/clients.js").then((clients) => {
clients.init();
});
}
});
But saving this in my editor resulted in a Babel transpiling error; SyntaxError: 'import' and 'export' may only appear at the top level, and clients.init() is not being called when tested in browser.
After a bit of reading, I discovered I needed a Babel plugin to transpile dynamic import() to require.ensure. So, I installed the plugin using the following command:
npm install babel-plugin-dynamic-import-webpack --save-dev
And declared the plugin in my babel.rc file
{ "plugins": ["dynamic-import-webpack"] }
After installing the plugin, the transpiling error disappeared and checking my transpiled code I found that the dynamic import()s has in fact been changed to require.ensure as expected. But now I get the following browser errors when testing:
Error: Loading chunk 0 failed.
Stack trace:
u#https://<mydomain.com>/js/app.bundle.js:1:871
SyntaxError: expected expression, got '<' 0.app.bundle.js:1
Error: Loading chunk 0 failed.
I didn't understand why it was referencing 0.app.bundle.js with the 0. prefix, so I checked my output/dist folder and I now have a new file in there called 0.app.bundle.js:
0.app.bundle.js 1,962bytes
app.bundle.js 110,656bytes
I imagine this new bundled file is the dynamically imported module, clients.js.
I only added dynamic importing to that one route and have left all the other routes as they were. So, during testing, I can view all routes except that one /clients route that now throws the above errors.
I'm totally lost at this point and hoped somebody could help push me over the finish line. What is this new file 0.app.bundle.js and how am I supposed to be using it/including it in my application?
I hope I've explained myself clearly enough and look forward to any responses.

I managed to fix my own problem in the end, so I will share what I discovered in an answer.
The reason the chunk file wasn't loading was because Webpack was looking in the wrong directory for it. I noticed in the Network tab of my developer console that the the chunk file/module was being called from my root directory / and not in /js directory where it belongs.
As per Webpack's documentation, I added the following to my Webpack config file:
output: {
path: path.resolve(__dirname, 'dist/js'),
publicPath: "/js/", //<---------------- added this
filename: 'app.bundle.js'
},
From what I understand, path is for Webpack's static modules and publicPath is for dynamic modules.
This made the chunk load correctly but I also had further issues to deal with, as client.init() wasn't being called and yielded the following error:
TypeError: e.init is not a function
To fix this, I also had to change:
import("Controllers/clients.js").then((clients) => {
clients.init();
});
To:
import("Controllers/clients.js").then(({clients}) => {
clients.init();
});
Note the curly braces in the arrow function parameter.
I hope this helps somebody else.

For debugging, you need to do
import("Controllers/clients.js").then((clients) => {
console.log(clients);
});
maybe working
import("Controllers/clients.js").then((clients) => {
clients.default.init();
});

Dynamically load chunks in webpack?

We load files dynamically i.e., we don't know which files will be loaded until runtime. At the same, for faster loading, we'd like to put related files in the same chunk.
How can I do that with webpack?
This is what we have and it's failing with a 404 error (1.1.bundle.js not found)
This is what webpack.config looks like:
entry: {
main: //...,
related_files: [ //should create chunk for file1 and file2?
'./file1.js',
'./file2.js'
]
},
This is what the code to dynamically load the files looks like:
var dynamicFileName = //...
require.ensure([], function (require) {
//should dynamically load the chunk containing dynamicFileName?
//fails with 'file1.js' or 'file2.js'
var modImpl = require(dynamicFileName);
//...
});
Update 1: the error message is caused by not configuring output.publicPath. However, I never created 1.1.bundle.js. It seems to be ignoring the entry point.
Update 2: even after fixing output.publicPath, it's unable to load a dynamically generated filename. So it seems that webpack cannot handle this.

By default, webpack tries to bundle all the code in a single file. If you're using code from file1.js/file2.js in main entry point, webpack will bundle contents of all the files in main.js, and second entry point related_files will output only file1/file2 contents.
Webpack handles this situation by using CommonsChunkPlugin, your config must look like this:
entry: {
main: //...,
related_files: ['./file1.js','./file2.js']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('related_files', 'related_files.js')
]
Second part of the question is that webpack parses require statement, and outputs 1.1.bundle.js - the dynamic module, that can be loaded with require in the code. In your case, dynamicFileName = 'related_files', not file1/file2.
Please see http://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code