Newbie here...need help. I tried using the sample code for ag-grid on a ReactJS component on NextJS. I am getting a loading css error (please see further below).
(Before this, I was able to make the code run using 'create-react-app' "https://www.ag-grid.com/react-getting-started/")
Here's the error message:
appropriate loader needed
I have searched and tried out related (searched-out) answers like adding this on webpack.config.js:
webpack config
and also tried adding this on package.json:
package json
I may be missing out on how to correctly load css on the Next JS setup.
Here's the code..taken mostly from the sample code
In Next.js you configure webpack inside a next.config.js file. There should be no webpack.config.js (at least to my knowledge).
There's a plugin called next-css which you install with: npm install --save #zeit/next-css.
Then, in your next.config.js file, write:
const withCSS = require('#zeit/next-css')
module.exports = withCSS()
The ag-grid example worked for me after doing that.
Related
I'm trying to migrate an NX monorepo from Angular 12 to Angular 13. As part of this migration, Jest is also updated to version 27.2.3. the project is also using a custom editor build of CKEditor5.
When CKEditor was first integrated (back when the project was using Angular 9 I believe) we had a lot of issues getting it to work with Jest and whenever the unit tests were ran, any component that included CKEditor was giving the error message:
SyntaxError: Cannot use import statement outside a module
We managed to fix the issue by adding the following configuration to the global jest.preset.js file in the root of the project:
transform: {
'node_modules[\\\\/]#ckeditor.+.(js)$': 'babel-jest',
'^.+.(ts|html)$': 'ts-jest',
},
transformIgnorePatterns: ['/node_modules/(?!#ckeditor|lodash).+.(js|jsx|ts|tsx|svg)$'],
However, now that we are migrating from Angular 12 to 13, the above error message has returned and it seems the above config is now ignored.
As part of the migration, NX has automatically created new project.json files in all of the libs in the monorepo. This file contains some Jest configuration so I have tried moving the config above from the jest.preset.js file to the individual project.json files in any lib using CKEditor, but this has not fixed the issue. The new project.json files also read some Jest config from a project-specific jest.config.js so I have tried adding the config there as well, and that has also not fixed the issue.
I have also tried updating the testEnviroment config in package.json from "node" to "jsdom" and this has not helped either. I also tried moving the whole transform/transformIgnorePatterns config to Jest section of package.json and that also did not help.
I assume my previously working config just need to move to a different file, it is just not clear which file it needs to move to.
My environment is as follows:
Windows 10
Node 16.13.2
NPM 8.1.2
NX 13.4.5
Jest 27.2.3
Angular 13.1.2
This was fixed by adding the following config to the Jest preset file, and removing same config from individual apps/libs configs:
transform: {
'node_modules[\\\\/]#ckeditor.+\\.(js)$': 'babel-jest',
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
transformIgnorePatterns: ['node_modules/(?!.*.mjs$|#ckeditor)'],
Problem was related to having multiple strinfs inside transformIgnorePatterns - it supports only one item despite being an array
So I'm trying to build a Vue component using the features found in the Javascript plugin Cropper JS. My app is built using Laravel 5.6. I first pulled in Cropper JS using NPM:
npm install cropperjs
Next, in my resources/assets/js/app.js file, I added the following lines:
import Cropper from 'cropperjs'
Vue.use(Cropper);
Note: You can assume that Vue has already been properly setup in this case.
This compiles fine when I run 'npm run watch', but when I try to visit my web app (which is just displaying Hello World at this point), I see an error in the console which states:
Uncaught TypeError: Cannot call a class as a function
Now, in the past I have imported & used libraries that were pulled in via npm with the exact same commands. However, in those cases, the folder structure was a bit different, perhaps it was optimized for Vue?
Under my node_modules/cropperjs directory, the folder structure is as follows:
/dist
/src
/types
CHANGELOG.md
LICENSE
package.json
README.md
I hope this information is sufficient in troubleshooting the error.
Thank you.
Cropperjs is not a plugin of Vue, you can use vue-cropper or other image cropper,
if you want use cropperjs,you
let image = document.querySelector('XX')
var cropper = new Cropper(image,{options})
I am creating a React app using Next.js and am trying to use components provided by reactstrap.
The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.css as the reactstrap guide says to do.
The error I am seeing is Error in bootstrap/dist/css/bootstrap.min.css
Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.
Does anyone know what I have to do to make this work correctly? I am a new web developer so sorry if I am missing anything obvious.
Thanks!
EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin:
npm install --save #zeit/next-css
Then create the next.config.js file in your project root and add the following to it:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({/* my next config */})
You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:
// ./index.css
div {
color: tomato;
}
Then create the pages folder with an index.js file. Then you can do stuff like this in your components:
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.
Next.js < version 7
Next.js doesn't come with CSS imports by default. You'll have to use a webpack loader. You can read about how this works here: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.
Next.js also has plugins for CSS, SASS and SCSS. Here is the plugin for CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. The documentation for that plugin makes it fairly simple:
You create the _document file in pages/.
You create the next.config.js file in the root.
Using the code snippets from the documentation should set you up to import CSS files.
You'll need at least version 5.0. You can make sure you have the latest Next.js installed: npm i next#latest.
If you are still getting the error:
Unexpected token (6:3) You may need an appropriate loader to handle this file type.
try this in your next.config.js:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
Now you should be able to import styleshets from node_modules like this:
import 'bootstrap-css-only/css/bootstrap.min.css';
Note: Using Next v 8+
Background:
I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution.
It was provided by one of the core team members
Next.js 9.3 and above
As of Next.js 9.3 you can now directly import SCSS files as global stylesheets. Read more about next.js built-in SASS support here.
npm install sass reactstrap bootstrap
Index.scss
#import '~node_modules/bootstrap/scss/bootstrap';
I am working on to add jsplumb community js library version with the angular 5 application (Angular CLI: 1.6.1).
With the first build without any configuration to tsconfig.json I get the following error.
ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.
With "allowJs":true in the tsconfig.json get the following error
ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
As per tsconfig FAQ
Why am I getting the error TS5055: Cannot write file 'xxx.js' because it would overwrite input file.
with an outDir ("outDir": "./dist/out-tsc") this issue should be resolved. This is already set in my tsconfig.
If we add noEmit to true it simply builds the application, not including any js we get a blank white screen.
Let me know if anyone has tried to include external js with new angular cli and face the same kind of error and what is the solution for the same.
Without any additional option added to tsconfig.json if I try to modify any ts file the application will compile with success and I am able to work. But this does not help while running ng build, to create a deployable binary.
Update Workaround: until the fix in CLI is available. For development (ng serve) remove allowJs from tsconfig.json, when ever you get an error with adding allowJs simply modify a ts file to recompile the applicaiton, this time will compile with success. For production or distribution add back the allowJs to tsconfig.json run the application run with ng build --prod --watch=auto you should see the error about overriding the JS file in node_module, simple modify a ts file it should rebuild as --watch=auto is there in command but this time with sucess.
If you're trying to import a library to Angular 2+, you should do it inside angular-cli.json.
There you have a scripts key where you should configure the desired imports. They are generally like:
{
...
"scripts": [
"../node_modules/MODULE/file.js"
],
...
}
Also you can import the library (not recommended) inside your main index.html, using <script src="/path_relative_to_root/file.js">
https://github.com/angular/angular-cli/wiki/angular-cli
https://github.com/angular/angular-cli/wiki/stories-global-scripts
Angular Cli Webpack, How to add or bundle external js files?
have you tried upgrading it to angular 6? maybe they fixed this in the new version.
ng update #angular/cli
I'm using lernajs to manage a monorepo. There, I have two packages:
app (via create-react-app)
lib (a react component transpiled with babel-cli)
When adding require('./package.json') to app, webpack compiles as expected. The json file is loaded as expected. However, when I put require('./package.json') into the lib package, webpack fails with Module not found: 'json'. The json loader is working fine for dependencies not controlled by lernajs.
The issue persists if lib is requiring another library (e.g. cheerio) that imports a json file. Same as above, if cheerio is included in app instead, it works fine.
If you don't know lernajs, it's a tool to manage monorepos and it's basically symlinking the lib package into ./app/node_modules/.
The issue was resolved by adding json-loader to the project's root directory package.json!