I'm facing an issue when I build my nuxt app.
When I run 'npm run build', it says:
WARNING in The comment file "LICENSES" conflicts with an existing asset, this may lead to code corruption, please use a different name.
Here's my package.json file:
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"babel-runtime": "^6.26.0",
"marked": "^0.8.2",
"node-sass": "^4.13.1",
"nuxt": "^2.0.0",
"sass-loader": "^8.0.2",
"vue-fragment": "^1.5.1",
"vue-pdf": "^4.0.7",
"vue-slick-carousel": "^1.0.2",
"vue-youtube": "^1.4.0",
"vuelidate": "^0.7.5"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^1.0.1",
"#nuxtjs/eslint-module": "^1.0.0",
"#nuxtjs/vuetify": "^1.10.2",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"license-webpack-plugin": "^2.1.4",
"prettier": "^1.16.4"
}
}
Here's the console output:
How can I know which packages conflict with license files?
For me the culprit was the terser webpack plugin. Disabling the terser.extractComments option in build config under nuxt.config.js got rid of the warnings.
nuxt.config.js
export default {
// ... other nuxt config,
build: {
// ... other build config,
terser: {
extractComments: false // default was LICENSES
}
}
}
Related
I am failing to install iOS dependencies using pod install annd after pressing enter button to run pod install.
Node Version: v16.16.0
NPM Version: 8.11.0
Working Process which I followed:
First way to install pod: Firstly install npm then install pod
Second way to install pod: after deleting node_modules then run pod install
Failed to install to follow the both of rules as mentioned before and to check the error, please check the attached file.
The dependencies are install in our projects as given below as package.json file.
{
"name": "shohan",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.16.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cli-platform-ios": "^8.0.6",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "^6.1.2",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.2",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.26.1",
"moment": "^2.29.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-hook-form": "^7.28.1",
"react-native": "0.67.3",
"react-native-animatable": "^1.3.3",
"react-native-audio-record": "^0.2.2",
"react-native-bar-chart": "^0.1.0",
"react-native-countdown-component": "^2.7.1",
"react-native-date-picker": "^4.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elevation": "^1.0.0",
"react-native-emoji-selector": "^0.2.0",
"react-native-fs": "^2.20.0",
"react-native-image-picker": "^4.8.4",
"react-native-infinite-scrolling": "^2.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-pager-view": "^5.4.15",
"react-native-paper": "^4.12.1",
"react-native-picker-select": "^8.0.4",
"react-native-pure-chart": "^0.0.24",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "^0.11.2",
"react-native-step-indicator": "^1.0.3",
"react-native-super-grid": "^4.4.0",
"react-native-svg": "^12.4.0",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-tab-view": "^3.1.1",
"react-native-text-gradient": "^0.1.7",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/runtime": "^7.17.2",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.11.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Here is the Podfile's code is given below,
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'shohan' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'shohanTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
The occurred error is given in the attached file please check it and help me.
I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it between applications. I am able to create the library, publish to a private git registry, and consume it in other applications. The issue is that I have had to change all of my imports to relative imports which is rather annoying as I am planning on porting over a large amount of components, hocs and utils.
The entry point of the package is the src dir. Say I have a component in src/components/Text.js and a hoc in src/hoc/auth.js. If I want to import withAuthentication from src/hoc/auth.js into my Text component, I have to import it like import { withAuthentication } from "../hoc/auth" but I'd like to be able to import with the same paths I have in my existing application so it's easy to port over components, like import { withAuthentication } from "hoc/auth"
I have tried a lot of config options, jsconfig.json the same as my create-react-app application, manually building my library with rollup rather then using create-react-library so I'd have more config options but to no avail.
Below are the relevant bits from my package.json as well as my jsconfig.json, any help would be greatly appreciated, I am sure I am not the only person who's had this issue.
Here's the package.json
{
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0",
"react-html-parser": "^2.0.2",
"lodash": "^4.17.19",
"#material-ui/core": "^4.11.0",
"react-redux": "^7.1.1",
"redux": "^4.0.1",
"redux-localstorage": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"react-router-dom": "^5.1.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"react-svg": "^12.0.0",
"reselect": "^4.0.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4"
},
"dependencies": {
"node-sass": "^7.0.0"
}
}
and here's the jsconfig:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
The example from the following link maybe you should navigate to your src file from the BaseUrl, or if you "src" is in the same directory as your config it should be only "."
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
Example from link above:
{
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
}
}
}
You need to do 3 things
tsconfig.json this enables typescript autocomplete
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"],
"src": ["./src"]
}
}
}
babel.config.js this plugin resolves relative modules
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
src: './src'
}
}
]
]
}
package.json // install babel-plugin-module-resolver
{
//...
"devDependencies": {
//...
"babel-plugin-module-resolver": "^3.2.0",
// ...
}
}
I'm using react-headroom for this project and needed to edit its code so the <header> wouldn't adjust height for pages. Therefore, I forked the original repo and made the change on my version so I could install it in my project using yarn add <my-git-repo-url> and then normally import it as any other library:
// src/components/layout.js
import { useState } from "react"
import { Box, Flex } from "#chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here
(...)
However, I'm getting this error telling me that module was not found:
I'm not sure if there's any mistake with this process (I think not) but was unable to fix this. I ran yarn install in both ./ and ./node_modules/react-headroom with no changes at all for this result.
As #novonimo asked, here it is the module's package.json:
{
"name": "react-headroom",
"description": "Hide your header until you need it. React.js port of headroom.js",
"version": "3.2.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"bugs": {
"url": "https://github.com/KyleAMathews/react-headroom/issues"
},
"dependencies": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-undefined-to-void": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"chai": "^3.5.0",
"eslint": "^3.8.0",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-airbnb-base": "^9.0.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"mocha": "^3.1.2",
"mocha-unfunk-reporter": "^0.4.0",
"pre-commit": "^1.0.5",
"prettier": "2.1.2"
},
"directories": {
"example": "examples"
},
"homepage": "https://github.com/KyleAMathews/react-headroom",
"keywords": [
"headroom",
"react",
"react-component"
],
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"react": "^16.3.0 || ^17"
},
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/react-headroom.git"
},
"scripts": {
"build": "babel --copy-files src --out-dir dist",
"test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"test": "npm run unit-test && npm run lint",
"watch": "./node_modules/.bin/webpack-dev-server --hot",
"publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
"lint": "eslint --ignore-path .gitignore src/*",
"lint:fix": "eslint --ignore-path .gitignore . --fix",
"format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
}
}
You have forgotten to build your forked library with the build command.
So, build it:
npm build
// or
yarn build
Now use it without any issues on your application:
import Headroom from "react-headroom"
Note: you need to run the above command in your forked directory not the root of your project.
I'm new to npm and I'm trying to use tiptap in my project. The problem is that after I try to import tiptap, it raises error. This is what I did:
sudo npm install -g vue-cli
vue init webpack frontend
vue add vuetify - didn't do nothing so I did
npm add vuetify
Then I added this to main.js
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
npm install tiptap
Then I added import { Editor, EditorContent } from 'tiptap' to App.vue and it started raising error:
<template>
<div> ... SOME CODE ...
</div>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
name: 'App'
}
</script>
ERROR
Failed to compile.
./node_modules/tiptap/dist/tiptap.esm.js
Module parse failed: Unexpected token (126:23)
You may need an appropriate loader to handle this file type.
| } = this.node;
| const pos = this.getPos();
| const newAttrs = { ...this.node.attrs,
| ...attrs
| };
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 46:0-47
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Do you know what to do?
EDIT - package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.0.1",
"tiptap": "^1.32.1",
"vue": "^2.5.2",
"vuetify": "^2.4.7"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using
vue add vuetify
then install tiptap :
npm i tiptap
and use as explained in official docs
so I have React component that works well in the browser, but fails to render while testing. I am using Jest, and the component in question is a wrapper around React Sortable. While trying to launch the test, I get "_sortablejs2.default.create is not a function" error, which I have found out that is caused by imports (i.e. require('react')) in Sortable.js file returning 'undefined'. Why might that be? Other tests that I have work just fine.
Test itself:
let renderer = TestRenderer.create(
<DragAndDropSelector
selected={[]}
choices={[]}
selectedChange={ (a, b, c) => {return a} }
/>
);
expect(renderer.toJSON()).toMatchSnapshot();
});
My package json:
{
"name": "<Redacted/>",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "0.17.1",
"babel-eslint": "8.2.3",
"faker": "4.1.0",
"file-saver": "1.3.8",
"history": "4.7.2",
"html-to-react": "1.3.3",
"immutability-helper": "2.6.6",
"lodash": "4.17.5",
"moment": "2.21.0",
"npm": "6.1.0",
"npm-run-all": "4.1.2",
"react": "16.2.0",
"react-cookie": "2.1.4",
"react-datepicker": "1.4.1",
"react-dates": "16.6.1",
"react-dom": "16.2.0",
"react-redux": "5.0.7",
"react-redux-toastr": "^7.3.0",
"react-router": "4.2.0",
"react-router-dom": "4.2.2",
"react-scripts": "1.1.0",
"react-sortablejs": "^1.3.6",
"react-test-renderer": "16.2.0",
"redux": "3.7.2",
"redux-dehydrate": "0.0.2",
"redux-logger": "3.0.6",
"redux-persist": "5.6.5",
"redux-thunk": "2.2.0",
"semantic-ui": "2.3.1",
"semantic-ui-react": "0.78.2",
"sortablejs": "^1.7.0"
},
"scripts": {
"build-css": "less-watch-compiler --run-once src src",
"watch-css": "npm run build-css && less-watch-compiler src src",
"start-js": "PORT=3000 react-scripts start --host 0.0.0.0",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"less-watch-compiler": "1.11.0",
"redux-mock-store": "1.5.1",
"serve": "6.5.3"
},
"homepage__doc": "See VERSION in config/config.js, version should be the same",
"homepage": "/2.1/"
}
Im stumped, so any help would be appreciated:)
EDIT: As per request, more detailed error message:
TypeError: _sortablejs2.default.create is not a function
at Sortable.componentDidMount (/home/path/node_modules/react-sortablejs/lib/Sortable.js:120:50)
at commitLifeCycles (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4553:24)
at commitAllLifeCycles (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5729:9)
at Object.invokeGuardedCallback$1 (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1559:10)
at invokeGuardedCallback (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1506:29)
at commitRoot (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5833:9)
at performWorkOnRoot (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6800:42)
at performWork (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6750:7)
at requestWork (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6661:7)
at scheduleWorkImpl (/home/path/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6515:11)
More info:
In react-sortablejs/lib/Sortable.js file, in line
var _sortablejs = require('sortablejs');
require returns undefined. However, I have sortablejs installed, I can see it with my very own eyes in the node modules. I even checked that it does get entered when rendering in browser, but not when running tests. I am stumped, so any help would be greatly appreciated :)