I get an ERROR for re-bundling updated script after I imported import GoogleMap from './modules/GoogleMap’; and var googleMap = new GoogleMap(); inside the modules/scripts.js of a Wordpress app i am building. The full error reads:
`MacBook-Pro-2:wordpress Fighi$ gulp scripts
[14:28:28] Using gulpfile /Applications/MAMP/htdocs/wordpress/gulpfile.js
[14:28:29] Starting 'scripts'...
Hash: 7f21ae405761f9b513c9
Version: webpack 4.8.2
Time: 113ms
Built at: 12/18/2018 2:28:29 PM
ERROR in Entry module not found: Error: Can't resolve '/Applications/MAMP/htdocs/wordpress/wp-content/themes/university-test-sitejs/scripts.js' in '/Applications/MAMP/htdocs/wordpress’`
I took your advise one of the contributors advice and added this line of code to webpack.config.js file
module.exports = {
//...
resolve: {
extensions: ['.js', '.jsx']
}
};
Same ERROR ...
Your help would be greatly appreciated. I am kind of a newbie in building apps. Thank you
Related
I'm trying to optimize my nextjs page images with next-optimized-images
This is the next.config.js:
module.exports = {
...
withOptimizedImages: withOptimizedImages({
webpack(config) {
config.resolve.alias.images = path.join(__dirname, 'public')
return config
}
}),
...
Here is how I import image to components:
require(`public/assets/icons/${iconName}`)
My Error:
./public/assets/icons/website/information/hiring-black.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I'm using latest version of next-optimized-image and tried different guides but still no luck.
Please help
Next.js now optimize images by default.
Refer: next/image
If you need svg, you need to try adding svgr-webpack loader.
Install: yarn add #svgr/webpack -D
To configure this, update following in next.config.js
module.exports = {
...
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
return config;
},
...
};
Use it as following:
...
import Star from './star.svg'
...
<Star />
...
I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui
I need to generate an .ipa of the different targets my project has, but whether I do it in command line or via Xcode I continue to get the following error:
jest-haste-map: Haste module naming collision: react-native
The following files share their name; please adjust your hasteImpl:
* <rootDir>/node_modules/react-native/package.json
* <rootDir>/ios/build/Archive/DEV.xcarchive/Products/Applications/DEV.app/assets/node_modules/react-native/package.json
Failed to construct transformer: { Error: Duplicated files or mocks. Please check the console for more info
at setModule (/Users/danale/Projects/NFIBEngage/node_modules/jest-haste-map/build/index.js:620:17)
at workerReply (/Users/danale/Projects/NFIBEngage/node_modules/jest-haste-map/build/index.js:691:9)
at process._tickCallback (internal/process/next_tick.js:68:7)
mockPath1: 'node_modules/react-native/package.json',
mockPath2:
'ios/build/Archive/DEV.xcarchive/Products/Applications/DEV.app/assets/node_modules/react-native/package.json' }
I have already tried creating the rn-cli.config.js file like this:
const blacklist = require("metro-config/src/defaults/blacklist");
module.exports = {
resolver: {
blacklistRE: blacklist([/nodejs-assets\/.*/, /android\/.*/, /ios\/.*/])
}
};
or this:
const blacklist = require("metro-config/src/defaults/blacklist");
module.exports = {
resolver: {
blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
}
};
Neither of which has worked for me. I do also have a metro.config.js:
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
The steps here did not work for me:
How to fix React Native error "jest-haste-map: Haste module naming collision"?
Naming collision in react native app start
Error: jest-haste-map: Haste module naming collision:
I have tried running an rm -rf ios/build but eventually when it gets recreated the error returns.
What worked was running the following command:
rm ios/build/Archive/DEV.xcarchive/Products/Applications/DEV.app/assets/node_modules/react-native/package.json
I had this issue because i had duplicate node_module folder by the name node_module_bak created by a script check that you have the same.
Actually, this error happens just for a collision occurring. I don't know why it happens but obviously its a collision between these two:
<rootDir>/node_modules/react-native/package.json
<rootDir>/ios/build/[MY_BUILD_NAME]/Build/Products/Debug-iphoneos/[MY_BUILD_NAME].app/assets/node_modules/react-native/package.json
It is so clear to me that the second one is useless and the root of collision. so when I removed it everything became ok and everything worked well again. so use these command:
$ cd [YOUR_PROJECT_ROOT_PATH]
$ rm ios/build/[MY_BUILD_NAME]/Build/Products/Debug-iphoneos/[MY_BUILD_NAME].app/assets/node_modules/react-native/package.json
If you have init a new project in same main directory try to move it out and keep them in different places
I am trying to implement D3 in an app I am building with Nuxt. I have successfully imported it into a view in the <script> section with import * as d3 from 'd3' however because the app is being rendered server-side D3's functionality doesn't work (i.e. d3.select(...)) due to the lack of browser. In the Nuxt plugin documentation it suggests a pattern for client-only external plugins:
module.exports = {
plugins: [
{ src: '~plugins/vue-notifications', ssr: false }
]
}
I attempted to implement the pattern in the nuxt.config.js of my project:
module.exports = {
head: {
title: 'My Demo App',
meta: [...],
link: [...]
},
loading: {...},
plugins: [
{ src: '~node_modules/d3/build/d3.js', ssr: false}
]
}
However D3 throws a ReferenceError while looking for document and Nuxt throws a SyntaxError in the console pointing to something in the plugins field of nuxt.config.js.
For reference, demo.vue:
<template>
<div class="demo-container"></div>
</template>
<script>
import * as d3 from 'd3';
d3.select('.demo-container');
</script>
Would someone be able to point to what I'm doing wrong?
For anyone coming to this page looking for a solution,
these suggestions from piyushchauhan2011 here on GitHub sent me in the right direction.
All I needed to do:
import d3 in my single-file component, and then
do any DOM manipulation with d3 only within mounted()
Before all this, I had to of course add d3 to my project with yarn add d3 (or npm install d3).
[Edit: removed link that no longer works. It wasn't that relevant anyway.]
I was getting an error:
Must use import to load ES Module: .../node_modules/d3/src/index.js require() of ES modules is not supported. require() of .../node_modules/d3/src/index.js from .../node_modules/vue-server-renderer/build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/d3/package.json.
I solved it by reading this: https://github.com/nuxt/nuxt.js/issues/9223
which indicates you can add this to your nuxt.config.js file:
build: {
standalone: true,
}
This allowed the d3 import to work.
import * as d3 from "d3";
Here's a simple step-by-step tutorial:
Create a new NuxtJS project (Skip this step if you have an existing project)
npm init nuxt-app nuxtjs-d3js-example
Install D3JS
npm install d3
npm install #types/d3 --save-dev
Import D3JS and add a target
HTML:
<p id="d3-target"></p>
JavaScript:
import * as d3 from 'd3'
export default {
name: 'NuxtTutorial',
mounted: function() {
d3.select("#d3-target").text("This text is manipulated by d3.js")
},
}
Fix ES Module error (mentioned by #agm1984)
Error:
require() of ES Module /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/d3/src/index.js from /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of index.js in /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.
nuxt.config.js:
build: {
standalone: true,
}
A minimal project example can be found at: https://github.com/j3soon/nuxtjs-d3js-example, with each step detailed in the Git commit history.
Bashing my head against the wall:
Add
"sinon" : "latest"
to my bower.json. Install it.
Add sinon to my karma server:
files: [
'vendor/assets/bower_components/sinon/lib/sinon.js',
]
Paste the demo expectation into my spec:
it("calls the original function", function () {
var callback = sinon.spy();
var proxy = once(callback);
proxy();
assert(callback.called);
});
and:
TypeError: 'undefined' is not a function (evaluating 'sinon.spy()')
Why is this? How do I install sinon? Why haven't they bothered with an installation section on their github page?
I came to the same issue, and did the following :
in a command prompt, navigate to the root of your project and type :
npm install karma-sinon --save-dev
then in your karma.conf.js file add the following:
frameworks: ['jasmine', 'sinon']
It worked for me