I have my app made with Reactjs.
I'm gettint this error when I try to run npm run-script build:
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: name (x) [./react/stores/UserStore.js:52,20]
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: name (x) [./react/stores/UserStore.js:52,20]
The error is thrown twice. And the line of the file that is poiting is commented!
And now I try without those lines and I'm still getting the same error.
But this is the first time that I have this error, don't know why, and i haven't touched that file in weeks...
Any idea?
Well, in my case was that I didn't have babel-preset-es2015 so:
npm install --save-dev babel-preset-es2015
Add es2015 to webpack-production.config.js, like this: ['es2015', 'es2016', 'react']
The Uglify will work with es6 code (es6 -[babel preset es2015]-> es5 -> webpack with uglify plugin -> done)
Related
I'm receiving the error Uncaught Error: Cannot find module './App' at webpackMissingModule in the console of the local environment when I run npm start from the client directory.
The screen renders 2 errors.
ERROR in ./src/index.tsx 7:0-24 Module not found: Error: Can't resolve './App.tsx' in '/client/src'
ERROR in ./src/index.tsx 7:0-24 Module not found: Error: Can't resolve './store.ts' in '/client/src'
However, when I import the client directory of my project into a CodeSandbox, it is working.
Note, I did NOT create a webpack.config.js file in the client directory and tsconfig.json file in the root directory.
Instead, I'm using config-overrides.js as an alternative to webpack.config.js as I did not want to eject from the Create React App environment to setup my Webpack configuration.
Here are the contents of config-overrides.js.
const { override, addWebpackModuleRule } = require('customize-cra');
module.exports = override(
addWebpackModuleRule({
test: /\.(ts|tsx|js|jsx)$/,
loader: require.resolve('ts-loader'),
}),
addWebpackModuleRule({
test: /\.json$/,
loader: require.resolve('json-loader'),
type: 'javascript/auto',
})
);
Solution Attempts:
delete node_modules and package-lock.json, then npm install
npm cache clean --force and npm cache clear --force
assured the dependencies and packages installed in my local environment are the same in CodeSandbox.
assured file paths are correct
using Chrome on both local and CodeSandbox
Here is the CodeSandbox. What's going on?
when I'm removing the babel-loader from webpack these errors are found.
I don't want babel-loader in webpack.
I need to configure webpack without babel-loader
when I create react app using npx create-react-app app-name the app gets created but when I start the app using npm start i get the following error, please can someone guide me
Failed to compile.
./src/index.js 1:39
Module parse failed: Unexpected token (1:39)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('D:/Project's/React/CRUD-Operations/client/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
Created a new react app and tried building a production version using the "npm run build" command and it is giving the following error :
"Failed to minify the bundle. Error: static/js/main.1f26fd13.chunk.js from Terser
TypeError: Cannot read property 'minify' of undefined
at compiler.run. " .
Try
npm install terser#3.14.1 --save-dev
Github Discussion Link
I'm using create-react-app and I'm trying to integrate font-awesome so I can use it in my SPA.
I've done npm install font-awesome and it's installed, but when I try to call import 'font-awesome/css/font-awesome.css' I get the following error:
Compiling...
Failed to compile.
Error in ./~/font-awesome/css/font-awesome.css
Module parse failed: C:\Projects\myproject\ui\node_modules\font-awesome\css\font-awesome.css Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (7:0)
# ./src/index.js 11:0-44
This is webpack related...
Webpack needs to use loader to read and parse different import statements...
CSS loader https://github.com/webpack-contrib/css-loader