Laravel: Node modules not available - javascript

In Laravel 5.7.10, I've installed a few node modules, but I can't seem to work out how to make them available to my client-side JS. To use OpenLayers as an example, these are the steps I've followed:
npm install ol --save
npm install
npm run dev
My package.json is as follows:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"parcel-bundler": "^1.12.2",
"vue": "^2.5.7",
"ol": "^5.3.1",
"ol-popup": "^4.0.0",
"popper.js": "^1.14.7"
},
"dependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"parcel-bundler": "^1.12.2",
"vue": "^2.5.7",
"ol": "^5.3.1",
"ol-popup": "^4.0.0",
"popper.js": "^1.14.7"
}
}
I have this in resources/js/app.js:
/* OpenLayers dependencies */
const pbf = require('pbf');
const pixelworks = require('pixelworks');
const rbush = require('rbush');
require('ol');
In public/js/app.js I can see the OpenLayers core code has been loaded into there.
I have the following at the end of my php page:
<script src="{!! asset('js/app.js') !!}"></script>
In the client-side JS I'm running, I use the following function to check if a module is present:
function moduleAvailable(name) {
try {
require.resolve(name);
return true;
} catch(e){}
return false;
}
function checkForModule(module_name) {
if (moduleAvailable(module_name)) {
console.log("Module '"+module_name+"' loaded via Mix!");
} else {
console.log("Module '"+module_name+"' not detected");
}
}
When I run the above function using 'ol' as the module_name, I always get "Module 'ol' not detected" - and the same happens for all of the other modules listed as dev-dependencies in package.json.
I can't help but think I'm missing something really simple, but after a couple of days of trying to figure this out I just can't crack it. What else should I check?

Related

Error importing a package that was forked and edited in a Next.JS project

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.

getting rid of relative path react (removing "../..")

I have downloaded a react project with the following package.json :
{
"private": true,
"main": "src/index.js",
"dependencies": {
"#material-ui/core": "4.10.0",
"#material-ui/icons": "4.9.1",
"classnames": "2.2.6",
"history": "4.10.1",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"react-slick": "0.26.1",
"react-swipeable-views": "0.13.9"
},
"devDependencies": {
"#babel/cli": "7.10.1",
"#babel/plugin-proposal-class-properties": "7.10.1",
"#babel/preset-env": "7.10.1",
"#babel/preset-react": "7.10.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-react": "7.20.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "2.0.5"
},
"optionalDependencies": {
"typescript": "3.9.3"
},
"scripts": {
"start": "NODE_PATH=src/ react-scripts start",
"build": "react-scripts build && gulp licenses",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist",
"compile-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css",
"minify-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css --source-map true"
}
}
I dont know how the developer got rid of relative path in his code.
for example he imports modules like:import Header from "components/Header/Header.js";
although if I try to the same , i should do it like:import header from "../../../src/components/Header/header.js".
the link to the original github:
https://github.com/creativetimofficial/material-kit-react/
i have downloaded and installed this one , it works fine.
but when i try to copy some of the codes,it doesnt work.
use the jsconfig.json to set absolute path instead of reletive , as described in documentation
in the provided project he used
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
so he could accees all files using a absolute path , in all folder and subfolders of the project like
import file from "component/file/file.js"
In the root directory of your project, create a jsconfig.json file and save this;
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"exclude": ["node_modules"]
}
If you are using eslint in your project, you'll need to add this in your .eslintrc.js file;
...
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
...
You should be able to import files by their absolute path now.

License conflicts in nuxt

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
}
}
}

Cannot find module #jest/reporters when running 'detox test'

Having some trouble getting Detox setup in my React Native project.
My project configuration is as follows:
MacOS Version: 10.14.14
Xcode 10.2.1
Command Line Tools: Version 10.2.1
package.json:
{
"name": "AppName",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"detox": "^12.11.0",
"jest": "^23.6.0",
"jest-react-native": "^18.0.0",
"mocha": "^6.1.4",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"devtools": "react-devtools --port 8091",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"jail-monkey": "^2.1.1",
"react": "16.3.1",
"react-devtools": "^3.2.3",
"react-native": "~0.55.2",
"react-native-camera": "1.1.4",
"react-native-device-info": "^0.22.5",
"react-native-fs": "^2.13.3",
"react-native-image-resizer": "^1.0.0",
"react-native-mail": "^3.0.7",
"react-native-maps": "^0.21.0",
"react-native-permissions": "^1.1.1",
"react-native-signature-capture": "^0.4.9",
"react-native-sortable-list": "0.0.22",
"react-native-sound": "^0.10.12",
"react-native-splash-screen": "^3.1.1",
"react-native-sqlcipher-storage": "github:axsy-dev/react-native-sqlcipher-storage",
"react-native-swipe-gestures": "^1.0.2",
"react-native-swipeout": "^2.3.6",
"react-navigation": "^2.2.4",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0",
"rn-fetch-blob": "^0.10.15"
},
"rnpm": {
"assets": [
"./src/assets/fonts"
]
},
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ProntoPOD.app",
"build": "xcodebuild -workspace ios/ProntoPOD.xcworkspace -scheme ProntoPOD -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone XR"
}
},
"test-runner": "jest"
}
}
Originally I was getting the following errors occurring after installing Jest and Detox as per the instructions in the Setup Guide:
Build system information
error: Multiple commands produce '':
1) Target 'double-conversion' (project 'React') has copy command from '/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/react-native/third-party/double-conversion-1.1.5/src/bignum-dtoa.h' to '/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/ios/build/Build/Products/Debug-iphonesimulator/include/double-conversion/bignum-dtoa.h'
2) Target 'double-conversion-tvOS' (project 'React') has copy command from '/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/react-native/third-party/double-conversion-1.1.5/src/bignum-dtoa.h' to '/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/ios/build/Build/Products/Debug-iphonesimulator/include/double-conversion/bignum-dtoa.h'
Build system information
error: Multiple commands produce '':
1) Target 'double-conversion' (project 'React'): Libtool /Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/ios/build/Build/Products/Debug-iphonesimulator/libdouble-conversion.a normal x86_64
2) Target 'double-conversion-tvOS' (project 'React'): Libtool /Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/ios/build/Build/Products/Debug-iphonesimulator/libdouble-conversion.a normal x86_64
** BUILD FAILED **
detox[64617] ERROR: [cli.js] Error: Command failed: xcodebuild -workspace ios/ProntoPOD.xcworkspace -scheme ProntoPOD -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build
This was resolved by changing the Build System in XCode to the Legacy Build under Workspace Settings. The following error now appears and I am not sure how to resolve it:
Error: An error occurred while adding the reporter at path "/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/detox/runners/jest/streamlineReporter.js".Cannot find module '#jest/reporters'
at reporters.forEach (/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:510:15)
at Array.forEach ()
at TestScheduler._addCustomReporters (/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:497:15)
at TestScheduler._setupReporters (/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:466:12)
at new TestScheduler (/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:193:10)
at /Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/runJest.js:452:27
at Generator.next ()
at step (/Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/runJest.js:107:30)
at /Users/cbrobbel/ProntoProjects/prontopod/ProntoPOD/node_modules/jest/node_modules/jest-cli/build/runJest.js:118:15
at processTicksAndRejections (internal/process/task_queues.js:86:5)
detox[64758] ERROR: [cli.js] Error: Command failed: node_modules/.bin/jest --config=e2e/config.json --maxWorkers=1 '--testNamePattern=^((?!:android:).)*$' "e2e"
Any help would be appreciated.
Thanks!
If this is due to peer dependency, you can try npm install #jest/reporters manually since peer dependencies are not auto installed in npm 3 upwards.
Try running
npm install #jest/reporters
npm install

Imports while testing with Jest fail

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 :)

Categories