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 .
Related
I am trying to ssr my react app and it's been months trying, but all I get is this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\ReactApp\client\src\App'
imported from F:\ReactApp\server\express.js
at first I tried to require it as so
const App = require('../client/src/App')
but I got this error :
Cannot find module '../client/src/App'
so i used module type to use import instead of require as so:
import App from '../client/src/App'
I checked the similar questions but none have worked!
Directory Structure:
Any Ideas?
I have a minimal Sinatra app for testing out the Britecharts data visualization library (installed as a Node module) locally. I'm having trouble accessing the library files in my Sinatra views.
My public/js/chart.js has the following import:
import bar from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
The path to the file is valid (I can access it if I paste the path into the browser address bar). However in the dev console I get an error saying:
Uncaught SyntaxError: import not found: default
I then put brackets around the variable, as explained in this guide:
import { bar } from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
But then I get this error instead:
Uncaught SyntaxError: import not found: bar
Thanks for the help.
[EDIT 04.01.2022]: I've created a GitHub repo for the app:
https://github.com/fullstackplus/britecharts-demo
Unpack the Britecharts library files plus dependencies
Put them in a folder local to your app
Import them in your HTML as below:
<div class="bar-container"></div>
<script src="/js/britecharts/node_modules/britecharts/dist/umd/bar.min.js"></script>
<script src="/js/britecharts/node_modules/d3/dist/d3.min.js"></script>
<script src="/js/chart.js"></script>
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?
I have two javascript libraries that I need to integrate into my React app. First I tried this:
import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"
That produced error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I went to http://teckanjs.org/techan.min.js, copied the code, ran it through a beautifier, and saved it to techan.js, located in the same folder as CandlestickChart.jsx. I changed import to
import techan from "./techan.js"
Then I got similar error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I did the same thing as with the other one and changed the import to:
import d3 from "./d3.v4.js"
Then I got error:
./src/components/CandlestickChart/d3.v4.js Module not found: Can't
resolve './requirejs' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I found requirejs online and did the same thing as the others and added an import to d3.v4.js like this:
import requirejs from "./requirejs";
But still getting the same error. What's the trick to this?
Install it as a local package. Run the following:
npm install d3
Then you'll be able to import it in your JavaScript:
import * as d3 from "d3";
Note the "d3", not the "./d3" - the lack of the ./ indicates that you want to install from a module package, not from a file in the same directory.
I've added new module in my React-Native project.
When I use this module, import works nicely, but ESLint show below error :
2:26 error Unable to resolve path to module 'react-native-quick-actions' import/no-unresolved;
I don't understand why I am getting this error ... import works and my module is also present in my node_modules folder.
My import : import QuickActions from 'react-native-quick-actions';
Can anyone help me ?