I recently created my very first package in my project's Package Registry through GitLab.
It was published correctly and I was even able to yarn add ... the package in question to another repo.
Checking the node_modules I can see the package present. However, when I run import I am told that the module was not found.
I assume I'm either importing badly or exporting badly (or maybe both)
My package.json of the file I am exporting from has the following:
{
"name": "#thing/thing2",
"version": "0.1.2",
"private": false,
"dependencies": {
"many packages"
},
"scripts": {
"start": "react-scripts start",
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"publishConfig": {
"something"
},
"main": "./src/index.js",
"type": "module",
"license": "MIT"
}
The component I am after lives in src/thing1/file.jsx
And I'm importing the file as:
import {stuff} from "#thing/thing2"
I'm sure there is documentation online for how to do this but I'm clearly searching for it wrong, thanks.
I needed to add:
"type": "module",
"module": "./src/module-export.jsx",
to the package file.
Related
I'm trying to build my react application, using Visual Studio Code, by tyiping
yarn run build
But the error that I get is the following
ERROR in ./src/index.js 8:4
Module parse failed: Unexpected token (8:4)
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
|
| ReactDOM.render(
> <App />,
| document.getElementById('root')
| );
As requested in the answer, here follows the code of my package.json (I removed some of the dependencies otherwise there was too much code for stack overflow in the question)
{
"name": "react-portfolio",
"homepage": "https://StonesCutter.github.io/react-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
...
"yarn": "^1.22.19"
...
},
"scripts": {
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"build": "webpack"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^4.0.0",
"webpack-cli": "^4.10.0"
}
}
Do you know how could I fix this problem?
Package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/preset-react": "^7.14.5",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16"
}
The issue is that the styling of react app when locally run its working fine and styles are working properly but when I deployed same react app on firebase with following steps the styles are different than local:
1.Firebase init
2.Yarn build
3.Firebase deploy
tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
The firebase.json has public:build still its not working.
I have a react project built with create-react-app. Everything is working fine, except that every few minutes it decides to open up http://localhost:3000/ in a new tab in the browser. This happens when I haven't made any changes to the code, and I already have http://localhost:3000/ open in another tab. How can I make this stop happening? I haven't been able to find any solutions.
I'm on Windows 10, WSL2.
I start up the project using npm start. This is my package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {...},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thank you!
I m trying to run a react app, created using create-react-app. App runs successfully, but when I try to run JEST it give me the following error. I have looked and tried various options but could not fix it. Here is my package.json and jest.config.json
please suggest on what I might be doing wrong
Thank you
A
Error
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
SyntaxError: C:\Test\counter-app\src\App.test.js: Unexpected token (7:18)
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
> 7 | ReactDOM.render(<App />, div);
| ^
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
package.json
{
"name": "counter-app",
"version": "0.1.0",
"private": true,
"jest": {
"verbose": true,
"moduleDirectories": ["node_modules", "src"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-cookies)/)"
]
},
"dependencies": {
"bootstrap": "^4.3.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
jest.config.js
const {defaults} = require('jest-config');
module.exports = {
"verbose": true,
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.(css|scss|less)$": "jest-css-modules",
".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"globals": {
"NODE_ENV": "test"
},
moduleFileExtensions: [...defaults.moduleFileExtensions, 'js', 'jsx'],
"moduleDirectories": [
"node_modules",
"src/frontend",
"src/shared"
]
};
Modified Package.json as follows:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"jest-junit": "^9.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"reporters": [ "default", "jest-junit" ],
"test": "react-scripts test --watchAll=false",
"testResultsProcessor": "jest-junit",
"eject": "react-scripts eject"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": ".",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{hello}",
"titleTemplate": "{classname}-{helloTests}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "true"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Try removing jest.config.js file completely and let it work with default config.
My react app is not working on Internet explorer 11. It is working fine on edge and chrome.
when I connect my application through Node.js, react build folder it is working fine IE 11 and 9. through node server port it is working.
now I'm using spring boot but it is not working in IE11 and 9.
I have deployed my react app in IIS.
I have created my application through npx create-react-app.( As pointed out in the other answers for similar questions)
I have included this in both my index.js file but it does not work.
and installed polyfills in my app https://www.npmjs.com/package/react-app-polyfill
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
This is the error that I am getting:
I have looked at the links and they also faced the same error he didn't approve any answer yet React app not working in Internet Explorer 11
This is my package.json file:
{
"name": "insurance_automation",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"config": "^3.1.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.1",
"mysql2": "^1.6.5",
"node": "^11.15.0",
"nodemailer": "^6.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"sequelize": "^5.8.6",
"universal-cookie": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently \"npm run server\" \"npm start\" "
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^4.1.0",
"nodemon": "^1.19.1"
}
}
can anyone help me to resolve this issue.
As https://www.npmjs.com/package/react-app-polyfill suggests:
f you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the ie9 or ie11 and stable modules
import stable module of the react-app-polyfill in your main js file:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
and ie11 should also be included to your browserslist:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
What worked for me for both development and production
1.Import polyfills https://www.npmjs.com/package/react-app-polyfill#polyfilling-other-language-features
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
2.Include ie11/ie9 to your browserlist in package.json https://github.com/browserslist/browserslist
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
3.Delete .cache folder from your node_modules https://create-react-app.dev/docs/supported-browsers-features/#supported-browsers (This one did the trick for development environment)