I am trying to use React with Symfony 4 but i couldn't achieve.
When i try to build webpack i got the following error for every .js file that i added to webpack.config.js via .addEntry()
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
at assertNoDuplicates (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-descriptors.js:205:13)
at createDescriptors (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-descriptors.js:114:3)
at createPresetDescriptors (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-descriptors.js:58:96)
at cachedFunction (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/caching.js:33:19)
at presets.presets (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-descriptors.js:29:84)
at mergeChainOpts (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-chain.js:320:26)
at /var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/config-chain.js:68:29)
at loadPrivatePartialConfig (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/var/www/admin.whenandwhere.events/node_modules/#babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:140:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:3:103)
at _next (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:194)
at /var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:220:18)
at Object.loader (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:56:18)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:51:12)
But i didn't specify any plugin neither .babelrc or webpack.config.js.
Here are my files
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/main.js')
.addStyleEntry('global', './assets/css/global.scss')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSassLoader()
.autoProvidejQuery()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableReactPreset()
.configureBabel((config) => {
config.presets.push(
['#babel/env'],
['#babel/react'],
)})
.addEntry('react', './assets/js/reactGeoSuggest.js')
;
module.exports = Encore.getWebpackConfig();
package.json
{
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"#symfony/webpack-encore": "^0.23.0",
"bootstrap": "^4.3.1",
"bootstrap-sass": "^3.4.1",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"#babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-dom": "^16.8.4"
}
}
I don't have any .babelrc file.
So it looks very strange for me getting this error, i tried to follow a few tutorials but they were outdated due to babel 7 changes. Now i am stuck at this error.
Remove .enableReactPreset() or config.presets.push(['#babel/env'], ['#babel/react'])})
These basicly do the same thing, if no .babelrc file is present.
First of all, your configuration is conflicted each other. As long as, you would like to use Encore and Symfony with React, you're supposed to watch this tutorial.
https://symfonycasts.com/screencast/webpack-encore
In addition, If you prefer to go ahead with this, you should run this command add that file.
npm install -D #babel/core #babel/preset-env babel-loader
.babelrc
{
"presets": ["#babel/preset-env"]
}
I had a similar issue when I try to run a react project. I have fixed the issue by modifying the package.json file.
Simple solution: just delete the "^" in "#babel/preset-react": "^7.0.0", from your package.json file, And run the npm install command after npm cache verify.
Your webpack.config.js contains babel/env. But there is not any package with same name in npm repository. There is babel-preset-env. This package webpack encore includes by default - according to Symfony documentation "Configuring Babel"
https://symfony.com/doc/current/frontend/encore/babel.html
Babel is automatically configured for all .js and .jsx files via the
babel-loader with sensible defaults (e.g. with the #babel/preset-env
and #babel/preset-react if requested).
So try change your config to this:
.enableReactPreset()
.configureBabel(function(babelConfig) {
}, {
});
You don't need add '#babel/react' as preset in webpack config
because option .enableReactPreset() already has been doing this https://github.com/symfony/webpack-encore/blob/v0.27.0/lib/loaders/babel.js#L57-L61
If you need enable additional presets or plugins use this syntax according Symfony Documentation "Configuring Babel"
Also your package.json is redundant. You can remove from its:
#babel/preset-react
#babel/preset-env
babel-loader
redundant
These packages has been already included as dependency for #symfony/webpack-encore
See here https://github.com/symfony/webpack-encore/blob/v0.27.0/package.json
Related
While trying to connect a react frontend, which was just created using create-react-app, I got this error message when running npm run start after importing pact-lang-api to the app:
ERROR in ./node_modules/eventsource/lib/eventsource.js 5:12-28 Module not found: Error: Can't resolve 'https' in '/src/node_modules/eventsource/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }
ERROR in ./node_modules/eventsource/lib/eventsource.js 7:11-26 Module not found: Error: Can't resolve 'http' in '/src/node_modules/eventsource/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }
webpack compiled with 2 errors and 2 warnings
My dependencies look like this:
{
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/material": "^5.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"pact-lang-api": "^4.3.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.1.4"
}
How would I work through this?
Thanks in advance for any help!
The error says to install stream-http and https-browserify.
Try
npm i stream-http https-browserify
Just fixed this issue myself by following along with the solution at https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5.
Note that the article is targeted at fixing this issue created by web3.js package, not pact-lang-api. For pact-lang-api, you will also need to add the url and util packages so your final config-overrides file will look like...
const webpack = require("webpack");
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify"),
url: require.resolve("url"),
util: require.resolve("util"),
});
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);
return config;
};
The solution in the article does not include url: require.resolve("url") or util: require.resolve("util"), but you will need both.
I want use React js+Mobx but I'm getting an error
ERROR
./src/stores/Todo.js
SyntaxError: C:\Users...example path\Todo.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (9:5):
[enter image description here][1]
Versions
"mobx": "^5.15.2",
"mobx-react": "^6.1.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
Thanks.
You need to use the Babel plugin #babel/plugin-proposal-decorators in your babel config.
For this you should install it as a dependency, from npm.
npm install #babel/plugin-proposal-decorators -DE
Then add the following lines to your babel config under plugins.
//...
plugins: [
[
'#babel/plugin-proposal-decorators',
{
'legacy': true
}
],
// ...
]
For a new project i am using Lerna and React Storybook. I want to create a monorepo with multiple packages.
My folder structure looks like this:
.babelrc
.storybook
package.json
node_modules
packages/
button/
.babelrc
node_modules/
package.json
index.js
theme/
node_modules/
package.json
index.js
I want to import the theme from the theme package inside my button package, which i install through npm in my button package.
In my button package i am importing the theme
import theme from '#company/company-theme';
and i get the following error:
Module not found: Error: Can't resolve '#company/company-theme' in buttonpath
At first i thought it was a babel problem and in the package.json i installed the following babel packages
"babel-cli": "^6.26.0",
"babel-jest": "^23.4.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
And in the projectroot and the button root i created a .babelrc and added the following code:
{
"presets": ["env", "react"],
"env": {
"dev": {
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
The problem however still exists. Anyone here knows what to do?
im using React in Symfony, installed Jest and Enzyme to test the React components, but when trying to run tests with yarn test or even yarn test --no-cache got following error:
here is my package.json file:
{
"devDependencies": {
"#symfony/webpack-encore": "^0.20.1",
"babel-jest": "^23.2.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"rc-datetime-picker": "^1.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
},
"setupTestFrameworkScriptFile": "./assets/js/__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": [
"./assets/js/__tests__/setup/"
]
}
}
and my webpack.config.js(encore) file:
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('app', './assets/js/index.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
.enableReactPreset()
// first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
// then, modify the default Babel configuration
.configureBabel(function(babelConfig) {
// add additional plugins
babelConfig.plugins.push('transform-object-rest-spread');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
})
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
// allow sass/scss files to be processed
// .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
and finally my setupEnzyme.js:
const Enzyme = require('enzyme');
// this is where we reference the adapter package we installed
// earlier
const EnzymeAdapter = require('enzyme-adapter-react-16');
// This sets up the adapter to be used by Enzyme
Enzyme.configure({ adapter: new EnzymeAdapter() });
I tried all of the available solutions but none of them worked for me!
any idea about it? :(
I know that this reply comes about 2 years after the post was created, however I have faced similar problem with Jest/Enzyme tests under React/Symfony 5/Encore setup. Here is a valid solution for the issue:
Comment Babel configuration from webpack.config.js (used by Encore) and create custom configuration with regular babel.config.js file:
webpag.config.js - comment Encore configureBabelPresetEnv babel setup:
/*
* Commented as babel.config.js is used
* The "callback" argument of configureBabelPresetEnv()
* will not be used because your app already provides an
* external Babel configuration (e.g. a ".babelrc" or "babel.config.js"
* file or "babel" key in "package.json").
*/
//enables #babel/preset-env polyfills
//.configureBabelPresetEnv((config) => {
// config.useBuiltIns = 'usage';
// config.corejs = 3;
//})
babel.config.js - create this configuration file at the root of your project. It will serve Jest to grab babel preset and overload part of Encore configuration (commented previously in webpack.config.js):
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
browsers: [
"> 0.5%",
"last 2 versions",
"IE 11"
]
},
useBuiltIns: 'usage',
corejs : {
version: "3",
proposals : true
}
},
],
['#babel/preset-react'],
['#babel/preset-typescript']
],
plugins: ["#babel/plugin-syntax-jsx"]
};
Setup Jest using following files:
setup.js - create the file in your test directory
import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
finally update jest.config.js file with lines below:
module.exports = {
rootDir: './assets',
//test files
testRegex: './assets/js/.*test\\.js$',
//setup
setupFiles: ['<rootDir>/tests/setup.js'],
//alias list to integrate swiftly nested directories
//this can be skipped if not needed
moduleNameMapper: {
'^#constants(.*)$': '<rootDir>/js/constants',
'^#containers(.*)$': '<rootDir>/js/containers',
'^#store(.*)$': '<rootDir>/js/store',
//identity-obj-proxy to integrate styles/images etc.
//this can be skipped if not needed
'\\.(css|less|scss|jpg|jpeg|png)$': 'identity-obj-proxy'
}
};
List of dependencies I have used to make Jest/Enzyme working with React/Symfony 5:
npm install --save-dev jest
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16
npm install --save-dev #babel/plugin-syntax-jsx
npm install --save-dev #babel/preset-typescript
npm install --save-dev identity-obj-proxy
Final implementation can be found here:
symfony-react-jest-enzyme
Voila, hope this will help someone.
I'm attempting to use React Storybook in a project that already has an extensive Webpack 2 config. I started the Storybook following the basic steps:
npm i -g #storybook/cli
getstorybook
When I run yarn storybook, it breaks on the JSX of the demo component:
ERROR in ./stories/index.jsx
Module parse failed: /Users/alexanderhadik/project/web/node_modules/#storybook/react/node_modules/babel-loader/lib/index.js??ref--0!/Users/alexanderhadik/project/web/stories/index.jsx Unexpected token (9:55)
You may need an appropriate loader to handle this file type.
| import { Button, Welcome } from '#storybook/react/demo';
|
| storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
| storiesOf('Button', module)
# ./.storybook/config.js 4:2-23
# multi ./node_modules/#storybook/react/dist/server/config/polyfills.js ./node_modules/#storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
Since I didn't start this project originally using create-react-app - do I need to modify the Storybook webpack config to enable JSX?
This might to be a problem with Storybook not replicating webpack babelrc behaviour exactly.
In my case, I had an empty (just {}) .babelrc file with all the important react/jsx plugins defined in webpack.config.js. Storybook read the .babelrc instead of using the babel settings in webpack.config.js.
Deleting the .babelrc solved that issue.
in my case, i didnt have a .babelrc at all -- i used the entry "babel" in the package.json. when running the storybook in this project, the babel entry wasnt there. i added it and things magically started working.
{
"name": "root",
"private": true,
"devDependencies": {
"#storybook/addon-actions": "^4.1.11",
"#storybook/addon-links": "^4.1.11",
"#storybook/addons": "^4.1.11",
"#storybook/react": "^4.1.11",
...
},
"dependencies": {},
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
}
i hope this helps someone.