Related
Previously, the command "npm run storybook" worked but now we have an error
Сreate-react-app 17 version
"#storybook/addon-a11y": "^6.5.16",
"#storybook/addon-actions": "^6.3.8",
"#storybook/addon-essentials": "^6.3.8",
"#storybook/addon-links": "^6.3.8",
"#storybook/node-logger": "^6.3.8",
"#storybook/preset-create-react-app": "^3.2.0",
"#storybook/react": "^6.3.8",
I tried reinstall npm packages and reinstall storybook but it didnt help. Maybe someone can help with the problem?
`at handleParseError (NormalModule.js:469:19)
at NormalModule.js:503:5
at NormalModule.js:358:12
at loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> lib/LoaderRunner.js:205:4)
at Storage.finished /CachedInputFileSystem.js:55:16)
at CachedInputFileSystem.js:91:9
at /graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)`
Issue
Hello,
I am trying to use SnapSVG in my react project, but I cannot get it to run in the first place. Could someone help me with the proper settings? I am not very familiar with webpack so detailed instructions would be very much appreciated.
error
index.js?46cb:602 Uncaught ReferenceError: window is not defined
at Object.<anonymous> (FILEPATH/node_modules/snapsvg/dist/snap.svg.js:485:3)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.snapsvg (FILEPATH/.next/server/pages/index.js:1291:18)
at
**webpack_require**
(FILEPATH/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/domain/top-first-view/index.tsx:9:65)
import in React components
import * as Snap from 'snapsvg';
package.json
"dependencies": {
"next": "^13.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sanitize.css": "^13.0.0",
"sass": "^1.56.1"
},
"devDependencies": {
"typescript": "^4.8.4",
"imports-loader": "^4.0.1",
"snapsvg": "^0.5.1",
"#types/snapsvg": "^0.5.2",
"cjs-loader": "^0.1.0",
...
},
"volta": {
"node": "18.6.0",
"yarn": "1.22.19"
}
what I've tried so far
I have tried using imports-loader as is discussed in this Github thread, but this resulted in a new error.
new error after webpack settings
Uncaught Error: ENOENT: no such file or directory, open 'FILEPATH/.next/server/pages/index.js'
at Object.openSync (node:fs:594:3)
at Object.readFileSync (node:fs:462:35)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1143:18)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (FILEPATH/node_modules/next/dist/server/require.js:88:12)
at <unknown> (FILEPATH/Documents/GitHub/toda-web-art/node_modules/next/dist/server/load-components.js:37:73)
at async Object.loadComponents (FILEPATH/node_modules/next/dist/server/load-components.js:37:26)
webpack config in next.config.js
webpack(config) {
config.module.rules.push(
{
test: require.resolve('snapsvg'),
use: 'imports-loader?this=>window,fix=>module.exports=0',
},
...
Thank you!
I have got below errors after using gulp serve to run a Angular project.
SyntaxError: /Users/xxxx/Desktop/xxx/Projects/xxxx_Project/TeamTrack_Angular/package.json: Unexpected token } in JSON at position 1429
at JSON.parse ()
at Object.Module._extensions..json (module.js:672:27)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at module.exports (/Users/jzhu321/Desktop/PwC/Projects/TeamTrack_Project/TeamTrack_Angular/node_modules/gulp-load-plugins/index.js:49:49)
at Object. (/Users/jzhu321/Desktop/PwC/Projects/TeamTrack_Project/TeamTrack_Angular/gulp/build.js:7:37)
at Module._compile (module.js:653:30)
and this is my package.json:
{
"name": "forecastAngular",
"version": "0.1.0",
"dependencies": {
"bower": "^1.7.9",
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "^3.9.1",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-cssnano": "~2.1.1",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-htmlmin": "~1.3.0",
"gulp-inject": "~3.0.0",
"gulp-load-plugins": "~0.10.0",
"gulp-ng-annotate": "~1.1.0",
"gulp-protractor": "~2.1.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "~2.0.4",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~3.0.3",
"gulp-util": "~3.0.6",
"http-proxy-middleware": "~0.9.0",
"karma": "~0.13.10",
"karma-angular-filesort": "~1.0.0",
"karma-coverage": "~0.5.2",
"karma-jasmine": "~0.3.6",
"karma-ng-html2js-preprocessor": "~0.2.0",
"karma-phantomjs-launcher": "~0.2.1",
"karma-phantomjs-shim": "~1.2.0",
"lodash": "~3.10.1",
"main-bower-files": "~2.9.0",
"phantomjs": "~1.9.18",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2",
},
"scripts": {
"test": "gulp test",
"postinstall": "bower install",
"prestart": "npm install",
"start": "gulp serve",
},
"devDependencies": {
"estraverse": "~4.1.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-angular-templatecache": "~1.8.0",
"del": "~2.0.2",
"lodash": "~3.10.1",
"gulp-cssnano": "~2.1.1",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-eslint": "~1.0.0",
"eslint-plugin-angular": "~0.12.0",
"gulp-load-plugins": "~0.10.0",
"gulp-size": "~2.0.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~3.0.3",
"gulp-util": "~3.0.6",
"gulp-ng-annotate": "~1.1.0",
"gulp-replace": "~0.5.4",
"gulp-rename": "~1.2.2",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-htmlmin": "~1.3.0",
"gulp-inject": "~3.0.0",
"gulp-protractor": "~2.1.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-sass": "~2.0.4",
"gulp-angular-filesort": "~1.1.1",
"main-bower-files": "~2.9.0",
"wiredep": "~2.2.2",
"karma": "~0.13.10",
"karma-jasmine": "~0.3.6",
"karma-phantomjs-launcher": "~0.2.1",
"phantomjs": "~1.9.18",
"karma-angular-filesort": "~1.0.0",
"karma-phantomjs-shim": "~1.2.0",
"karma-coverage": "~0.5.2",
"karma-ng-html2js-preprocessor": "~0.2.0",
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"http-proxy-middleware": "~0.9.0",
"chalk": "~1.1.1",
"uglify-save-license": "~0.4.1",
},
"engines": {
"node": ">=0.10.0"
}
}
I can't find what's wrong with it . so pls help .
everyone.
I'm trying to upgrade big appliction which was written on angular 1 to angular 2. As first step it try to create hybrid angular 1/2 appliction using official guide.
When all instructions was finished I get a error
Unhandled Promise rejection: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval (<anonymous>)
at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:242:26)
at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:113:43)
at http://localhost:8000/node_modules/zone.js/dist/zone.js:535:57
at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:275:35)
at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:151:47)
at drainMicroTaskQueue (http://localhost:8000/node_modules/zone.js/dist/zone.js:433:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:349:25)
Evaluating http://localhost:8000/app
Error loading http://localhost:8000/app ; Zone: <root> ; Task: Promise.then ; Value:
my systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
my dependencies in package.config
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#angular/upgrade": "~2.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
can someone help me with this?
You should fix that by adding the main entry point for app.
packages: {
app: {
main: 'main.js',
defaultExtension: 'js',
},
rxjs: {
defaultExtension: 'js'
}
}
This is happening because the app/main.js file is missing.
The http-server is returning HTML equivalent to index.html because there is no file to return. This is not the UMD module that zone.js expects, so we are getting a parsing error.
You will need to ignore this error once and proceed with the official guide.
I can't seem to test my files anymore.
I "npm i react react-dom react-addon-test-utils"
but even after all those installs,
it tells me i'm missing something
i even tried to install both devdep. and dep.
module.js:339
throw err;
^
Error: Cannot find module 'react-dom/lib/ReactTestUtils'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/react-addons-test-utils/index.js:1:80)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/react-compat.js:92:17
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/react-compat.js:146:5)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/Utils.js:29:20)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/MountedTraversal.js:32:14)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/ReactWrapper.js:23:25)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/index.js:15:21)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (AddNewSong.spec.js:5:28)
at Module._compile (module.js:425:26)
at loader (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:128:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:138:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:468:10)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/bin/_mocha:403:18)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:136:18)
at node.js:972:3
npm ERR! Test failed. See above for more details.
this is the package.json
{
"name": "KMR",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"start": "node app.js",
"build": "webpack",
"watch": "webpack --watch",
"test": "mocha --require test/helpers/setup.js",
"lint": "eslint --ignore-path .gitignore --cache ./",
"cover": "nyc --reporter=lcov --reporter=text --reporter=html --require babel-register --extension .jsx npm test"
},
"license": "MIT",
"dependencies": {
"axios": "0.9.1",
"bluebird": "^3.4.6",
"errorhandler": "^1.4.3",
"express": "4.13.4",
"express-favicon": "^2.0.0",
"express-jwt": "^5.1.0",
"lodash": "4.6.1",
"method-override": "^2.3.6",
"mysql": "^2.11.1",
"node-ensure": "0.0.0",
"pg": "^6.1.0",
"pg-hstore": "^2.3.2",
"pg-promise": "^5.3.4",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-modal": "^1.5.2",
"react-redux": "4.4.0",
"react-responsive": "^1.2.5",
"react-router": "2.0.0",
"redux": "3.3.1",
"sequelize": "^2.1.3",
"sequelize-cli": "^2.4.0",
"sqlite3": "^3.1.6",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.0"
},
"devDependencies": {
"babel-core": "6.5.2",
"babel-loader": "6.2.2",
"babel-polyfill": "6.7.4",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-register": "6.5.2",
"chai": "3.5.0",
"enzyme": "2.0.0",
"eslint": "2.2.0",
"eslint-config-standard": "5.1.0",
"eslint-config-standard-jsx": "1.1.1",
"eslint-config-standard-react": "2.3.0",
"eslint-loader": "1.3.0",
"eslint-plugin-promise": "1.0.8",
"eslint-plugin-react": "4.1.0",
"eslint-plugin-standard": "1.3.2",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-sass": "^2.3.2",
"jsdom": "8.0.4",
"json-loader": "0.5.4",
"livereload": "^0.6.0",
"mocha": "2.4.5",
"nyc": "6.0.0",
"react": "^0.14.7",
"react-addons-test-utils": "^15.4.1",
"react-dom": "^0.14.7",
"sinon": "^1.17.3",
"supertest": "^2.0.1",
"webpack": "1.13.2"
},
"directories": {
"test": "test"
},
"keywords": [
"react",
"workshop",
"intro",
"redux"
]
}
I found a work around for this from here
make sure that your app contains follow dependencies all in the same
version in package.json
react-addons-test-utils
react
react-dom
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
or upgrade to latest versions of above dependencies
For anyone who has run into this problem lately, note that react-addons-test-utils have been deprecated and all the test methods have been moved into react-dom.
So the fix looks like:
- Remove react-addons-test-utils from package.json and run npm update.
- Change the import statements to reflect the updates. For example:
import { renderIntoDocument } from 'react-dom/test-utils';
instead of the old
import { renderIntoDocument } from 'react-addons-test-utils';