Get the following error when trying to load built assets...

[asolopovas]

Hi,
I am getting the followign error when loading @wordpress/blocks do you know why that might be happning?

Uncaught TypeError: Failed to resolve module specifier "@wordpress/blocks". Relative references must start with either "/", "./", or "../".

Here is my config:

import fs from 'fs'
import {defineConfig} from 'vite'
import laravel from 'laravel-vite-plugin'

import wpResolve from  "rollup-plugin-wp-resolve"


import reactRefresh from '@vitejs/plugin-react-refresh'
import reactSvgPlugin from 'vite-plugin-react-svg'

const keyPath = `./src/ssl`
const hmrHost = process.env.HMR_HOST || 'localhost'

export default defineConfig({
    build: '.',
    server: {
        host: hmrHost,
        https: {
            key: fs.readFileSync(`${keyPath}/${hmrHost}.key`),
            cert: fs.readFileSync(`${keyPath}/${hmrHost}.crt`),
        },
    },
    plugins: [
        laravel({
            input: [
                'src/js/blocks/blocks.js',
            ],
            publicDirectory: 'dist',
            buildDirectory: '.'
        }),
        reactSvgPlugin(),
        reactRefresh(),
        wpResolve(),
    ],
})

blocks.js:

var global = global || window

import {registerBlockType} from '@wordpress/blocks'

import {
    settings as columns,
    name as columnsName,
    metadata as columnsMeta
} from './blocks-name'

import {
    settings as column,
    name as columnName,
    metadata as columnMeta
} from './block-name'

registerBlockType(columnsName, {title: columnsMeta.title, ...columns})
registerBlockType(columnName, {title: columnMeta.title, ...column})

[kshaner]

@asolopovas Have you tried putting wpResolve as the first plugin in your config? I usually use mine like this:

import { babel } from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import rollupJson from '@rollup/plugin-json';
import rollupSvg from 'rollup-plugin-svg-import';
import wpResolve from 'rollup-plugin-wp-resolve';

const globals = {}; // add extra globals here

const plugins = [
	wpResolve(),
	nodeResolve( { // resolve node_modules
		browser: true,
	} ),
	rollupJson(), // convert json files to es-modules
	rollupSvg( {  // import svg into bundles
		stringify: true
	} ),
	babel( {
		babelHelpers: 'bundled',
		exclude: 'node_modules/**',
		presets: [
			[
				"@babel/preset-env",
				{
					"modules": false,
				},
			],
			[
				'@babel/preset-react',
				{
					pragma: 'wp.element.createElement',
					pragmaFrag: 'wp.element.Fragment',
				}
			],
		],
	} ),
	commonjs( { // convert common/requirejs to esmodules
		exclude: [
			'src/**'
		]
	} ),
];

export default [
	{
		input: 'src/index.js',
		external: Object.keys( globals ),
		plugins,
		output: [
			{
				file: 'dist/index.js',
				format: 'iife',
				globals,
				name: 'exportName',
				plugins: [ terser() ],
				sourcemap: true,
			}
		],
	},
];

It could also be a conflict with some of your other plugins but try moving it up in your plugin order and see if that helps.

[asolopovas]

Is it possible that import {registerBlockType} from '@wordpress/blocks' this line break the code? because moving plugin to the top hasn't fixed the problem. By the way I use vitejs instead of rollup but its built on top of it... from what I know that plugins for rolup should work also.

This is compiled file imports:

import {createBlock as y, store as Q, createBlocksFromInnerBlocksTemplate as M, registerBlockType as T} from "@wordpress/blocks";
import {__ as u, sprintf as Y} from "@wordpress/i18n";
import {mapValues as ee, merge as te, sumBy as ne, times as S, dropRight as oe, get as P} from "lodash";
import {PanelBody as W, RangeControl as le, Notice as ce, ToggleControl as se, SVG as f, Path as k, __experimentalUseCustomUnits as ie, __experimentalUnitControl as re} from "@wordpress/components";
import {store as h, useBlockProps as B, useInnerBlocksProps as x, BlockControls as D, BlockVerticalAlignmentToolbar as O, InspectorControls as F, __experimentalBlockVariationPicker as ae, useSetting as ue, InnerBlocks as me} from "@wordpress/block-editor";
import {withDispatch as de, useSelect as E, useDispatch as L} from "@wordpress/data";
import {createElement as C} from "@wordpress/element";
import {SVG as Z, Path as q} from "@wordpress/primitives";

[kshaner]

That line is what the plugin is supposed to handle. I've never used vite js, but I'll try setting it up there and see if something is off.

[kshaner]

@asolopovas it looks like vite plugins do not call the outputOptions hook of rollup which this wp-resolve uses: https://vitejs.dev/guide/api-plugin.html#universal-hooks

The plugin would need to be adapted to support vite.

[leopiccionia]

If you're interested, this is how I adapted this plugin to be Vite compatible: vitejs/vite#9411.

I'd love if this plugin supported it by default, instead of having to maintain a fork. I can send a PR, if you're interested.