I have a javascript file stored in client/template/missionPage.js from where I would like to import a javascript file stored in client/lib/scripts/textRotate.js I have tried all kind of import paths but none of them worked. e.g import txt from './lib/scripts/textRotate.js';
All o them give the same error: Uncaught error cannot find module './lib/scripts/textRotate.js'. Can anybody help?
Related
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've never seen this before.
I try to export a function and import it in another file. When I attempt an import, my autoimport tool finds it and imports it. Autocompletion is even there when I reference to it. There are no errors showing in code, but I get a console error when compiling that says the function is not exported...
Exported from queries...
The import statement
Note that I've also tried without success
import { getAllRoles } from '../graphql/queries'
Now where I actually use the imported function...
As you can see, no syntax / import error highlighted, and when I save and compile...
On top of all that, note that the queries file containing the exported function is auto-generated by Amplify codegen from an AppSync API, so I can't see why they'd mess it up.
I'm very confused. Any ideas?
I had two files with the same name in the same folder, one js and one ts. It tried to import the .js file for some reason.
While trying to import the collection-preview.components.jsx file in the shop-page.jsx, there occurs an error saying:
"Module not found: Can't resolve '../../components/collection-preview/collection-preview'"
URL of the code and the error is shared in the link:
I would like to know what am I missing here and why the files are not getting compiled.
Your file called collection-preview.component but you import collection-preview, just change the name to collection-preview.component, it should work
You could also drop js and jsx ending for files when importing :)
I was trying to import data from csv file. I tried the following statement:
import * as c from './t.csv';
I got the error:
TypeScript error: src/dataset.ts(18,20): Error TS2307: Cannot find module './training.csv'.
Then I converted the file into a json file and tried the following code:
import * as c from './t.json';
It worked.
I wonder why the csv file was not loaded where as json file loaded without any issues.
Probably because Any JSON text is a valid JavaScript expression and CSV is absolutely not.
I created a b64Images.js file in my images folder. Inside it I have the following:
export const placeholder = "data:image/png;base64,longb64string"
I'm trying to import it into one of my react components using:
import { placeholder} from '../../../images/b64Images.js'
It's able to find the file, but i'm getting the error:
Module parse failed: fullpath/b64Images.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
It's just a js file and my webpack is already configured to handle this. I don't have any issues importing my reducer functions.
The answer is to forget converting the images yourself, and install this package.
https://github.com/antelle/base64-loader
import { placeholder} from '../../../images/b64Images.js'
becomes
import placeholder from 'base64!../../../images/image.png'
sadness becomes happiness