When I'm magrate webpack from v1 to v3, I meet the ERROR:
ERROR in ./index.js
Module build failed: (SystemJS) ENOENT: no such file or directory, open '/Users/zhangcong/Desktop/g/mi-insight-web/object-assign'
Error: ENOENT: no such file or directory, open '/Users/zhangcong/Desktop/g/mi-insight-web/object-assign'
Error loading /Users/zhangcong/Desktop/g/mi-insight-web/object-assign as "object-assign" from /Users/zhangcong/Desktop/g/mi-insight-web/node_modules/babel-loader/lib/index.js
This is the migrate guide I followed: see
I'm trying to rename modulesDirectories as modules, but failed.
Something I've done:
-root: PATH.SOURCE_PATH,
-modulesDirectories: ['node_modules'],
-extensions: ['', '.js', '.jsx'],
+modules: ['node_modules'],
+extensions: ['.js', '.jsx'],
and I migrate the postcss and removed the OccurenceOrderPlugin.
I've tried using path.resolve(), and I can't figure out why modules failed.
I solved by:
npm install postcss-import#8.0.2 --save-dev
see: babel-loader#242
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?
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
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
A have create-react-app application.
I want to run production version on my local machine.
I have made 'npm run build' and than 'npx webpack'
(for addition info i use react-app-rewired in that poject to config proxy for devserver) and have next mistake:
ERROR in ./src/index.js 13:2
Module parse failed: Unexpected token (13:2)
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(
> <Provider store={store}>
| <App />
| </Provider>,
'serve -s build' do not work in my case:
zsh: command not found: serve
What should i do to run production build on my local?
Thanks for help!
A better way to handle this would not be to install a new global, but use npx to run serve:
npx run serve -s build
Please check if you have serve installed globally on local machine or not.
If not, then follow below commands:
npm install -g serve
serve -s build
If this doesn't work then remove the build, close the command prompt and again run the npm run build command and serve it.
Also, there is no preset & babel-loader in the application so install the dependency and add loader in the application.
npm install babel-preset-es2015
Configure the babel-loader
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
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)