Failed to resolve module specifier "tributejs" (Console Error) - ruby-on-rails

I want to use TributeJS to mention users in my application but after I have added the package, the import is giving me an error in the console. here is what I have:
# package.json
{
"dependencies": {
"tributejs": "^5.1.3",
"trix": "^1.0.0"
}
}
# mentions_controller
import { Controller } from "#hotwired/stimulus";
import Tribute from "tributejs";
import Trix from "trix";
require("tributejs/tribute.css")
export default class extends Controller { ...
.
.
}
I am getting this in the console [![developer console error][1]][1]

I was following a Rails 6 lecture and I am using Rails 7, I was then adding packages with yarn instead of importmap. After I did that, the error went away.

Related

Antd_dayjs_vite_plugin : TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function

At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)

How to change Expo entry point properly?

I want to change entry point of my expo app. I have tried these simple steps:
First of all, I have created a simple expo project.
$ expo init test
$ cd test
$ rm App.js
$ mkdir src
$ touch src/App.js
I have changed app.json of my expo based app as follows
{
"expo": {
...,
entryPoint: "./src/App.js",
...
}
}
Then i have filled the App.js as folows
import React from "react";
import { Text } from "react-native";
export default () => <Text>Hello World</Text>;
However, the first trial have been failed. It have shown only splash screen.
Then i have edited the App.js as follows:
import React from "react";
import { Text } from "react-native";
import { registerRootComponent } from "expo";
const App = () => <Text>Hello World</Text>;
registerRootComponent(App);
I have seen "Hello World" text in the screen. However, hotreloading have not been working.
Then i have modified main entry in package.json
"main": "./src/App.js",
In this way hot reloading is working in second save action.
I am wondering
How can i solve hot reloading problem (in first save action)?
What is the difference between app.json's entryPoint and package.json's main field?
I suggest you read this article:
https://docs.expo.dev/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
and be sure you restarted your whole dev process

NestJS Neo4j : Cannot find module 'neo4j-driver/types/integer' or its corresponding type declarations

I try to run my nestJS but I've got a problem with my node_module :
node_modules/nest-neo4j/dist/neo4j.service.d.ts:10:32 - error TS2307: Cannot find module 'neo4j-driver/types/integer' or its corresponding type declarations.
10 int(value: number): import("neo4j-driver/types/integer").default;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nest-neo4j/dist/neo4j.service.d.ts:12:47 - error TS2307: Cannot find module 'neo4j-driver/types/session' or its corresponding type declarations.
12 getReadSession(database?: string): import("neo4j-driver/types/session").default;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nest-neo4j/dist/neo4j.service.d.ts:13:48 - error TS2307: Cannot find module 'neo4j-driver/types/session' or its corresponding type declarations.
13 getWriteSession(database?: string): import("neo4j-driver/types/session").default;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 3 error(s).
This is my app.module.ts
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { Neo4jModule } from 'nest-neo4j'
#Module({
imports: [
Neo4jModule.forRoot({
scheme: 'neo4j',
host: 'localhost',
port: 7687,
username: 'neo4j',
password: 'ingrid-ticket-capital-spirit-reform-6035'
})
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Is any one got the same error ?
Thanks for helping me !
You should either downgrade the neo4j-driver to 4.1.0 (that's what nest-neo4j 0.1.4 has been tested with) or...
remove neo4j-driver entirely from your direct dependencies, since nest-neo4j already depends on it. That way, nest-neo4j is always responsible for the driver version it works with, avoiding conflicts like this.

Angular 4 templateUrl file not found

I am using Angular 4.1.3 with Rails 5.1
I am trying to implement the app component and if I use template and write my html, everything works, but I want to use templateUrl.
Here is my component.
import { Component } from '#angular/core';
#Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {}
And this is my file structure
├── app
| ├── app.component.html
| └── app.component.ts
| └── app.module.ts
I understand that in the #Component you can add moduleId: module.id but I thought this is no longer needed in angular 4.1.3.
If I do add it, it tells me:
moduleId should be a string in "AppComponent"
I also thought that if you do not include the moduleId angular just grabs from root directory, but if I do an absolute path, it should work right?
If you guys could help, that would be awesome.
I am assuming you're using the new webpacker-gem in your rails project!
There is a description of how to use templateUrl with it here in the documentation: Use HTML templates with Typescript and Angular
If you would like to keep templateUrl you could use angular2-template-loader webpack plugin:
# add plugins to project
yarn add angular2-template-loader raw-loader
and configure it:
# edit config/webpack/loaders/angular.js with
module.exports = {
test: /.ts$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
}
# create a new loader for htmls config/webpack/loaders/html.js
module.exports = {
test: /\.(html)$/,
loader: 'raw-loader',
exclude: /\.async\.(html)$/
}

dynamic import in webpack 2 not working

I want to use dynamic import in webpack 2. I use webpack 2.4.1
index.js
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import '../styles/custom.scss'
var btn = document.getElementsById('button');
btn.addEventListener("click", () => {
import('./assets/chunk.css').then(()=>{
console.log("Success")
})
});
render(
<Root />,
document.getElementById('root')
)
But when I run "npm start" it didn't work and notify an error at line 9 of index.js
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (9:4)
Thanks for any help!
As wuxiandiejia mentioned, the answer is
install babel-plugin-syntax-dynamic-import
make sure 'syntax-dynamic-import' appears in your babel options.plugins
Example babel.rc
{
"plugins": [
"syntax-dynamic-import",
}

Resources