I'm having issues deploying my laravel project onto my Digital Ocean server using Laravel Forge. npm run prod and npm run watch work perfect on localhost but when I deploy the project live I get errors compiling the JS.
/node_modues/quill/ is definitely installed on the server too.
Here is the error:
ERROR in ./resources/js/user.js 3:15-31
Module not found: Error: Can't resolve 'Quill' in '/home/forge/sieved.co/resources/js'
My user.js file:
require('./quill.js');
window.Quill = require('Quill');
var quill = new Quill('#editor', {
theme: 'snow'
});
My quill.js file also in the resources folder:
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header
});
export default Quill;
I don't get these errors locally so I'm confused what could be causing it to happen on the server. Thanks.
You are missing a JS dependency, the package Quill.
You can either install it using npm by running npm install quill or pulling it from a CDN. See Quills homepage for details.
Then you can include it by using window.Quill = require('quill'); Please see the lowercase writing quill instead of your Quill inside the require.
Related
I'm trying to link two applications together. I have two projects. Both projects using Vue(2). One being the main project and the other a componet lib. I succesfully linked the two projects together with npm link. However my main project is giving an error.
ERROR Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json.
My main application is using vite and the component application is using webpack.
in my main.js I'm importing it like any other lib
import thqComponentLibrary from "#hitfoyb/my-component-library/dist/MycomponentLibrary.umd";
import "#hitfoyb/my-component-library/dist/MycomponentLibrary.css";
Vue.use(MycomponentLibrary);
my main application vite.config.js
optimizeDeps: {
include: ['#hitfoyb/my-component-library']
},
Any help on why the application is giving the error and how do I resolve it?
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'm really new to webpack, babel, React and all this stuff. So I'm probably missing something really obvious. To get a jumpstart on my React project I'm using react-redux-bootstrap-webpack-starter. It all works well, but now my lack of understanding really shows with my latest problem.
The problem:
I'm trying to import jwtDecode from 'jwt-decode' and it throws the following error:
./src/app/redux/modules/login.js
Module not found: Error: Can't resolve 'jwt-decode/build/jwt-decode' in
'/usr/src/app/src/app/redux/modules'
# ./src/app/redux/modules/login.js 12:17-55
# ./src/app/redux/modules/reducers.js
# ./src/app/redux/store/configureStore.dev.js
# ./src/app/redux/store/configureStore.js
# ./src/app/Root.js
# ./src/app/index.js
# multi react-hot-loader/patch webpack-hot-middleware/client
./src/app/index.js
What have I done:
I've Docker-ized the frontend app, so I just added the jwt-decode package to package.json and rebuilt the image. The Docker build executes npm install.
I've tried to import jwtDecode from 'jwt-decode' then I tried import jwtDecode from 'jwt-decode/build/jwt-decode
I made sure I can reference other npm packages similarly installed. On a new docker instance I installed lodash, imported it in the same file and there was no problem.
My hypotheses:
There's something about the particular jwt-decode package that makes it not work well with babel.
To make it work I need either to modify the jwt-decode package or to configure webpack and the babel-loader differently. How?
Babel doesnt transpile anything for JWT-decode and I dont think webpack has any extra configuration for it either.
It looks like the places that you are trying to use jwt-decode, like: './src/app/redux/modules/login.js ', in your app cannot find the directory and so are failing. Make sure that whatever module loader you're using is referencing the correct path to the jwt-decode directory.
Try loading it like this ( if you are using ES2015 via Babel transpilation):
import jwt_decode from "jwt_decode";
I'm starting from an open source project here:
https://github.com/vega/voyager
And got it working and I want to add a modal.
So I ran:
yarn add react-modal
yarn add #types/react-modal
Then I added added:
import {ReactModal} from 'react-modal';
I'm getting this on the build
ERROR in ./src/components/header/chrono-history.tsx
(5,9): error TS2305: Module '"/Users/brennanwallace/psa/voyager/node_modules/#types/react-modal/index"' has no exported member 'ReactModal'.
And web-storm agrees that there is an issue as it gives the same error in text editing viewport.
What can I do?
I'm new to type script but the files seem in order:
There is a react-modal folder in #types in node_modules with index.d.ts like several other moduals (it is missing a types-metadata.json file which the other packages seem to have).
There is also a react-modal package.
The tsconfig.json files also seems in order: https://github.com/vega/voyager/blob/vy2/tsconfig.json
You have to import it as:
import * as ReactModal from 'react-modal';
I looked at this and that link. I bower installed file-saver and Blob. I am having a similar problem with both components so I will just talk about one.
When I do import FileSaver from 'file-saver';
I get the following error.
Error while processing route: some.route Could not find module `file-saver` imported from `client/pods/some/folder/controller` Error: Could not find module `file-saver` imported from `client/pods/some/folder/controller`
I know the I have file-save because it is in my bower_components folder.
And right about the line that is giving me trouble is the following line.
import Ember from 'ember';
that package is about the file-saver package in my bower_components folder. And the app seems to find that package.
Bower assets have to be imported in Brocfile.js, see http://www.ember-cli.com/#managing-dependencies
In my project, filesaver is located at bower_components/FileSaver.js/FileSaver.js, so I have the following line in my Brocfile.js:
app.import('bower_components/FileSaver.js/FileSaver.js');
This makes it available as a global on window.saveAs, no need to use an import statement in the file you use it in.