I'm trying to use swiper in svelte. so, I follow the documentation here
https://swiperjs.com/svelte
When I add import 'swiper/swiper.scss'; to my component. I get an error says:
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
Anyone can help me out, please?
Related
I am trying to get my hands on microfrontends and in the process ,i have been following this tutorial .
However in the bootstrap process ,where i try to link all the apps to the container ,i keep getting import error .
Basically we have three folders container,cart and products .
Inside container ,src we have bootstrap.js
where I import using
import 'products/ProductIndex'; import 'cart/CartIndex';
Error that I am getting
Module not found: Error: Can't resolve 'products/ProductIndex' and Module not found: Error: Can't resolve 'cart/CartIndex'
.
Here is the link to the repo
https://github.com/satyajeetkrjha/microfrontend
I tried playing with imports by changing things inspired from few posts by doing
import './products/ProductIndex';
import './cart/CartIndex';
but this doesn't seem to be working .
We have a component, which is in a Git Submodule, because a NExt.js and a React is using it also. In NextJs everything ok, but fro React, it does not accept how CSS is loaded:
import styles from "../../styles/buyTicket.module.css";
[tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx(7,20)
TS2307: Cannot find module '../../styles/buyTicket.module.css' or its corresponding type declarations.
# ./app/containers/Tiket/Test.tsx 2:0-148 36:88-133
# ./app/containers/Test.jsx 3:0-32 6:44-48
# ./app/shortcode35.js 8:0-46 14:54-63
What is wrong here? css is at the right place
In react you simply import it as
import "../../styles/buyTicket.module.css";
Then in your element className is defined like vanilla html
<div className="class"></div>
I am using NextJS and until now I had no problems using it.
After I installed the "framer-motion" module for animating some of my components, whenever I try to visit the page which contains the import statement:
import { motion } from "framer-motion"
NextJS instead of rendering the page throws an error:
And presents me with the code snippet:
Unexpected token 'export'
Source
external%20%22framer-motion%22 (1:0) # eval
> 1 | module.exports = require("framer-motion");
If I go into the terminal this is the error I get:
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^
SyntaxError: Unexpected token 'export'
If I take out the import statement, it's rendering the page as intended
Another thing that I accidentally noticed is, if I don't include the import statement before rendering the page for the first time, then after it renders I include it, NextJS will hot-reload the page and when that happens the import statement isn't causing any issues and I could animate my components.
The animation works too. So I presume I have to configure something with Webpack or Babel?
I have never used either Babel or Webpack so I don't know
Any help would be appreciated! Thank you in advance!
Well, this works for me:
import { motion } from 'framer-motion/dist/framer-motion'
I don't understand why, if anyone could fill me in that would be great!
I have a project where I use both react and node (express). When I link to react using src="https://unpkg.com/react#16/umd/react.development.js" etc.. I have no problem using react with JSX in the project, but when I try to import like this:
import React from "react";
I get the error: Uncaught ReferenceError: require is not defined
This kind of "handicaps" me since I want to use modules like axios etc..
I am not using any module bundler
Thanks for any help!
Don't know if I fully understand the question but you seem to be using React.js from a cdn link. With no module bundler. So why are you importing it also? You've already "imported" React.js from your cdn link. =) No need to import it again. The import statement is when you use modules and import them like that with the ES6 syntax. If you want to do that use create-react-app instead.
I had a similar issue that I eventually solved with Browserify. Here's a link to my answer:
https://stackoverflow.com/a/63356350/5132452
I am currently learning React. I am running into an issue though. Whenever I try to open the index.html that it creates, the JS portion of the file doesn't load. Under console I am receiving an error with the first line:
import React, { Component } from 'react';
The error it produces is "Uncaught SyntaxError: Unexpected identifier"
I am fairly new with React so if there is anymore information needed, please let me know.
Thank you
Import syntax isn’t supported. You should be compiling the JSX before referencing it in an HTML file. As a commented suggested, you should start with create-react-app.