I am trying to add PrismJS as syntax highliter in my Aurelia app (typescript based) and I am half way there as below
1- Install prismjs
yarn add prismjs
2- add css & code part
<template>
<require from="prismjs/themes/prism.css"></require>
<pre><code class="language-sql">${highlightedSQL}</code></pre>
</template>
3- import the prismjs in the component and call highlite.
import "prismjs";
import prismsql from "prismjs/components/prism-sql";
let Prism; // very weird, I have to declare a global variable, other wise it won't work(typescript error)
#inject(HttpClient)
export class Detail {
highlight() {
this.highlightedSQL = Prism.highlight(data.sql, Prism.languages.sql, 'sql');
}
}
and I am getting this error
Unhandled rejection TypeError: Cannot read property 'highlight' of undefined
what could be the right way to make it work?
ill post my comment as an answer just to have the question closed.
instead of import "prismjs"; and let Prism; you should have import Prism from 'prismjs';
Related
I have written a validation class and want to include it in my VueJS 3 project. Unfortunately I get the following error: SyntaxError: ambiguous indirect export: default
This is my code:
// ..classes/formValidationClass.js
export class FormValidator {
...
}
// some vue file with a form
import FormValidation from "..classes/formValidationClass"
export default {...}
Question:
What does this error mean and what do I have to do to correct the error?
Use brackets {} around your import Name
// ..classes/formValidatorClass.js // Comment: => suggestion change your file name to similar your class name
export class FormValidator {
...
}
// some vue file with a form
// import FormValidation from "..classes/formValidationClass"
import { FormValidator as FormValidation} from "../classes/formValidatorClass"; // Comment: => use brackets around your import name. if you want use FormValidation you can use also a alias (`originalName as newName`)
export default {...}
I found that none of the tsconfig, package.json fixes would never work for me. Hopefully the following helps someone in the future.
I was consistently getting this error when working with Vite projects and not Webpack projects. I would not be able to import anything, named or otherwise.
On one Svelte code base I ran the Svelte CLI sync command and it mentioned a type import was breaking the importsNotUsedAsValues or preserveValueImports and that I should explicitly mark the import as a type.
The import statement in question:
import { TUser } from '../models/Users/Users';
TUser exported as:
export type TUser = { ... }
Errors
Would cause the following errors:
Error: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'. (ts)
Error: 'TUser' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled. (ts)
Solution
Doing the following fixed the issue for me.
import type { TUser } from '../models/Users/Users';
My story: WebStorm generated .js files right next to .ts files (because I once enabled the Recompile on changes option), so my app tried to import from .js files instead of .ts one. That was the reason for the import problems.
This is the compiled code on the local dev server:
For the sake of helping anyone bumping into this error and arriving at this page, the word default in export default function myFunction() can cause this error. Or in other words: remove the word default may help.
In my case I had the curly braces where I shouldn't have. I had a JSON file and import { users } from ... where instead I should have no curly braces like so:
import users from './users.json';
console.log("users", users);
I am trying to use jquery.infinitedrag to create a component in react. My code is here:
//Grid.js
import React from 'react'
import './jquery/jquery.min.js'
import './jquery/jquery-ui.min.js'
import './jquery/jquery-ui.min.css'
import './jquery/jquery.infinitedrag.js'
export default class Grid extends React.Component{
componentDidMount() {
$.infinitedrag("wall")
}
render() {
return(
<div id="wall"/>
)
}
}
This is supposed to work by making a div (identified by id) when react renders and then filling in an infinite grid later once the component mounts. The problem is, for some reason, jquery.infinitedrag is getting confused. Here is the error:
Failed to compile.
./src/jquery/jquery.infinitedrag.js
Line 108:4: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 277:4: 'jQuery' is not defined no-undef
My file structure looks like this:
src
-jquery
-jquery.min.js
-jquery-ui.min.js
-jquery-ui.min.css
-jquery.infinitedrag.min.js
-Grid.js
-misc other components and stuff
I am fairly new to javascript, so this is probably something dumb.
npm install jquery OR npm update to remove the second error.
In relation to a previous question - How can Enzyme check for component visibility? I tried using jest-dom to specifically use their toBeVisible function.
Despite following the documentation I cannot get it to work in my test and get the error
"TypeError: expect(...).not.toBeVisible is not a function"
Fully reproduced in CodeSandbox here
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import MyCheckbox from "./MyCheckbox";
import MyCheckboxesInUse from "./MyCheckboxesInUse";
Enzyme.configure({ adapter: new Adapter() });
test("Check that one checkbox is hidden and the other is visible", () => {
const wrapper = mount(<MyCheckboxesInUse />);
const checkboxes = wrapper.find(MyCheckbox);
expect(checkboxes).toHaveLength(2);
//HOW DO I CHECK THAT ONE IS VISIBLE AND THE OTHER IS NOT ?
expect(checkboxes.get(0)).not.toBeVisible();
expect(checkboxes.get(1)).toBeVisible();
});
I was facing a similar issue. In my case, it was resolved by the following steps:-
Adding the #testing-library/jest-dom package to the devDependencies instead of dependencies in the package.json file.
Next add one of the following:
Adding import '#testing-library/jest-dom'; to the setupTests.js
Or adding in jest configuration (package.json): "setupFilesAfterEnv": [ "#testing-library/jest-dom/extend-expect" ]
The expect().not.toBeVisible method comes from the #testing-library/jest-dom library, since there is no setup or reference to that library the default jest expect is used (thus the function is not found). A quick fix would be to add this import to the top of your test file (assuming you have already imported the library into your project via npm or yarn):
import '#testing-library/jest-dom';
For scalability you may want to add a setupTest.js file (reference here: https://create-react-app.dev/docs/running-tests/)
importing '#testing-library/jest-dom' doesn't help me but
importing #testing-library/jest-dom/extend-expect' help me resolve the error.
import '#testing-library/jest-dom/extend-expect'
Following Programming with Mosh's React tutorial and stuck on this very initial portion after installing everything, bootstrap, popper, etc. Deleted package json lock and double checked spelling. For whatever reason no matter what, it is failing to compile and I get the same error every time:
"Module not found: Can't resolve './components/counter.jsx'
Picture of my terminal and vscode
Picture of my errors in dev tools
I really am stuck on this portion and could use help figuring out what the issue is.
import React, { Component } from "react";
class Counter extends Component {
state = {};
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;
In his tutorial he has changed the JSX file name from counter.jsx to counterComponent.jsx. Import as below:
import Counter from './components/counterComponent'
When importing components and other javascript modules, you shouldn't provide the file extension. Try and remove the .jsx from the import so it says:
import Counter from "./components/counter";
im working on a project and i have a problem. Im using Angular2, typescript, webpack 2.2 and im trying to use this table component:
pyrite table
The problem starts when i try to import this component in my component. I installed it with npm and thats work. But when i try to import it i use: import * as Table from "pyrite-table";
And then i try to use Table.load but i get an error: index.js:38 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
And that line is this:
export default module.exports = window.pyrite.Table = Table;
So my question is, how can i import this component in my project that is using typescript.
I saw in the project repo's readme the following loc:
import Table from 'pyrite-table';
Have you tried this one? Or:
import { Table } from 'pyrite-table';