I'm trying to build and version the assets for production in a Laravel project. I'm using laravel-vite-plugin version 0.6.1, node version v16.17.1, npm version 8.19.2. For this, when I run npm run build, I get the following error.
> 'resolve' is not exported by __vite-browser-external, imported by node_modules/vite/dist/node/constants.js
> file: /var/www/html/node_modules/vite/dist/node/constants.js:1:15
> 1: import path, { resolve } from 'node:path';
> ^
> 2: import { fileURLToPath } from 'node:url';
> error during build:
> Error: 'resolve' is not exported by __vite-browser-external, imported by node_modules/vite/dist/node/constants.js
> at error (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
> at Module.error (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
> at Module.traceVariable (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:12788:29)
> at ModuleScope.findVariable (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:11440:39)
> at Identifier.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:7439:40)
> at CallExpression.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:5269:23)
> at CallExpression.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:8935:15)
> at VariableDeclarator.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:5269:23)
> at VariableDeclaration.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:5265:73)
> at Program.bind (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:5265:73)
Below is my Vite configuration.
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/scss/style.scss',
'resources/scss/theme.scss',
'resources/js/bundle.js',
'resources/js/scripts.js',
'resources/js/charts/analytics-chart.js',
],
refresh: true,
}),
],
});
Related
I'm using Vite as the build tool for a project and added the plugin "vite-plugin--html-purgecss" to use PurgeCSS. However on build I get the following error:
failed to load config from C:\Users\User Name\Documents\GitHub\project-template\vite.config.js
error during build:
TypeError: htmlPurge is not a function
at file:///C:/Users/User%20Name/Documents/GitHub/project-template/vite.config.js.timestamp-1663917972492.mjs:6:5
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
at async loadConfigFromBundledFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63470:21)
at async loadConfigFromFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63356:28)
at async resolveConfig (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:62973:28)
at async doBuild (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45640:20)
at async build (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45629:16)
at async CAC.<anonymous> (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/cli.js:748:9)
Vite.config.js is defined at the root of the project, and am running node 16.17.0. The template project isn't running any frameworks.
I've tried two config files:
import { defineConfig } from 'vite'
import htmlPurge from 'vite-plugin-html-purgecss'
export default defineConfig({
plugins: [
htmlPurge()
]
})
and
import htmlPurge from 'vite-plugin-html-purgecss'
export default {
plugins: [
htmlPurge()
]
}
I had the same issue. I think it's a compatibility issue or an update that no longer supports that plugin. Try running the following:
npm install vite-plugin-purgecss -D
vite.config.js file:
import { defineConfig } from "vite";
import htmlPurge from 'vite-plugin-purgecss';
export default defineConfig({
plugins: [
htmlPurge([htmlPurge()]),
],
});
Let me know if that works for you.
TL;DR: Why is #rollup/plugin-commonjs looking in my package.json and how can I stop that so that I don't have to include #rollup/plugin-json arbitrarily to fix the problem?
I have a file written in JS for Node.js, CommonJS require() / module.exports() that I want to work in the Browser, so I am using Rollup to bundle and 'browserify' the Node.js code.
Environment
macOS Monterey Version 12.4
npm version 8.3.1
node version 16.14.0
rollup version 2.75.6
#rollup/plugin-json version 4.1.0
rollup.config.js
Here is my rollup.config.js:
// rollup.config.js
import commonjs from '#rollup/plugin-commonjs';
// import json from '#rollup/plugin-json';
const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);
export default [
{
input: "test/_client_test.js",
output: {
file: 'build/test/test.js',
format: 'iife'
},
plugins: [
commonjs()
]
}
];
Problem
When running npm rollup -c I get the following output:
[!] (plugin commonjs--resolver) Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
package.json (2:8)
1: {
2: "name": "my-package",
^
3: "version": "0.0.1",
4: "description": "hello world",
Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
at error (/***/node_modules/rollup/dist/shared/rollup.js:198:30)
at Module.error (/***/node_modules/rollup/dist/shared/rollup.js:12553:16)
at Module.tryParse (/***/node_modules/rollup/dist/shared/rollup.js:12930:25)
at Module.setSource (/***/node_modules/rollup/dist/shared/rollup.js:12835:24)
at ModuleLoader.addModuleSource (/***********/rollup.js:22309:20)
I'm trying to convert into pure ESM the webpack.config.js
import path from 'path'
import {fileURLToPath} from 'url'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyPlugin from 'copy-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import webpack from 'webpack'
var main_config = {
}
var renderer_config = {
}
var config = [
main_config,
renderer_config,
]
export config
I get this error:
yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
[webpack-cli] Failed to load '/home/raphy/NEW-Raphy-Template
/webpack.config.js' config
[webpack-cli] SyntaxError: Unexpected token 'export'
at ESMLoader.moduleStrategy (node:internal/modules
/esm/translators:117:18)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:337:14)
at async link (node:internal/modules/esm/module_job:70:21)
I tried also with
export renderer_config, main_config
and with
export renderer_config
export main_config
but still get error
Other info:
node: v16.15.0
O.S. : Ubuntu 20.04 Desktop
npm: v 8.5.5
You will need to export config as default with
export default config
You will also need to update your package.json to set
"type": "module"
or change the extension of the config to .mjs so that node understands this is as es module ( See: https://nodejs.org/api/packages.html#type )
My project creation process (this is a create-react-app typescript version template:
25 npx create-react-app test --template typescript
26 cd test
27 ls
28 npm install --save-dev react-test-renderer
29 npm test
30 npm test
31 node --version
32 npx create-react-app --version
33 npm install antd -g
34 npm test
My Jest version in package-lock.json
"#jest/core": {
"version": "24.9.0",
My node.js version is
v12.19.0
create-react-app version is
npx create-react-app --version
3.4.1
antd version is
antd#4.6.6
file: App.test.tsx testing file
import React from 'react';
import { render } from '#testing-library/react';
import App from './App';
import renderer from 'react-test-renderer';
import MyButton from './components/button';
it('renders a snapshot', () => {
const tree = renderer.create(<App/>).toJSON();
expect(tree).toMatchSnapshot();
});
it('MyButton', () => {
const tree = renderer.create(<MyButton/>).toJSON();
expect(tree).toMatchSnapshot();
});
My antd source file
import React from 'react'
import { Button } from 'antd';
const MyButton = () => {
const [value, setValue] = React.useState('')
// The event type is a "ChangeEvent"
// We pass in "HTMLInputElement" to the input
function onChange(e: React.ChangeEvent<HTMLInputElement>) {
setValue(e.target.value)
}
return <Button></Button>
}
export default MyButton;
When I ran npm test, I got this
FAIL src/App.test.tsx
● Test suite failed to run
Cannot find module 'react' from 'index.js'
However, Jest was able to find:
'components/button.tsx'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (../../../node_modules/antd/lib/affix/index.js:26:37)
Running jest on the application fails with:
Details:
/home/**/node_modules/monaco-editor/esm/vs/editor/editor.api.js:5
import { EDITOR_DEFAULTS } from './common/config/editorOptions.js';
^
SyntaxError: Unexpected token {
> 1 | import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
| ^
2 |
3 | /**
4 | * Get create function for the editor.
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (src/utils/editor-actions.js:1:1)
Application has installed packages for jest and babel-jest.
Babel config:
const presets = [
[
"#babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
useBuiltIns: "usage",
corejs: 3,
}
],
"#babel/preset-react"
];
const plugins = [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
"babel-plugin-styled-components"
];
module.exports = { presets, plugins };
The import statement as suggested in the docs for lazy loading modules from monaco leads to the esm folder, which jest is not familiar with.
import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
By default, babel-jest would not transform node_modules and hence anything referencing the monaco-editor would error out. A possible solution is to include monaco-editor package into the compilation step by transformIgnorePatterns as mentioned in the docs
Add these to the jest config:
{
"transformIgnorePatterns": [
"node_modules\/(?!(monaco-editor)\/)"
]
}
PS: If you are using jest-dom, it might start complaining on not implmenting certain features from monaco-editor, you can mock it out with:
jest.mock("monaco-editor/esm/vs/editor/editor.api.js");
The only workaround that helped me in that issue (from here):
In folder __mocks__ create file react-monaco-editor.js with content:
import * as React from 'react';
export default function MonacoEditor() {
return <div />;
}
I have the same issue with Jest and Monaco and to make the tests pass I had to:
Add a moduleNameMapper for monaco-editor: #133 (comment)
Configure a setupTests.js like explained here: stackOverflow
I'm using:
"jest": "^24.9.0"
"babel-jest": "24.9",
"monaco-editor": "^0.20.0"
"react-monaco-editor": "0.33.0",
"monaco-editor-webpack-plugin": "^1.8.2",